结合使用 ASP.NET Core SignalR 和 Blazor WebAssemblyUse ASP.NET Core SignalR with Blazor WebAssembly
- 本文内容
先决条件Prerequisites
创建托管 Blazor WebAssembly 应用项目Create a hosted Blazor WebAssembly 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
运行应用Run the app
后续步骤Next steps
其他资源Additional resources

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

本文内容

作者：Daniel Roth 和 Luke Latham

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server。Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

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

创建 Blazor WebAssembly 托管应用项目
添加 SignalR 客户端库
添加 SignalR 集线器
添加 SignalR 服务和 SignalR 集线器的终结点
添加用于聊天的 Razor 组件代码

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

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

具有“ASP.NET 和 Web 开发”工作负载的 Visual Studio 2019 16.4 或更高版本
.NET Core 3.1 SDK 或更高版本

Visual Studio Code 说明使用用于 ASP.NET Core 的 .NET Core CLI 开发功能，如项目创建。可在任何平台（macOS、Linux 或 Windows）上或在任何代码编辑器中遵循这些说明。如果使用 Visual Studio Code 以外的其他内容，则可能需要进行少量更改。

.NET Core 3.1 SDK 或更高版本

创建托管 Blazor WebAssembly 应用项目Create a hosted Blazor WebAssembly app project

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

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5

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

Visual Studio
Visual Studio Code
Visual Studio for Mac
.NET Core CLI

创建新项目。
选择“Blazor 应用” ，然后选择“下一步” 。
在“项目名称” 字段中键入“BlazorSignalRApp”。确认“位置” 条目正确无误或为项目提供位置。选择“创建” 。
选择“Blazor WebAssembly 应用” 模板。
在“高级” 下选中“托管的 ASP.NET Core” 复选框。
选择“创建” 。

备注

如果升级或安装了新版 Visual Studio，并且 Blazor WebAssembly 模板没有出现在 VS UI 中，请使用前面显示的 dotnet new 命令重新安装该模板。

在命令行界面中执行以下命令：

dotnet new blazorwasm --hosted --output BlazorSignalRApp

在 Visual Studio Code 中打开应用的项目文件夹。
当显示添加资产以生成和调试应用的对话框时，选择“是” 。Visual Studio Code 会自动添加“.vscode” 文件夹以及生成的“launch.json” 和“tasks.json” 文件。

在命令行界面中执行以下命令：

dotnet new blazorwasm --hosted --output BlazorSignalRApp

在 Visual Studio for Mac 中，通过导航到项目文件夹并打开项目的解决方案文件 (.sln ) 打开项目。

在命令行界面中执行以下命令：

dotnet new blazorwasm --hosted --output BlazorSignalRApp

添加 SignalR 客户端库Add the SignalR client library

Visual Studio
Visual Studio Code
Visual Studio for Mac
.NET Core CLI

在“解决方案资源管理器”中，右键单击“BlazorSignalRApp.Client”项目，然后选择“管理 NuGet 包” 。
在“管理 NuGet 包” 对话框中，确认“包源” 设置为“nuget.org” 。
选择“浏览” 后，在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。
在搜索结果中，选中 Microsoft.AspNetCore.SignalR.Client 包，然后选择“安装” 。
如果出现“预览更改” 对话框，则选择“确定” 。
如果出现“许可证接受” 对话框，如果你同意许可条款，请选择“我接受” 。

在“集成终端” （工具栏上的“视图” > “终端” ）中，执行以下命令：

dotnet add Client package Microsoft.AspNetCore.SignalR.Client

在“解决方案” 边栏中，右键单击“BlazorSignalRApp.Client” 项目，然后选择“管理 NuGet 包” 。
在“管理 NuGet 包” 对话框中，确认源下拉列表设置为“nuget.org” 。
选择“浏览” 后，在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。
在搜索结果中，选中 Microsoft.AspNetCore.SignalR.Client 包旁边的复选框，然后选择“添加包” 。
出现“许可证接受” 对话框时，如果你同意许可条款，请选择“接受” 。

在命令行界面中执行以下命令：

cd BlazorSignalRApp
dotnet add Client package Microsoft.AspNetCore.SignalR.Client

添加 SignalR 集线器Add a SignalR hub

在“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 集线器的终结点Add SignalR services and an endpoint for the SignalR hub

在“BlazorSignalRApp.Server” 项目中，打开“Startup.cs” 文件。
将 ChatHub 类的命名空间添加到文件顶部：

using BlazorSignalRApp.Server.Hubs;

将 SignalR 服务添加到 Startup.ConfigureServices：

services.AddSignalR();

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

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

添加用于聊天的 Razor 组件代码Add Razor component code for chat

在“BlazorSignalRApp.Client” 项目中，打开“Pages/Index.razor” 文件。
将标记替换为以下代码：

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