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

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

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

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

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

必須コンポーネント

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

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

注意

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

注意

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

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

  2. [Blazor アプリ] を選択し、 [次へ] を選択します

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

  4. Blazor WebAssembly アプリ テンプレートを選択します。

  5. [詳細設定] で、 [ASP.NET Core hosted](ASP.NET Core でホストされる) チェックボックスをオンにします。

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

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);
        }
    }
}
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;
    
  1. SignalR および応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddRazorPages();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  2. 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");
        });
    }
    
  1. SignalR および応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  2. 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 ファイルを開きます。
  1. マークアップを次のコードで置き換えます。

    @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. マークアップを次のコードで置き換えます。

    @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 キーを押して、デバッグなしでアプリを実行します。

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

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

    交換されたメッセージを示す、2 つのブラウザー ウィンドウで開かれた SignalR Blazor サンプル アプリ。

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

Blazor Server アプリを作成する

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

注意

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

注意

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

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

  2. [Blazor アプリ] を選択し、 [次へ] を選択します

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

  4. Blazor Server アプリ テンプレートを選択します。

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

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 のパッケージ参照が必要です。 基になる問題は、.NET 5 の今後のパッチ リリースで解決される予定です。 詳細については、「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);
        }
    }
}
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;
    
  1. 応答の圧縮ミドルウェア サービスを 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" });
        });
    }
    
  2. 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");
        });
    }
    
  1. 応答の圧縮ミドルウェア サービスを 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" });
        });
    }
    
  2. 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 ファイルを開きます。
  1. マークアップを次のコードで置き換えます。

    @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. マークアップを次のコードで置き換えます。

    @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()
        {
            await hubConnection?.DisposeAsync();
        }
    }
    

アプリを実行する

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

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

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

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

    交換されたメッセージを示す、2 つのブラウザー ウィンドウで開かれた SignalR Blazor サンプル アプリ。

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

次の手順

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

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

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

その他の技術情報