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中显式停止并释放连接
常见注意点
几个容易出错的地方:
基本上就这些。










