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

[アーティクル]
11/12/2024

注意

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、 .NET および .NET Core サポートポリシーを参照してください。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

このチュートリアルでは、SignalR で Blazor を使ってリアルタイムアプリを構築するための基本的な作業エクスペリエンスを提供します。この記事は、開発者で既に SignalR を良く知っている人や、SignalR アプリでの Blazor の使用方法を理解しようとしている人に役立ちます。 SignalR および Blazor フレームワークの詳細なガイダンスについては、次のリファレンスドキュメントセットと API ドキュメントを参照してください:

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

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

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

前提条件

Visual Studio (最新リリース) と ASP.NET および Web 開発ワークロード

サンプルアプリ

このチュートリアルでは、チュートリアルのサンプルチャットアプリをダウンロードする必要はありません。このサンプルアプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。サンプルリポジトリを開いたら、ターゲットにする予定のバージョンフォルダーを開き、BlazorSignalRApp という名前のサンプルを見つけます。

このチュートリアルでは、チュートリアルのサンプルチャットアプリをダウンロードする必要はありません。このサンプルアプリは、このチュートリアルの手順に従って作成した、最終的な動作するアプリです。サンプルリポジトリを開いたら、ターゲットにする予定のバージョンフォルダーを開き、BlazorWebAssemblySignalRApp という名前のサンプルを見つけます。

サンプルコードを表示またはダウンロードします (ダウンロード方法)。

認証要求の処理に使用する Blazor Web App

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

注意

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

Visual Studio:

[スタート] ウィンドウから [新しいプロジェクトの作成] を選択するか、メニューバーから [ファイル]>[新規]>[プロジェクト] を選択します。
[新しいプロジェクトの作成] ダイアログで、プロジェクトテンプレートのリストから [Blazor Web App] を選択します。 [次へ] ボタンを選択します。
[新しいプロジェクトの構成] ダイアログで、BlazorSignalRApp フィールでプロジェクトに「」という名前を付けます (大文字化は一致させます)。この正確なプロジェクト名を使用することは、名前空間が、チュートリアルからビルドするアプリにコピーするコードと一致するようにするために重要です。
アプリの [場所] が適切であることを確認します。 [ソリューションとプロジェクトを同じディレクトリに配置する] チェックボックスはオンのままにします。 [次へ] ボタンを選択します。
[追加情報] ダイアログで、次の設定を使用します。
- フレームワーク: 最新のフレームワークが選択されていることを確認します。 Visual Studio の [フレームワーク] ドロップダウンリストに使用可能な最新の .NET Framework が含まれていない場合は、Visual Studio を更新して、チュートリアルを再起動します。
- 認証の種類: なし
- HTTPS 用の構成: 選択されている (有効)
- 対話型レンダリングモード: WebAssembly
- 対話機能の場所: ページ/コンポーネントごと
- サンプルページを含める: 選択されている (有効)
- 最上位レベルのステートメントを使用しない: 選択しない
- ［作成］ を選択します

このチュートリアルは VS Code の知識があることを前提としています。 VS Code を初めて使用する場合は、VS Code のドキュメントを参照してください。入門動画ページにリストされている動画は、VS Code の機能の概要を説明するように設計されています。

VS Code で、以下のようにします。

[エクスプローラー] ビューに移動し、[.NET プロジェクトの作成] ボタンを選択します。あるいは、[コマンドパレット] を Ctrl+Shift+P キーで呼び出し、「.NET」と入力して、.NET: New Project コマンドを見つけて選択することもできます。
一覧から Blazor Web App プロジェクトテンプレートを選択します。
[プロジェクトの場所] ダイアログで、プロジェクト用のフォルダーを作成または選択します。
コマンドパレットで、大文字と小文字を区別してプロジェクトに BlazorSignalRApp という名前を付けます。この正確なプロジェクト名を使用することは、名前空間が、チュートリアルからビルドするアプリにコピーするコードと一致するようにするために重要です。
[すべてのテンプレートオプションを表示する] を選択して、プロジェクトのオプション調整します。

[対話型レンダリングモード] を [WebAssembly] に変更します。

