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

[アーティクル]
02/09/2024

注意

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

重要

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

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

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

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

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

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

前提条件

ASP.NET および Web 開発ワークロードを含む Visual Studio 2022 以降

サンプルアプリ

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

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

Blazor Web アプリを作成する

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

Note

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

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

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

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

フレームワークが .NET 8.0 以降であることを確認します。 [作成] を選択します。

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

dotnet new blazor -o BlazorSignalRApp

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

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

Visual Studio Code でプロジェクトのビルドとデバッグを行うための資産を追加するように求められたら、[はい] を選択します。

Visual Studio Code でビルドとデバッグの資産 (launch.json と tasks.json ファイルを含む .vscode フォルダー) を追加するように自動的に求められない場合は、[表示]>[コマンドパレット] の順に選び、検索ボックスに「.NET」と入力してください。コマンドの一覧から、.NET: Generate Assets for Build and Debug コマンドを選択してください。

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

dotnet new blazor -o BlazorSignalRApp

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

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

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

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

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

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

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

統合ターミナル (ツールバーの [表示]>[ターミナル] ) で、次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

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

コマンドシェルでプロジェクトのフォルダーから次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

SignalR ハブを追加する

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 ファイルを開きます。

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

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

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

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

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

app.UseResponseCompression();

次のように、Razor コンポーネント (app.MapRazorComponents<T>()) をマップする行の直後に、ハブのエンドポイントを追加します。

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

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

Components/Pages/Home.razor ファイルを開きます。

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

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

<PageTitle>Home</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 ガイダンスを参照してください。

アプリを実行する

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

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

コマンドシェルでプロジェクトのフォルダーから次のコマンドを実行します。

dotnet run

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

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

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

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

アプリを作成する

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

Note

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 資産の構成について詳しくは、「ASP.NET Core Blazor 用のツール」の Linux オペレーティングシステムのガイダンスをご覧ください。

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

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

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

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] を選択します。

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

統合ターミナル (ツールバーの [表示]>[ターミナル] ) で、次のコマンドを実行します。

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

注意

アプリを実行する

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

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

重要

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

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

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

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

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

重要

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

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

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

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

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

cd Server
dotnet run

重要

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

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

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

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

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

Blazor Server エクスペリエンス

アプリを作成する

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

Note

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

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

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

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

[作成] を選択します。

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

dotnet new blazorserver -o BlazorServerSignalRApp

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

アプリをビルドおよびデバッグするためのアセットを追加するダイアログが表示されたら、 [はい] を選択します。 Visual Studio Code では、生成された launch.json ファイルと tasks.json ファイルが含まれる .vscode フォルダーが自動的に追加されます。ソリューションにファイルを手動で追加する方法など、.vscode フォルダー内の VS Code 資産の構成の詳細については、「ASP.NET Core Blazor 用のツール」の Linux オペレーティングシステムのガイダンスを参照してください。

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

dotnet new blazorserver -o BlazorServerSignalRApp

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

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

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

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

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

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

統合ターミナル (ツールバーの [表示]>[ターミナル] ) で、次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

コマンドシェルでプロジェクトのフォルダーから次のコマンドを実行します。

dotnet add package Microsoft.AspNetCore.SignalR.Client

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 をプロジェクトに追加するには、使用するツールのガイダンスに従ってください。

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

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

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

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

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

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

統合ターミナル (ツールバーの [表示]>[ターミナル] ) で、次のコマンドを実行します。

dotnet add package System.Text.Encodings.Web

コマンドシェルでプロジェクトのフォルダーから次のコマンドを実行します。

dotnet add package System.Text.Encodings.Web

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

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

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

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

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

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

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

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

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

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

app.UseResponseCompression();

Blazor ハブをマッピングするためのエンドポイントとクライアント側フォールバックの間に、行 app.MapBlazorHub(); の直後にハブのエンドポイントを追加します。

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

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

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

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

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

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

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

app.UseResponseCompression();

Blazor ハブをマッピングするためのエンドポイントとクライアント側フォールバックの間に、行 endpoints.MapBlazorHub(); の直後にハブのエンドポイントを追加します。

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

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

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

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

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

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

注意

アプリを実行する

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

コマンドシェルでプロジェクトのフォルダーから次のコマンドを実行します。

dotnet run

アドレスバーから 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 アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

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

アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

Blazor Server エクスペリエンス

アプリを作成する

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

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

SignalR ハブを追加する

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

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

アプリを実行する

次の手順

その他のリソース

フィードバック

その他のリソース

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

前提条件

サンプル アプリ

Blazor Web アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

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

アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

Blazor Server エクスペリエンス

アプリを作成する

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

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

SignalR ハブを追加する

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

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

アプリを実行する

次の手順

その他のリソース

フィードバック

その他のリソース

サンプルアプリ

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

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

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

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

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

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