ASP.NET Core SignalR の概要

前提条件は何ですか?

環境: ASP.NET および Web 開発ワークロードを備えた Visual Studio 2022

Web アプリケーションプロジェクトを作成する

[新しいプロジェクトの構成] ダイアログボックスで、プロジェクト名を入力します SignalRChat。

「次のページ」を選択します。

[追加情報] ダイアログボックスで、[.NET 7.0 (標準期間サポート)] を選択し、[作成] を選択します。

SignalR クライアントライブラリを追加する

SignalR サーバーライブラリは、ASP.NET Core 共有フレームワークに含まれています。JavaScript クライアントライブラリはプロジェクトに自動的には含まれません。このチュートリアルでは、ライブラリマネージャー (LibMan) を使用して unpkg からクライアントライブラリを取得します。は、 npm 上のすべてのコンテンツunpkg を対象とした高速グローバルコンテンツ配信ネットワークです。

ソリューションエクスプローラーで、プロジェクトを右クリックし、[クライアントライブラリの追加] を選択します。

[クライアントライブラリの追加] ダイアログボックスで:

「プロバイダー」で「unpkg」を選択します
[ライブラリ] に「」と入力します @microsoft/signalr@latest。
[特定のファイルを選択] を選択し、dist/browser フォルダーを展開して、と signalr.js を選択しますsignalr.min.js。
「宛先の場所」をに設定します wwwroot/js/signalr/。
「インストール」を選択します。

LibMan は wwwroot/js/signalr フォルダーを作成し、選択したファイルをそのフォルダーにコピーします。

SignaIR センターの作成

ハブは、クライアントとサーバーの通信を処理するための高レベルのパイプとして機能するクラスです。

SignalRChat プロジェクトフォルダーに Hubs フォルダーを作成します。

Hubs フォルダー内に、ChatHub 次のコードを使用してクラスを作成します。

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

ChatHubSignalR Hub から継承されたクラス。 Hub クラスは接続、グループ、メッセージを管理します。

接続されているクライアントから呼び出して、すべてのクライアントにメッセージを送信できます SendMessage。このメソッドを呼び出す JavaScript クライアントコードは、このチュートリアルの後半で示されます。SignalR コードは非同期であり、最大限のスケーラビリティを提供します。

SignalR の構成

SignalR サーバーは、SignalR 要求を SignalR に渡すように構成する必要があります。次の強調表示されたコードを Program.cs ファイルに追加します。

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

上記で強調表示されているコードは、SignalR を ASP.NET Core の依存関係挿入およびルーティングシステムに追加します。

SignR クライアントコードを追加する

Pages/Index.cshtml の内容を次のコードに置き換えます。

@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>

前のタグ:

テキストボックスと送信ボタンを作成します。
id="messagesList" SignalR ハブから受信したメッセージを表示するリストを作成するために使用します。
SignalR へのスクリプト参照を含め、次の手順でアプリケーションコードを作成します chat.js 。

wwwroot/js フォルダー内に、chat.js 次のコードを使用してファイルを作成します。

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

以前の JavaScript:

接続を作成して開始します。
ハブにメッセージを送信するハンドラーを「送信」ボタンに追加します。
ハブからメッセージを受信してリストに追加する接続オブジェクトにハンドラーを追加します。

効果を達成する

ヒント：

アプリが動作しない場合は、ブラウザーの開発者ツール (F12) を開き、コンソールに移動します。HTML および JavaScript コードに関連する可能性のあるエラーを見つけます。たとえば、 signalr.js 指定されたフォルダーとは異なるフォルダーに配置された場合、ファイルへの参照は機能せず、コンソールで 404 エラーが発生します。

Chrome でエラーが発生した場合は ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY 、次のコマンドを実行して開発証明書を更新します。

.NET CLI

dotnet dev-certs https --clean
dotnet dev-certs https --trust

前提条件は何ですか?

Web アプリケーション プロジェクトを作成する

SignalR クライアント ライブラリを追加する