上記の変更が行われると、コマンドパレットには次のように表示されます。
- [フレームワーク]: .NET の最新のパブリック非プレビューリリースに設定します。
- 認証の種類: なし
- [HTTPS 用の構成]: オン
- 対話型レンダリングモード: WebAssembly
- 対話機能の場所: ページ/コンポーネントごと
- [サンプルページを含める]: オン
- [最上位レベルのステートメントを使用しない]: オフ
コマンドパレットから [プロジェクトの作成] を選択します。

コマンドシェルで、次のようにします。

cd コマンドを使用して、プロジェクトフォルダーを作成するディレクトリに移動します (たとえば、cd c:/users/Bernie_Kopell/Documents)。
dotnet new コマンドと blazor プロジェクトテンプレートを使用して、新しい Blazor Web App プロジェクトを作成します。コマンドに渡す -o|--output オプションにより、現在のディレクトリの場所で BlazorSignalRApp という名前の新しいフォルダーにプロジェクトが作成されます。クライアント側レンダリング (CSR) を採用する -int|--interactivity で WebAssembly オプションを渡します。 -ai|--all-interactive オプションを False と共に渡して、ページ単位/コンポーネントごとの対話機能の場所を採用します。

重要

大文字と小文字の一致を含め、プロジェクトに BlazorSignalRApp と名前を付けて、チュートリアルに従ってチュートリアルからアプリにコピーするコードと名前空間が一致するようにします。
```
dotnet new blazor -o BlazorSignalRApp -int WebAssembly -ai False
```

この記事のガイダンスでは、SignalR クライアントに WebAssembly コンポーネントを使用します。これは、同じアプリ内の対話型サーバーコンポーネントからハブに接続するために SignalR を使用することは意味がなく、サーバーポートが枯渇する可能性があるためです。

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

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

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

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

検索結果で、Microsoft.AspNetCore.SignalR.Client パッケージの最新リリースを選択します。 [インストール] を選択します。

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

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

ターミナル (メニューバーから [ターミナル]>[新しいターミナル] で、BlazorSignalRApp.Client を使用して cd BlazorSignalRApp.Client プロジェクトに開いたもの) で、次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

以前のバージョンのパッケージを追加するには、--version {VERSION} オプションを指定します。{VERSION} プレースホルダーは、追加するパッケージのバージョンです。

BlazorSignalRApp.Client プロジェクトに開いたコマンドシェルで、次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

SignalR ハブを追加する

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

using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Hubs;

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

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

サーバー Program プロジェクトの BlazorSignalRApp ファイルを開きます。

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

using Microsoft.AspNetCore.ResponseCompression;
using BlazorSignalRApp.Hubs;

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

builder.Services.AddSignalR();

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

処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。アプリをビルドする行 (var app = builder.Build();) の直後に次のコード行を配置します。

app.UseResponseCompression();

アプリを実行する行 (app.Run();) の直後に、ハブのエンドポイントを追加します。

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

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

次の Pages/Chat.razor ファイルを BlazorSignalRApp.Client プロジェクトに追加します。

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

<PageTitle>Chat</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 = [];
    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();
        }
    }
}

NavMenu コンポーネントに、チャットページに到達するためのエントリを追加します。 Components/Layout/NavMenu.razor コンポーネントの <div> ブロックの直後の Weather に、次の <div> ブロックを追加します。

<div class="nav-item px-3">
    <NavLink class="nav-link" href="chat">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Chat
    </NavLink>
</div>

注意

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

アプリを実行する

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

ソリューションエクスプローラーのでサーバー BlazorSignalRApp プロジェクトを選択した状態で、F5 キー 押してデバッグでアプリを実行するか、Ctrl +F5 をしてデバッグなしでアプリを実行します。

サーバー BlazorSignalRApp プロジェクトのルートフォルダーに開いたコマンドシェルで、次のコマンドを実行します。

dotnet watch

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

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

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

ホステッド Blazor WebAssembly エクスペリエンス

アプリを作成する

ホストされている Blazor WebAssembly アプリを作成するには、選択したツールのガイダンスに従ってください。

注意

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

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

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

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

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

［作成］ を選択します

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

コマンドシェルで次のコマンドを実行します。

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

-ho|--hosted オプションにより、ホスト型 Blazor WebAssembly ソリューションが作成されます。 .vscode フォルダー内の VS Code 資産の構成について詳しくは、「Blazor」の Linux オペレーティングシステムのガイダンスをご覧ください。

