SignalR で ASP.NET Core Blazor を使用する

注意

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

警告

このバージョンの ASP.NET Coreはサポートされなくなりました。詳細については、.NETおよびコアサポートポリシー.NETを参照してください。現在のリリースについては、この記事の .NET 10 バージョンを参照してください。

このチュートリアルでは、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 8 以降の SDK が必要です。

Visual Studio 内で:

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

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

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

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

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

上記の変更が行われると、コマンドパレットには次のように表示されます。
- フレームワーク: 最新のフレームワークが選択されていることを確認します。 Visual Studioの Framework ドロップダウンリストに、使用可能な最新の.NET フレームワーク、update Visual Studioが含まれていない場合は、チュートリアルを再起動します。
- 認証の種類: なし
- HTTPS 用の構成: 選択されている (有効)
- 対話型レンダリングモード: WebAssembly
- 対話機能の場所: ページ/コンポーネントごと
- サンプルページを含める: 選択されている (有効)
- 最上位レベルのステートメントを使用しない: 選択しない
- アプリケーション URL で .dev.localhost TLD を使用する: 選択されていません
コマンドパレットから [プロジェクトの作成] を選択します。

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

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 クライアントライブラリを追加する

Solution Explorer で、BlazorSignalRApp.Client プロジェクトを右クリックし、 Manage NuGet Packages を選択します。

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

Browseを選択した状態で、検索ボックスに「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.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 環境でHot Reloadを使用する場合は、応答圧縮ミドルウェアを無効にします。詳細については、ASP.NET Core BlazorSignalR ガイダンスを参照してください。

アプリを実行する

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

サーバー BlazorSignalRApp プロジェクトが Solution Explorer で選択されている状態で、F5 を押してアプリをデバッグ付きで実行するか、Ctrl+F5 を押してデバッグなしで実行します。

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

dotnet watch

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

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

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

ホストされる Blazor WebAssembly のエクスペリエンス

アプリを作成する

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

注意

Visual Studio 2022 以降と .NET 以降の 6 SDK が必要です。

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

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

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

追加情報 ダイアログで、ASP.NET Core Hosted チェックボックスをオンにします。

［作成］ を選択します

ホストされている Blazor WebAssembly アプリが作成されたことを確認します:Solution Explorer で、Client プロジェクトと Server プロジェクトが存在することを確認します。 2 つのプロジェクトが存在しない場合は、Create を選択する前に、ASP.NET Core Hosted チェックボックスの選択をやり直して確認します。

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

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

-ho|--hosted オプションにより、ホスト型 Blazor WebAssembly ソリューションが作成されます。フォルダーで VS Code アセットを構成する方法については、Tooling for ASP.NET Core の 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 オペレーティングシステムのガイダンスを使用)
Debug ASP.NET Core Blazor apps

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

dotnet new blazorwasm -ho -o BlazorWebAssemblySignalRApp

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

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

Solution Explorer で、BlazorWebAssemblySignalRApp.Client プロジェクトを右クリックし、 Manage NuGet Packages を選択します。

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

Browseを選択した状態で、検索ボックスに「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();
    }
}

注意

アプリを実行する

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

Solution Explorer で、BlazorWebAssemblySignalRApp.Server プロジェクトを選択します。 F5 押してデバッグを使用してアプリを実行するか、Ctrl キー + をしてデバッグなしでアプリを実行します。

重要

ホストされている 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

その他のリソース

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-04-16

SignalR で ASP.NET Core Blazor を使用する

前提条件

サンプル アプリ

Blazor Web Appを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

ホストされる Blazor WebAssembly のエクスペリエンス

アプリを作成する

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

SignalR ハブを追加する

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

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

アプリを実行する

次の手順

その他のリソース

フィードバック

その他のリソース

サンプルアプリ

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

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

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

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