ASP.NET Core SignalR を Blazor と共に使用する

  • [アーティクル]

このチュートリアルでは、Blazor と共に SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。

具体的には、次の方法を学習します。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

このチュートリアルの最後には、動作するチャット アプリが完成します。

前提条件

サンプル アプリ

このチュートリアルでは、チュートリアルのサンプル チャット アプリをダウンロードする必要はありません。 このサンプル アプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。

サンプル コードを表示またはダウンロードする

ホストされる Blazor WebAssembly アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 2022 以降と .NET Core SDK 6.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. Blazor WebAssembly アプリ テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorWebAssemblySignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [追加情報] ダイアログで、[ASP.NET Core Hosted] (ホストされている ASP.NET Core) チェックボックスをオンにします。

  5. [作成] を選択します。

  6. ホストされる Blazor WebAssembly アプリが作成されたことを確認します。そのためには、ソリューション エクスプローラーで、Client プロジェクトと Server プロジェクトが存在することを確認します。 2 つのプロジェクトが存在しない場合は、最初からやり直して、[作成] を選択する前に、[ASP.NET Core hosted](ホストされている ASP.NET Core) チェック ボックスをオンにしておきます。

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

  1. ソリューション エクスプローラーで、BlazorWebAssemblySignalRApp.Client プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

BlazorWebAssemblySignalRApp.Server プロジェクトで、Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. BlazorWebAssemblySignalRApp.Server プロジェクトで、Program.cs ファイルを開きます。

  2. ファイルの先頭に ChatHub クラスの名前空間を追加します。

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. SignalR および応答の圧縮ミドルウェア サービスを Program.cs に追加します。

    builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.csの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。
    app.UseResponseCompression();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();


app.MapRazorPages();
app.MapControllers();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToFile("index.html");

app.Run();

チャット用の Razor コンポーネント コードを追加する

  1. BlazorWebAssemblySignalRApp.Client プロジェクトで、Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
            {
                await hubConnection.SendAsync("SendMessage", userInput, messageInput);
            }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

注意

ホット リロードを使用する場合は、Development 環境の応答圧縮ミドルウェアを無効にします。 詳しくは、ASP.NET Core BlazorSignalR ガイダンスを参照してください。

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. ソリューション エクスプローラーで BlazorWebAssemblySignalRApp.Server プロジェクトを選択します。 F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

    重要

    ホスト型 Blazor WebAssembly アプリを実行する場合は、ソリューションのServer プロジェクトから、そのアプリを実行します。

    デバッグ セッション用のブラウザーとしては、Google Chrome または Microsoft Edge を選択する必要があります。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

Blazor Server アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 2022 以降と .NET Core SDK 6.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. [Blazor Server アプリ] テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorServerSignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorServerSignalRApp プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. Program.cs ファイルを開きます。

  2. Microsoft.AspNetCore.ResponseCompression の名前空間と ChatHub クラスをファイルの先頭に追加します。

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. 応答の圧縮ミドルウェア サービスを Program.cs に追加します。

    builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.csの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • Blazor ハブとクライアント側フォールバックをマッピングするためのエンドポイントの間に、ハブのエンドポイントを追加します。
    app.UseResponseCompression();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");

app.Run();

チャット用の Razor コンポーネント コードを追加する

  1. Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
            {
                await hubConnection.SendAsync("SendMessage", userInput, messageInput);
            }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

注意

ホット リロードを使用する場合は、Development 環境の応答圧縮ミドルウェアを無効にします。 詳しくは、ASP.NET Core BlazorSignalR ガイダンスを参照してください。

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

次の手順

このチュートリアルでは、次の作業を行う方法を学びました。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

Blazor アプリの構築について詳しくは、Blazor のドキュメントを参照してください。

Identity Server、WebSockets、Server-Sent Events による ASP.NET Core Blazorベアラー トークン認証

その他のリソース

具体的には、次の方法を学習します。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

このチュートリアルの最後には、動作するチャット アプリが完成します。

前提条件

サンプル アプリ

このチュートリアルでは、チュートリアルのサンプル チャット アプリをダウンロードする必要はありません。 このサンプル アプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。

