结合使用 ASP.NET Core SignalR 和 Blazor

本教程提供了使用 SignalR 和 Blazor 生成实时应用的基本工作经验。本文适用于已经熟悉 SignalR 并正在寻求了解如何在 SignalR 应用中使用 Blazor 的开发人员。有关 SignalR 和 Blazor 框架的详细指南，请参阅以下参考文档集和 API 文档：

ASP.NET Core SignalR 概述 ASP.NET Core Blazor .NET API 浏览器了解如何：

创建 Blazor 应用添加 SignalR 客户端库添加 SignalR 集线器添加 SignalR 服务和 SignalR 中心的终结点添加用于聊天的 Razor 组件代码在本教程结束时，你将拥有一个正常运行的聊天应用。

先决条件 Visual Studio Visual Studio Code .NET CLI 具有“ASP.NET 和 Web 开发”工作负载的 Visual Studio 2022 或更高版本

示例应用本教程不需要下载教程的示例聊天应用。示例应用是按照本教程的步骤生成的最终工作应用。

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

创建 Blazor Web 应用按照所选工具的指南进行操作：

Visual Studio Visual Studio Code .NET CLI 备注

需要 Visual Studio 2022 或更高版本以及 .NET Core SDK 8.0.0 或更高版本。

创建新项目。

选择“Blazor Web 应用”模板。选择“下一步”。

在“项目名称”字段中键入 BlazorSignalRApp。确认“位置”条目正确无误或为项目提供位置。选择下一步。

确认 Framework 是 .NET 8 或更高版本。选择“创建”。

添加 SignalR 客户端库 Visual Studio Visual Studio Code .NET CLI 在“解决方案资源管理器”中，右键单击 BlazorSignalRApp 项目，然后选择“管理 NuGet 包” 。

在“管理 NuGet 包”对话框中，确认“包源”设置为“nuget.org” 。

选择“浏览”后，在搜索框中键入“Microsoft.AspNetCore.SignalR.Client”。

在搜索结果中，选择 Microsoft.AspNetCore.SignalR.Client 包的最新版本。选择“安装” 。

如果出现“预览更改”对话框，则选择“确定”。

如果出现“许可证接受”对话框，如果你同意许可条款，请选择“我接受”。

添加 SignalR 集线器创建 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 文件。

将 Microsoft.AspNetCore.ResponseCompression 和 ChatHub 类的命名空间添加到文件的顶部：

复制 using Microsoft.AspNetCore.ResponseCompression; using BlazorSignalRApp.Hubs; 添加响应压缩中间件服务：

复制 builder.Services.AddResponseCompression(opts => { opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( new[] { “application/octet-stream” }); }); 在处理管道的配置顶部使用响应压缩中间件：

复制 app.UseResponseCompression(); 紧接在映射 Razor 组件 (app.MapRazorComponents()) 的行后面，为行添加一个终结点：

复制 app.MapHub("/chathub"); 添加用于聊天的 Razor 组件代码打开 Components/Pages/Home.razor 文件。

将标记替换为以下代码：


@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.SignalR.Client
@inject NavigationManager Navigation
@implements IAsyncDisposable

Home

    
        User:
        
    

    
        Message:
        
    

Send

    @foreach (var message in messages)
    {
        @message
    }

@code {
    private HubConnection? hubConnection;
    private List messages = new List();
    private string? userInput;
    private string? messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(Navigation.ToAbsoluteUri("/chathub"))
            .Build();

        hubConnection.On("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();
        }
    }
}