記事ディレクトリ
序文
通常のWeb通信はHTTPリクエストをベースとしており、リクエストごとにクローズされるため遅延が比較的大きいのが特徴です。Web ゲーム、Web チャット、その他の機能を実行したい場合は、インスタント メッセージングを使用する必要があります。SignalR はインスタントコミュニケーションの手段です。
アプリケーションシナリオ
一般的なネットワーク リクエストは、データをデータベースに送り、Web ページ リクエストを使用してデータを読み取ることです。
ただし、低遅延とリアルタイム要件の場合、このロジックは適用されません。リアルタイムの性質により、以前のデータは重要ではないため、破棄できることを意味します。生放送と同じように、人為的に録画されない限り、最初の 1 分間は誰もビデオを見ず、直接破棄することができます。
ここでのライブブロードキャストとは、Douyu Live のようなビデオストリームではなく、リアルタイムデータを意味します。
SignalR の Web サイトはどのようなものですか?
Blazor は SignalR を使用して開発されています
Blazor URL を見つけて見てみましょう。
最初の ASP.NET Core SignalR プログラム
SignalR のバージョンを確認する
Microsoft には正式に 2 つの SignalR があり、1 つは .net Framework ベース、もう 1 つは .NET Core ベースです。Microsoft によると、SignalR のコア バージョンを使用することをお勧めします。
インターネット上で多くのチュートリアルを見つけましたが、バージョンが古すぎるか、答えが間違っています。Microsoft のチュートリアルに従って確認することをお勧めします。ちなみに、長い間検索したところ、Microsoft の最新の .net core 8.0 チュートリアルを見つけました。
新しい MVC プロジェクトを作成する
Microsoft の意向に従って、Blazor プログラムの代わりに ASP.NET Core Web を開きます
unpkgマネージャーを追加
長い間オンラインで検索した結果、LibMan をインストールする必要があることがわかりました。
dotnet tool install -g Microsoft.Web.LibraryManager.Cli
これには外部ネットワークに接続する必要があり、内部ネットワークでエラーが報告される可能性があります。
インストール成功
これを実行してバージョンを確認し、インストールが成功したかどうかを確認します。
libman --version
クライアントの追加
ChatHub ファイルを追加する
using Microsoft.AspNetCore.SignalR;
namespace SiganlRTest.Hubs
{
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}
SignalR サービスを追加する
ウェブページを追加
@page
<div class="container">
<div class="row p-1">
<div class="col-1">User</div>
<div class="col-5"><input type="text" id="userInput" /></div>
</div>
<div class="row p-1">
<div class="col-1">Message</div>
<div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
</div>
<div class="row p-1">
<div class="col-6 text-end">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<hr />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>
そこに Microsoft コードをコピーします
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable the send button until connection is established.
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// We can assign user-supplied strings to an element's textContent because it
// is not interpreted as markup. If you're assigning in any other way, you
// should be aware of possible script injection concerns.
li.textContent = `${
user} says ${
message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
テストの実行
ブラウザ WebSocket のデバッグ
送信メッセージ
受信メッセージ メッセージ
には多くの情報が含まれていることがわかりますが、これは何を意味するのでしょうか? ここでは、SignalR の公式 Github リポジトリをチェックする必要があります。
タイプ=1
ただ翻訳してください
- type: 1 の場合、メッセージの対話に使用されます。ネットワークの安定性を確保するために使用できるだけでなく、
- invocationId: オプション、メッセージを区別するために使用される ID
- target: トリガー文字列、MQTT のトークンに似ています
- 引数: メッセージ ロード。MQTT のペイロードに似ています。
- streamIds: 通信の一意の ID (オプション)
タイプ=6
タイプが 6 の場合、ネットワーク状況を ping するために使用されます。
Typeがその他の場合
Type には 1 ～ 9 の合計 9 つのメソッドがありますが、ここでは説明しません。
要約する
次に、ASP.NET Core のクライアント側とサーバー側の開発について学習します。ネット上にも情報が少ないので、自分で調べるしかありません。