サンプル コードを表示またはダウンロードする

ホストされる Blazor WebAssembly アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 2022 以降と .NET Core SDK 6.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. Blazor WebAssembly アプリ テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorWebAssemblySignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [追加情報] ダイアログで、[ASP.NET Core Hosted] (ホストされている ASP.NET Core) チェックボックスをオンにします。

  5. [作成] を選択します。

  6. ホストされる Blazor WebAssembly アプリが作成されたことを確認します。そのためには、ソリューション エクスプローラーで、Client プロジェクトと Server プロジェクトが存在することを確認します。 2 つのプロジェクトが存在しない場合は、最初からやり直して、[作成] を選択する前に、[ASP.NET Core hosted](ホストされている ASP.NET Core) チェック ボックスをオンにしておきます。

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

  1. ソリューション エクスプローラーで、BlazorWebAssemblySignalRApp.Client プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

BlazorWebAssemblySignalRApp.Server プロジェクトで、Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. BlazorWebAssemblySignalRApp.Server プロジェクトで、Program.cs ファイルを開きます。

  2. ファイルの先頭に ChatHub クラスの名前空間を追加します。

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. SignalR および応答の圧縮ミドルウェア サービスを Program.cs に追加します。

    builder.Services.AddSignalR();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.csの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。
    app.UseResponseCompression();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.MapRazorPages();
app.MapControllers();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToFile("index.html");

app.Run();

チャット用の Razor コンポーネント コードを追加する

  1. BlazorWebAssemblySignalRApp.Client プロジェクトで、Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
            {
                await hubConnection.SendAsync("SendMessage", userInput, messageInput);
            }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

注意

ホット リロードを使用する場合は、Development 環境の応答圧縮ミドルウェアを無効にします。 詳しくは、ASP.NET Core BlazorSignalR ガイダンスを参照してください。

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. ソリューション エクスプローラーで BlazorWebAssemblySignalRApp.Server プロジェクトを選択します。 F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

    重要

    ホスト型 Blazor WebAssembly アプリを実行する場合は、ソリューションのServer プロジェクトから、そのアプリを実行します。

    デバッグ セッション用のブラウザーとしては、Google Chrome または Microsoft Edge を選択する必要があります。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

Blazor Server アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 2022 以降と .NET Core SDK 6.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. [Blazor Server アプリ] テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorServerSignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorServerSignalRApp プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. Program.cs ファイルを開きます。

  2. Microsoft.AspNetCore.ResponseCompression の名前空間と ChatHub クラスをファイルの先頭に追加します。

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. 応答の圧縮ミドルウェア サービスを Program.cs に追加します。

    builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Program.csの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • Blazor ハブとクライアント側フォールバックをマッピングするためのエンドポイントの間に、ハブのエンドポイントを追加します。
    app.UseResponseCompression();

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.MapBlazorHub();
app.MapHub<ChatHub>("/chathub");
app.MapFallbackToPage("/_Host");

app.Run();

チャット用の Razor コンポーネント コードを追加する

  1. Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

<PageTitle>Index</PageTitle>

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection? hubConnection;
    private List<string> messages = new List<string>();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    private async Task Send()
    {
        if (hubConnection is not null)
            {
                await hubConnection.SendAsync("SendMessage", userInput, messageInput);
            }
    }

    public bool IsConnected =>
        hubConnection?.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

注意

ホット リロードを使用する場合は、Development 環境の応答圧縮ミドルウェアを無効にします。 詳しくは、ASP.NET Core BlazorSignalR ガイダンスを参照してください。

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

次の手順

このチュートリアルでは、次の作業を行う方法を学びました。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

Blazor アプリの構築について詳しくは、Blazor のドキュメントを参照してください。

Identity Server、WebSockets、Server-Sent Events による ASP.NET Core Blazorベアラー トークン認証

その他のリソース

具体的には、次の方法を学習します。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

このチュートリアルの最後には、動作するチャット アプリが完成します。

前提条件

サンプル アプリ

このチュートリアルでは、チュートリアルのサンプル チャット アプリをダウンロードする必要はありません。 このサンプル アプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。

