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

作成者: Daniel RothLuke LathamBy Daniel Roth and Luke Latham

このチュートリアルでは、Blazor WebAssembly と共に SignalR を使用してリアルタイム アプリをビルドするための基礎について説明します。This tutorial teaches the basics of building a real-time app using SignalR with Blazor WebAssembly. 以下の方法について説明します。You learn how to:

  • Blazor WebAssembly でホストされるアプリ プロジェクトを作成するCreate a Blazor WebAssembly Hosted app project
  • SignalR クライアント ライブラリを追加するAdd the SignalR client library
  • SignalR ハブを追加するAdd a SignalR hub
  • SignalR サービスと SignalR ハブのエンドポイントを追加するAdd SignalR services and an endpoint for the SignalR hub
  • チャット用の Razor コンポーネント コードを追加するAdd Razor component code for chat

このチュートリアルの最後には、動作するチャット アプリが完成します。At the end of this tutorial, you'll have a working chat app.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

必須コンポーネントPrerequisites

ホストされる Blazor WebAssembly アプリ プロジェクトを作成するCreate a hosted Blazor WebAssembly app project

使用するツールに向けたガイダンスに従ってください。Follow the guidance for your choice of tooling:

注意

Visual Studio 16.6 以降と .NET Core SDK 3.1.300 以降が必要です。Visual Studio 16.6 or later and .NET Core SDK 3.1.300 or later are required.

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

  2. [Blazor アプリ] を選択し、 [次へ] を選択しますSelect Blazor App and select Next.

  3. [プロジェクト名] フィールドに「BlazorSignalRApp」と入力します。Type BlazorSignalRApp in the Project name field. [場所] エントリが正しいことを確認します。または、プロジェクトの場所を指定します。Confirm the Location entry is correct or provide a location for the project. [作成] を選択します。Select Create.

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

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

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

SignalR クライアント ライブラリを追加するAdd the SignalR client library

  1. ソリューション エクスプローラーで、BlazorSignalRApp.Client プロジェクトを右クリックし、 [NuGet パッケージの管理] を選択します。In Solution Explorer, right-click the BlazorSignalRApp.Client project and select Manage NuGet Packages.

  2. [NuGet パッケージの管理] ダイアログで、 [パッケージ ソース]nuget.org に設定されていることを確認します。In the Manage NuGet Packages dialog, confirm that the Package source is set to nuget.org.

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

  4. 検索結果から Microsoft.AspNetCore.SignalR.Client パッケージを選択し、 [インストール] を選択します。In the search results, select the Microsoft.AspNetCore.SignalR.Client package and select Install.

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

  6. [ライセンスの同意] ダイアログが表示されたら、ライセンス条項に同意する場合は [同意する] を選択します。If the License Acceptance dialog appears, select I Accept if you agree with the license terms.

SignalR ハブを追加するAdd a SignalR hub

BlazorSignalRApp.Server プロジェクトで、Hubs (複数形) フォルダーを作成し、次の ChatHub クラス (Hubs/ChatHub.cs) を追加します。In the BlazorSignalRApp.Server project, create a Hubs (plural) folder and add the following ChatHub class (Hubs/ChatHub.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

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

サービスと SignalR ハブのエンドポイントを追加するAdd services and an endpoint for the SignalR hub

  1. BlazorSignalRApp.Server プロジェクトで、Startup.cs ファイルを開きます。In the BlazorSignalRApp.Server project, open the Startup.cs file.

  2. ファイルの先頭に ChatHub クラスの名前空間を追加します。Add the namespace for the ChatHub class to the top of the file:

    using BlazorSignalRApp.Server.Hubs;
    
  3. SignalR および応答の圧縮ミドルウェア サービスを Startup.ConfigureServices に追加します。Add SignalR and Response Compression Middleware services to Startup.ConfigureServices:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSignalR();
        services.AddControllersWithViews();
        services.AddResponseCompression(opts =>
        {
            opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                new[] { "application/octet-stream" });
        });
    }
    
  4. Startup.Configureの場合:In Startup.Configure:

    • 処理パイプラインの構成の上部にある応答圧縮ミドルウェアを使用します。Use Response Compression Middleware at the top of the processing pipeline's configuration.
    • コントローラーのエンドポイントとクライアント側のフォールバックのエンドポイントの間に、ハブのエンドポイントを追加します。Between the endpoints for controllers and the client-side fallback, add an endpoint for the hub.
    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 コンポーネント コードを追加するAdd Razor component code for chat

  1. BlazorSignalRApp.Client プロジェクトで、Pages/Index.razor ファイルを開きます。In the BlazorSignalRApp.Client project, open the Pages/Index.razor file.

  2. マークアップを次のコードで置き換えます。Replace the markup with the following code:

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

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

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;
        
    public void Dispose()
    {
        _ = hubConnection.DisposeAsync();
    }
}

アプリを実行するRun the app

  1. お使いのツール用のガイダンスに従ってください。Follow the guidance for your tooling:
  1. ソリューション エクスプローラーBlazorSignalRApp.Server プロジェクトを選択します。In Solution Explorer, select the BlazorSignalRApp.Server project. F5 キーを押して、デバッグしてアプリを実行するか、Ctrl+F5 キーを押して、デバッグなしでアプリを実行します。Press F5 to run the app with debugging or Ctrl+F5 to run the app without debugging.

  2. アドレス バーから URL をコピーし、別のブラウザー インスタンスまたはタブを開き、アドレス バーに URL を貼り付けます。Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  3. いずれかのブラウザーを選択し、名前とメッセージを入力し、メッセージを送信するボタンを選択します。Choose either browser, enter a name and message, and select the button to send the message. 両方のページに、その名前とメッセージが瞬時に表示されます。The name and message are displayed on both pages instantly:

    交換されたメッセージを示す、2 つのブラウザー ウィンドウで開かれた SignalR Blazor WebAssembly サンプル アプリ。SignalR Blazor WebAssembly sample app open in two browser windows showing exchanged messages.

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

次の手順Next steps

このチュートリアルでは、次の作業を行う方法を学びました。In this tutorial, you learned how to:

  • Blazor WebAssembly でホストされるアプリ プロジェクトを作成するCreate a Blazor WebAssembly Hosted app project
  • SignalR クライアント ライブラリを追加するAdd the SignalR client library
  • SignalR ハブを追加するAdd a SignalR hub
  • SignalR サービスと SignalR ハブのエンドポイントを追加するAdd SignalR services and an endpoint for the SignalR hub
  • チャット用の Razor コンポーネント コードを追加するAdd Razor component code for chat

Blazor アプリの構築について詳しくは、Blazor のドキュメントを参照してください。To learn more about building Blazor apps, see the Blazor documentation:

その他の技術情報Additional resources