asp net server events example

Server Mengirim Acara dengan backend ASP.Net Core

Contoh kecil tentang penggunaan Acara Terkirim Server HTML di API web inti ASP.Net.

Penghitung jarak jauh

Aplikasi tersebut merupakan penghitung yang bertambah secara otomatis setiap detiknya. Pengguna dapat menjeda atau melanjutkan penghitung, atau mengaturnya ke nilai tertentu.

Penghitung disimpan dalam memori di server. Perubahan dalam sesi browser akan disebarkan ke semua sesi terbuka lainnya.

Acara Terkirim Server

Peristiwa Terkirim Server adalah API Web yang memungkinkan Anda mengirim pesan dari server ke JavaScript menggunakan Aliran HTTP.

Ini bukan satu-satunya cara untuk mengirim pesan dari server, tapi tentu saja cara yang mudah dan juga cukup elegan.

Kode Javascript yang menggunakan peristiwa yang dikirim server ada di file stream.js dan terlihat sebagai berikut:

 function readStream()
{
    const evtSource = new EventSource('/Counter/Stream');
    evtSource.onmessage = function(event) {
        const el = document.getElementById('counter');
        const { value } = JSON.parse(event.data);
        
        el.textContent = value;
    }
}

Bagian belakang ASP.Net Core

Repositori ini berisi aplikasi web mandiri kecil yang dapat digunakan sebagai referensi atau sebagai kode boilerplate, untuk menggunakan peristiwa yang dikirim server dengan backend ASP.Net Core.

Implementasi titik akhir streaming HTTP dapat ditemukan di CounterController.cs dan terlihat sebagai berikut. Ini diadaptasi dari jawaban StackOverflow ini.

 [HttpGet]
[Route("Stream")]
public async Task StreamCounter(CancellationToken cancellationToken)
{
    _logger.LogInformation("Start counter streaming.");

    Response.StatusCode = 200;
    Response.Headers.Add("Content-Type", "text/event-stream");

    _counter.CounterUpdated += StreamValue;

    while (!cancellationToken.IsCancellationRequested) {
        await Task.Delay(1000);
    }

    _counter.CounterUpdated -= StreamValue;
    _logger.LogInformation("Stop counter streaming.");

    async void StreamValue(object sender, int value)
    {
        var messageJson = JsonConvert.SerializeObject(_counter, _jsonSettings);
        await Response.WriteAsync($"data:{messageJson}nn");
        await Response.Body.FlushAsync();
    }
}

Status (penghitung) disimpan dalam layanan tunggal PersistentCounter.

Layanan ini memicu peristiwa setiap kali nilai penghitung diperbarui. Pengontrol berlangganan acara ini dan memberikan nilai baru ke klien setelah setiap perubahan.

Bagaimana cara menjalankannya

Untuk menjalankan aplikasi cukup ketik perintah berikut di folder utama repositori:

 dotnet build
dotnet run

Pastikan Anda menginstal .NET 5 SDK sebelumnya.

Buka browser dan navigasikan ke https://localhost:5001 .

Anda akan mendapatkan kesalahan sertifikat, karena saya tidak menggunakan sertifikat terdaftar yang valid.

Motivasi

Berikut ini hanyalah beberapa informasi latar belakang yang memberikan konteks. Anda tidak perlu membacanya untuk memahami kodenya.

Porting aplikasi desktop ke web

Repositori ini adalah bagian kecil dari bukti konsep tentang cara mem-porting aplikasi desktop yang ada ke aplikasi web.

Menggunakan ASP.Net untuk frontend mungkin merupakan cara termudah untuk melakukannya. Namun, saya sangat menyukai React/Redux untuk pengembangan web dan saya juga lebih berpengalaman dengannya dibandingkan dengan ASP. Jadi saya memutuskan untuk menggunakan ASP untuk REST Backend dan menggunakan React untuk frontend.

Aplikasi .Net idiomatis memanfaatkan pola acara secara besar-besaran.

Ide saya adalah menulis semacam middleware, yang berlangganan semua peristiwa yang dihasilkan di dalam aplikasi, membuat serialisasinya ke JSON, dan mendorongnya ke klien menggunakan Server Sent Events .

Klien akan bereaksi terhadap kejadian tersebut dengan mengirimkan beberapa tindakan Redux, yang akan memperbarui status frontend.

Backend akan mengekspos titik akhir REST untuk semua interaksi lainnya dengan frontend. Tidak ada yang istimewa tentang itu.

Middleware akan memainkan peran yang sama dengan layanan tunggal PersistentCounter di repositori ini.

Repositori ini hanya menggunakan JavaScript vanilla biasa. Tanpa Bereaksi atau Redux. Tujuan saya di sini hanya untuk mengevaluasi pengiriman pesan melalui aliran HTTP. Frontend tidak relevan.