サンプル コードを表示またはダウンロードする

ホストされる Blazor WebAssembly アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 16.10 以降と .NET Core SDK 5.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. Blazor WebAssembly アプリ テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorWebAssemblySignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [追加情報] ダイアログで、[ASP.NET Core Hosted] (ホストされている ASP.NET Core) チェックボックスをオンにします。

  5. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorWebAssemblySignalRApp.Client プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

BlazorWebAssemblySignalRApp.Server プロジェクトで、Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. BlazorWebAssemblySignalRApp.Server プロジェクトで、Startup.cs ファイルを開きます。

  2. ファイルの先頭に ChatHub クラスの名前空間を追加します。

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. SignalR および応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    services.AddSignalR();
services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Startup.Configureの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

チャット用の Razor コンポーネント コードを追加する

  1. BlazorWebAssemblySignalRApp.Client プロジェクトで、Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. ソリューション エクスプローラーで BlazorWebAssemblySignalRApp.Server プロジェクトを選択します。 F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

    重要

    ホスト型 Blazor WebAssembly アプリを実行する場合は、ソリューションのServer プロジェクトから、そのアプリを実行します。

    デバッグ セッション用のブラウザーとしては、Google Chrome または Microsoft Edge を選択する必要があります。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

Blazor Server アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 16.10 以降と .NET Core SDK 5.0.0 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. [Blazor Server アプリ] テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorServerSignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorServerSignalRApp プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. Startup.cs ファイルを開きます。

  2. Microsoft.AspNetCore.ResponseCompression の名前空間と ChatHub クラスをファイルの先頭に追加します。

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. 応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configureの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • Blazor ハブとクライアント側フォールバックをマッピングするためのエンドポイントの間に、ハブのエンドポイントを追加します。
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

チャット用の Razor コンポーネント コードを追加する

  1. Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        if (hubConnection is not null)
        {
            await hubConnection.DisposeAsync();
        }
    }
}

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

次の手順

このチュートリアルでは、次の作業を行う方法を学びました。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

Blazor アプリの構築について詳しくは、Blazor のドキュメントを参照してください。

Identity Server、WebSockets、Server-Sent Events による ASP.NET Core Blazorベアラー トークン認証

その他のリソース

具体的には、次の方法を学習します。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

このチュートリアルの最後には、動作するチャット アプリが完成します。

前提条件

サンプル アプリ

このチュートリアルでは、チュートリアルのサンプル チャット アプリをダウンロードする必要はありません。 このサンプル アプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。

サンプル コードを表示またはダウンロードする

ホストされる Blazor WebAssembly アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 16.6 以降と .NET Core SDK 3.1.300 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. Blazor WebAssembly アプリ テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorWebAssemblySignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [追加情報] ダイアログで、[ASP.NET Core Hosted] (ホストされている ASP.NET Core) チェックボックスをオンにします。

  5. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorWebAssemblySignalRApp.Client プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

BlazorWebAssemblySignalRApp.Server プロジェクトで、Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. BlazorWebAssemblySignalRApp.Server プロジェクトで、Startup.cs ファイルを開きます。

  2. ファイルの先頭に ChatHub クラスの名前空間を追加します。

    using BlazorWebAssemblySignalRApp.Server.Hubs;

  3. SignalR および応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    services.AddSignalR();
services.AddResponseCompression(opts =>
{
    opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
        new[] { "application/octet-stream" });
});

  4. Startup.Configureの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseWebAssemblyDebugging();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToFile("index.html");
    });
}

チャット用の Razor コンポーネント コードを追加する

  1. BlazorWebAssemblySignalRApp.Client プロジェクトで、Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = hubConnection?.DisposeAsync();
    }
}

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. ソリューション エクスプローラーで BlazorWebAssemblySignalRApp.Server プロジェクトを選択します。 F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

    重要

    ホスト型 Blazor WebAssembly アプリを実行する場合は、ソリューションのServer プロジェクトから、そのアプリを実行します。

    デバッグ セッション用のブラウザーとしては、Google Chrome または Microsoft Edge を選択する必要があります。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

Blazor Server アプリを作成する

使用するツールに向けたガイダンスに従ってください。

