17370845950

Blazor集成SignalR分三步：服务端定义Hub并注册、客户端安装包并建立连接、收发消息；推荐WASM模式以节省服务器资源；需注意路径大小写、CORS配置及开发期错误设置。

Blazor 集成 SignalR 主要分服务端 Hub 定义、客户端连接、消息收发三步，WebAssembly（WASM）和 Server 两种模式逻辑一致，但推荐用 WASM 模式——避免服务器端重复连接消耗资源。

服务端：定义 Hub 并注册

在 ASP.NET Core 后端项目中新建一个继承 Hub 的类，比如 ChatHub：

• 方法用 public async Task 声明，可被客户端调用
• 用 Clients.All.SendAsync 或 Clients.Client(connectionId).SendAsync 推送消息
• 在 Program.cs 中注册 SignalR 服务和 Hub 端点：

builder.Services.AddSignalR().AddMessagePackProtocol();
app.MapHub("/chatHub");

客户端：安装包并建立连接

在 Blazor WebAssembly 项目中，先安装 NuGet 包：

• Microsoft.AspNetCore.SignalR.Client
• 如需高性能序列化，加装 Microsoft.AspNetCore.SignalR.Protocols.MessagePack

在组件或服务中创建连接：

private HubConnection hubConnection;
hubConnection = new HubConnectionBuilder()
    .WithUrl(navigationManager.ToAbsoluteUri("/chatHub"))
    .Build();
await hubConnection.StartAsync();

收发消息：绑定事件 + 调用方法

连接建立后，就能双向通信了：

• 用 hubConnection.On("MethodName", handler) 监听服务器推送，例如：On("ReceiveMessage", msg => { messages.Add(msg); StateHasChanged(); })
• 用 hubConnection.InvokeAsync("MethodName", args...) 调用服务器方法，参数类型和顺序必须严格匹配
• 建议在 OnInitializedAsync 中启动连接，在 DisposeAsync 中显式停止并释放连接

常见注意点

几个容易出错的地方：

• URL 必须和服务端 MapHub 的路径完全一致（含大小写），且不能漏掉前导斜杠
• 服务器启用 EnableDetailedErrors = true 仅用于开发，上线前关闭
• WASM 客户端不支持依赖注入 HubConnectionBuilder 到组件属性，应通过服务封装或手动构建
• 跨域请求需在服务端配置 CORS，允许前端域名