ASP.NET Core SignalR メモ書き

参考

（公式）ASP.NET Core SignalR の概要

JavaScript による SignalR

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

• SignalR サーバー ライブラリは、ASP.NET Core 共有フレームワークに含まれています。
• JavaScript クライアント ライブラリはプロジェクトに自動的に含まれません。
• [追加]>[クライアント側のライブラリ] [プロバイダー] で [unpkg] を選択します。 [ライブラリ] に、「@microsoft/signalr@latest」と入力します。 Choose specific files を選択して dist/browser フォルダーを展開し、signalr.js と signalr.min.js を選択します。 [ターゲットの場所] を wwwroot/js/signalr/ に設定します。 [インストール] を選択します。

SignalR ハブを作成する

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

SignalR を構成する

★★★ が SignalR を使用するに必要な箇所。

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 クライアント コードを追加する

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

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

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