Note

Visual Studio 16.6 以降と .NET Core SDK 3.1.300 以降が必要です。

  1. 新しいプロジェクトを作成します。

  2. [Blazor Server アプリ] テンプレートを選択します。 [次へ] を選択します。

  3. [プロジェクト名] フィールドに「BlazorServerSignalRApp」と入力します。 [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。 [次へ] を選択します。

  4. [作成] を選択します。

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

  1. ソリューション エクスプローラーで、BlazorServerSignalRApp プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「Microsoft.AspNetCore.SignalR.Client」と入力します。

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択します。 アプリの共有フレームワークに合わせてバージョンを設定します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

System.Text.Encodings.Web パッケージを追加する

"このセクションは、ASP.NET Core バージョン 3.x のアプリにのみ適用されます。 "

ASP.NET Core 3.x アプリで System.Text.Json 5.x を使用する場合、パッケージの解決に問題があるため、プロジェクトには System.Text.Encodings.Web のパッケージ参照が必要です。 根本的な問題はパッチ リリースで解決され、ASP.NET Core 5.0 にバックポートされました。 詳細については、「System.Text.Json defines netcoreapp3.0 with no dependencies (dotnet/runtime #45560)」を参照してください。

System.Text.Encodings.Web をプロジェクトに追加するには、使用するツールのガイダンスに従ってください。

  1. ソリューション エクスプローラーで、BlazorServerSignalRApp プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース] が nuget.org に設定されていることを確認します。

  3. [参照] が選択されている状態で、検索ボックスに「System.Text.Encodings.Web」と入力します。

  4. 検索結果から System.Text.Encodings.Web パッケージを選択します。 使用している共有フレームワークに一致するパッケージのバージョンを選択します。 [インストール] を選択します。

  5. [変更のプレビュー] ダイアログ ボックスが表示されたら、 [OK] を選択します。

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。

SignalR ハブを追加する

Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加する

  1. Startup.cs ファイルを開きます。

  2. Microsoft.AspNetCore.ResponseCompression の名前空間と ChatHub クラスをファイルの先頭に追加します。

    using Microsoft.AspNetCore.ResponseCompression;
using BlazorServerSignalRApp.Server.Hubs;

  3. 応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();
    services.AddSingleton<WeatherForecastService>();
    services.AddResponseCompression(opts =>
    {
        opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
            new[] { "application/octet-stream" });
    });
}

  4. Startup.Configureの場合:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。
    • Blazor ハブとクライアント側フォールバックをマッピングするためのエンドポイントの間に、ハブのエンドポイントを追加します。
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

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

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapHub<ChatHub>("/chathub");
        endpoints.MapFallbackToPage("/_Host");
    });
}

チャット用の Razor コンポーネント コードを追加する

  1. Pages/Index.razor ファイルを開きます。

  2. マークアップを次のコードで置き換えます。

    @page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            InvokeAsync(StateHasChanged);
        });

        await hubConnection.StartAsync();
    }

    async Task Send() =>
        await hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public async ValueTask DisposeAsync()
    {
        await hubConnection?.DisposeAsync();
    }
}

アプリを実行する

お使いのツール用のガイダンスに従ってください。

  1. F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キー (Windows) または ⌘+F5 (macOS) キーを押して、デバッグなしでアプリを実行します。

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。 両方のページに、その名前とメッセージが瞬時に表示されます。

    交換されたメッセージが表示されている、2 つのブラウザー ウィンドウで開かれた SignalRBlazor サンプル アプリ。

    引用: Star Trek VI: The Undiscovered Country ©1991 Paramount

次の手順

このチュートリアルでは、次の作業を行う方法を学びました。

  • Blazor プロジェクトを作成する
  • SignalR クライアント ライブラリを追加する
  • SignalR ハブを追加する
  • SignalR サービスと SignalR ハブのエンドポイントを追加する
  • チャット用の Razor コンポーネント コードを追加する

Blazor アプリの構築について詳しくは、Blazor のドキュメントを参照してください。

Identity Server、WebSockets、Server-Sent Events による ASP.NET Core Blazorベアラー トークン認証

その他のリソース