结合使用 ASP.NET Core SignalR 和 Blazor WebAssembly

作者：Daniel Roth 和 Luke Latham

本教程介绍使用 SignalR 和 Blazor WebAssembly 生成实时应用的基础知识。 您将学习如何：

在本教程结束时，你将拥有一个正常运行的聊天应用。

查看或下载示例代码（如何下载）

先决条件

创建托管 Blazor WebAssembly 应用项目

安装 Blazor WebAssembly 模板。 当 Blazor WebAssembly 处于预览状态时， Microsoft.AspNetCore.Blazor.Templates 包具有预览版本。 在命令行界面中执行以下命令：

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

按照所选工具的指南进行操作：

添加 SignalR 客户端库

添加 SignalR 集线器

在“BlazorSignalRApp.Server”项目中，创建一个“Hubs”（复数）文件夹，并添加以下 ChatHub 类 (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 服务和 SignalR 集线器的终结点

1. 在“BlazorSignalRApp.Server”项目中，打开“Startup.cs”文件。

2. 将 ChatHub 类的命名空间添加到文件顶部：

   using BlazorSignalRApp.Server.Hubs;
   

3. 将 SignalR 服务添加到 Startup.ConfigureServices：

   services.AddSignalR();
   

4. 在默认控制器路由的终结点与客户端回退的终结点之间的 Startup.Configure 中，为集线器添加终结点：

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapDefaultControllerRoute();
       endpoints.MapHub<ChatHub>("/chatHub");
       endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
   });
   

添加用于聊天的 Razor 组件代码

1. 在“BlazorSignalRApp.Client”项目中，打开“Pages/Index.razor”文件。

2. 将标记替换为以下代码：

@page "/"
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager NavigationManager

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

运行应用

1. 按照工具的指南进行操作：

后续步骤

在本教程中，你将了解：

若要了解有关生成 Blazor 应用的详细信息，请参阅 Blazor 文档：

其他资源

• ASP.NET Core SignalR 简介