asp net server events example

ASP.Net Core バックエンドを使用したサーバー送信イベント

ASP.Net コア Web API での HTML サーバー送信イベントの使用に関する簡単な例。

リモートカウンター

このアプリケーションは、1 秒ごとに自動的に増加するカウンターです。ユーザーはカウンターを一時停止または再開したり、カウンターを特定の値に設定したりできます。

カウンタはサーバー上のメモリに保存されます。ブラウザ セッションでの変更は、開いている他のすべてのセッションに反映されます。

サーバー送信イベント

Server Sent Events は、HTTP ストリームを使用してサーバーから JavaScript にメッセージをプッシュできるようにする Web API です。

これはサーバーからメッセージをプッシュする唯一の方法ではありませんが、確かに簡単で、非常にエレガントな方法です。

サーバー送信イベントを使用する Javascript コードは、ファイル stream.js 内にあり、次のようになります。

 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;
    }
}

ASP.Net Core バックエンド

このリポジトリには、ASP.Net Core バックエンドでサーバー送信イベントを使用するための参照またはボイラープレート コードとして使用できる小さな自己完結型 Web アプリケーションが含まれています。

HTTP ストリーミング エンドポイントの実装は CounterController.cs にあり、次のようになります。これは、この StackOverflow の回答から改変されたものです。

 [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();
    }
}

状態 (カウンター) はシングルトン サービス PersistentCounter に保存されます。

このサービスは、カウンター値が更新されるたびにイベントをトリガーします。コントローラーはこのイベントをサブスクライブし、変更のたびに新しい値をクライアントにプッシュします。

走り方

アプリケーションを実行するには、リポジトリのメイン フォルダーに次のコマンドを入力するだけです。

 dotnet build
dotnet run

.NET 5 SDK を事前にインストールしていることを確認してください。

ブラウザを開いてhttps://localhost:5001に移動します。

有効な登録済み証明書を使用していないため、証明書エラーが発生します。

モチベーション

以下は、コンテキストを提供する背景情報の一部です。コードを理解するためにそれを読む必要はありません。

デスクトップ アプリケーションを Web に移植する

このリポジトリは、既存のデスクトップ アプリケーションを Web アプリケーションに移植する方法に関する概念実証の一部です。

フロントエンドに ASP.Net を使用するのが、おそらく最も簡単な方法でしょう。しかし、私は Web 開発には React/Redux がとても好きで、ASP よりも React/Redux の経験が豊富です。そこで、REST バックエンドには ASP を使用し、フロントエンドには React を使用することにしました。

慣用的な .Net アプリケーションは、イベント パターンを多用します。

私のアイデアは、アプリケーション内で生成されたすべてのイベントをサブスクライブし、それらを JSON にシリアル化し、 Server Sent Events を使用してクライアントにプッシュする、ある種のミドルウェアを作成することです。

クライアントはいくつかの Redux アクションをディスパッチすることでイベントに反応し、フロントエンドの状態を更新します。

バックエンドは、フロントエンドとの他のすべての対話のために REST エンドポイントを公開します。それについては特別なことは何もありません。

ミドルウェアは、このリポジトリ内のシングルトン サービス PersistentCounter と同じ役割を果たします。

このリポジトリは、プレーンなバニラ JavaScript のみを使用します。 React や Redux はありません。ここでの目的は、HTTP ストリームを介したメッセージのプッシュを評価することだけです。フロントエンドは関係ありません。