-o|--output オプションを指定すると、ソリューション用のフォルダーが作成されます。ソリューション用のフォルダーを作成し、そのフォルダーでコマンドシェルが開いている場合は、-o|--output オプションと値を省略してソリューションを作成します。

Visual Studio Code で、アプリのプロジェクトフォルダーを開きます。

ホストされる Blazor WebAssembly アプリが作成されたことを確認します。そのためには、アプリのソリューションフォルダーに Client プロジェクトと Server プロジェクトが存在することを確認します。 2 つのプロジェクトが存在しない場合は、最初からやり直して、ソリューションの作成時に -ho コマンドに --hosted または dotnet new オプションを渡すようにします。

Visual Studio Code デバッグ資産を構成するには、次を参照してください。

ASP.NET Core Blazor 用のツール (プラットフォームに関係なく、Linux / macOSオペレーティングシステムのガイダンスを使用してください)
ASP.NET Core Blazor アプリをデバッグする

コマンドシェルで次のコマンドを実行します。

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

-ho|--hosted オプションにより、ホスト型 Blazor WebAssembly ソリューションが作成されます。

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

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

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

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

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

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

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

ターミナル (メニューバーから [ターミナル]>[新しいターミナル] で、BlazorWebAssemblySignalRApp.Client を使用して cd BlazorWebAssemblySignalRApp.Client プロジェクトに開いたもの) で、次のコマンドを実行します。

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

コマンドシェルでソリューションのフォルダーから次のコマンドを実行します。

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

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

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

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

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 ハブのエンドポイントを追加する

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

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

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

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

アプリをビルドする行の直後に、処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。

app.UseResponseCompression();

コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。行 app.MapControllers(); の直後に次の行を追加します。

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

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

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

using BlazorWebAssemblySignalRApp.Server.Hubs;

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

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

処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。

app.UseResponseCompression();

コントローラーのエンドポイントとクライアント側フォールバックの間に、次の行 endpoints.MapControllers(); の直後にハブのエンドポイントを追加します。

endpoints.MapHub<ChatHub>("/chathub");

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

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

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

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

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

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

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

注意

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

アプリを実行する

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

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

重要

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

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

ブラウザーでアプリを起動できない場合:

.NET コンソールで、ソリューションが "Server" プロジェクトから実行されていることを確認します。
ブラウザーの再読み込みボタンを使ってブラウザーを更新します。

.vscode フォルダー内の VS Code 資産の構成について詳しくは、「Blazor」の Linux オペレーティングシステムのガイダンスをご覧ください。

F5 押してデバッグを使用してアプリを実行するか、Ctrl キー +F5 をしてデバッグなしでアプリを実行します。

重要

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

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

ブラウザーでアプリを起動できない場合:

.NET コンソールで、ソリューションが "Server" プロジェクトから実行されていることを確認します。
ブラウザーの再読み込みボタンを使ってブラウザーを更新します。

コマンドシェルでソリューションのフォルダーから次のコマンドを実行して、ディレクトリを Server プロジェクトフォルダーに変更します。

cd Server

dotnet watch (または dotnet run) コマンドを使用してサーバープロジェクトを実行します。

dotnet watch

重要

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

ブラウザーでアプリを起動できない場合:

.NET コンソールで、ソリューションが "Server" プロジェクトから実行されていることを確認します。
ブラウザーの再読み込みボタンを使ってブラウザーを更新します。

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

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

次の手順

このチュートリアルでは、以下の内容を学習しました。

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

SignalR および Blazor フレームワークの詳細なガイダンスについては、次のリファレンスドキュメントセットを参照してください:

ASP.NET Core の概要SignalR ASP.NET CoreBlazor

次の方法で共有

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

前提条件

サンプルアプリ

認証要求の処理に使用する Blazor Web App

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

SignalR ハブを追加する

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

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

アプリを実行する

ホステッド Blazor WebAssembly エクスペリエンス

アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

次の手順

その他のリソース

その他のリソース

次の方法で共有

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

前提条件

サンプル アプリ

認証要求の処理に使用する Blazor Web App

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

SignalR ハブを追加する

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

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

アプリを実行する

ホステッド Blazor WebAssembly エクスペリエンス

アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

次の手順

その他のリソース

その他のリソース

サンプルアプリ

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

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

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

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