0Pricing
C# Academy · レッスン

SignalR Hubと接続

SignalR Hubを作成してASP.NET Coreにマッピングし、JavaScriptおよび.NETクライアントからWebSocket接続を確立します。

「SignalR Hubと接続」はCoddyKit上の無料C# Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはC# Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 C# Academyコースには全4レッスンが含まれています。

SignalR とは

SignalR は、サーバーとクライアント間のリアルタイム双方向通信を実現する ASP.NET Core ライブラリです。両側がサポートしているものに基づいて、WebSockets、Server-Sent Events、Long Polling の中から最適なトランスポートを自動的に選択します。

SignalR をセットアップする

サービスに SignalR を追加し、ハブのエンドポイントをマッピングします。ハブは、クライアント接続とメソッド呼び出しを処理するクラスです。

builder.Services.AddSignalR();

var app = builder.Build();

app.UseCors("AllowAll");
app.MapHub<ChatHub>("/hubs/chat");

app.Run();

ハブを作成する

Hub を継承します。ハブのメソッドはクライアントから呼び出されます。Context プロパティから接続情報を取得でき、Clients を使用してメッセージを送り返せます。

using Microsoft.AspNetCore.SignalR;

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

    public override async Task OnConnectedAsync()
    {
        await Clients.Caller.SendAsync("Welcome",
            $"Connected as {Context.ConnectionId}");
        await base.OnConnectedAsync();
    }
}

JavaScript クライアント

公式の SignalR JavaScript クライアントは、接続を構築し、イベントハンドラーを登録して、接続を開始します。ハブで定義したメソッドは JavaScript から呼び出せます。

// npm install @microsoft/signalr
import * as signalR from "@microsoft/signalr";

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hubs/chat")
    .withAutomaticReconnect()
    .build();

connection.on("ReceiveMessage", (user, message) => {
    console.log(`${user}: ${message}`);
});

await connection.start();
await connection.invoke("SendMessage", "Alice", "Hello!");

.NET SignalR クライアント

.NET クライアントも同じように動作し、サービス間のリアルタイム通信やデスクトップアプリ、モバイルアプリに便利です。

// dotnet add package Microsoft.AspNetCore.SignalR.Client

var connection = new HubConnectionBuilder()
    .WithUrl("https://myapp.com/hubs/chat")
    .WithAutomaticReconnect()
    .Build();

connection.On<string, string>("ReceiveMessage", (user, msg) =>
    Console.WriteLine($"{user}: {msg}"));

await connection.StartAsync();
await connection.InvokeAsync("SendMessage", "Bot", "Connected!");

特定のクライアントに送信する

Clients プロパティには、特定の接続、呼び出し元、または指定したクライアントを除く接続中のすべてのクライアントを対象にするメソッドがあります。

// To the caller only
await Clients.Caller.SendAsync("YouSaid", message);

// To a specific connection
await Clients.Client(connectionId).SendAsync("PrivateMsg", msg);

// To all except caller
await Clients.Others.SendAsync("ReceiveMessage", user, message);

// To multiple specific connections
await Clients.Clients(new[] { id1, id2 })
             .SendAsync("DirectMsg", msg);

ハブコンテキスト: ハブの外部から送信する

IHubContext<T> をサービスやバックグラウンドワーカーに注入すると、ハブクラスの外部からメッセージを送信できます。サーバーから開始するプッシュ通知には不可欠です。

public class NotificationService
{
    private readonly IHubContext<ChatHub> _hub;

    public NotificationService(IHubContext<ChatHub> hub) => _hub = hub;

    public async Task BroadcastAlertAsync(string alert)
    {
        // Send to all clients from a background service
        await _hub.Clients.All.SendAsync("SystemAlert", alert);
    }
}

接続ライフサイクルイベント

OnConnectedAsync と OnDisconnectedAsync をオーバーライドして、接続の追跡、状態の維持、リソースのクリーンアップを行います。

public override async Task OnConnectedAsync()
{
    _connections.TryAdd(Context.ConnectionId, GetUserName());
    await Clients.All.SendAsync("UserJoined", GetUserName());
    await base.OnConnectedAsync();
}

public override async Task OnDisconnectedAsync(Exception? ex)
{
    _connections.TryRemove(Context.ConnectionId, out var user);
    await Clients.All.SendAsync("UserLeft", user);
    await base.OnDisconnectedAsync(ex);
}

private string GetUserName() =>
    Context.User?.Identity?.Name ?? Context.ConnectionId;

自動再接続

クライアントで自動再接続を有効にすると、一時的な切断を適切に処理できます。再試行間隔はカスタマイズできます。

// JavaScript client
const conn = new signalR.HubConnectionBuilder()
    .withUrl("/hubs/chat")
    .withAutomaticReconnect([0, 2000, 5000, 10000, 30000]) // retry delays in ms
    .build();

conn.onreconnecting(err => console.warn("Reconnecting...", err));
conn.onreconnected(id  => console.log("Reconnected:",    id));
conn.onclose(err       => console.error("Disconnected:", err));

SignalR で認証する

SignalR は ASP.NET Core の認証ミドルウェアに対応しています。ハブクラスに [Authorize] を追加するか、クエリ文字列のトークンをサポートする JWT ハンドラーを使用します（WebSocket 認証に必要です）。

[Authorize]
public class PrivateHub : Hub
{
    public Task SendMessage(string msg)
    {
        var user = Context.User!.Identity!.Name;
        return Clients.All.SendAsync("Msg", user, msg);
    }
}

// JWT via query string (WebSocket requirement):
builder.Services.AddAuthentication().AddJwtBearer(opt =>
{
    opt.Events = new JwtBearerEvents
    {
        OnMessageReceived = ctx =>
        {
            var token = ctx.Request.Query["access_token"];
            if (!string.IsNullOrEmpty(token))
                ctx.Token = token;
            return Task.CompletedTask;
        }
    };
});

確認問題

ハブクラスの外部にあるバックグラウンドサービスから SignalR メッセージを送信するには、どうすればよいですか？

まとめ: SignalR のハブと接続

重要なポイント:

  • SignalR は最適なトランスポート（WebSockets、SSE、Long Polling）を自動的に選択する
  • ハブのメソッドはクライアントから呼び出せる。Clients.* で特定の受信者を対象にする
  • IHubContext<T> を注入して、ハブの外部からメッセージをプッシュする
  • OnConnectedAsync/OnDisconnectedAsync をオーバーライドしてライフサイクルを管理する
  • 回復性の高いクライアント接続には withAutomaticReconnect() を使用する
  • WebSocket 接続には、クエリ文字列を介した JWT 認証が必要

よくある質問

「SignalR Hubと接続」レッスンは無料ですか？

はい。「SignalR Hubと接続」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、C# Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 C# Academyコースには全4レッスンが含まれています。

「SignalR Hubと接続」で何を学びますか？

SignalR Hubを作成してASP.NET Coreにマッピングし、JavaScriptおよび.NETクライアントからWebSocket接続を確立します。 ブラウザで直接実行するハンズオンコードでC# Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

C# Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのC# Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「SignalR Hubと接続」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このC# Academyレッスンでコードを書いて実行できますか？

はい。すべてのC# Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. SignalR Hubと接続
  2. グループ、ユーザーと接続管理
  3. 型付きHub
  4. Redis Backplaneによるスケーリング
← C# Academyに戻る