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();<br>app.MapHub<ChatHub>("/chatHub");
客户端:安装包并建立连接
在 Blazor WebAssembly 项目中,先安装 NuGet 包:
Microsoft.AspNetCore.SignalR.Client如需高性能序列化,加装
Microsoft.AspNetCore.SignalR.Protocols.MessagePack
在组件或服务中创建连接:
private HubConnection hubConnection;<br>hubConnection = new HubConnectionBuilder()<br> .WithUrl(navigationManager.ToAbsoluteUri("/chatHub"))<br> .Build();<br>await hubConnection.StartAsync();
收发消息:绑定事件 + 调用方法
连接建立后,就能双向通信了:
用hubConnection.On<t>("MethodName", handler)</t> 监听服务器推送,例如:On<string>("ReceiveMessage", msg => { messages.Add(msg); StateHasChanged(); })</string>
用 hubConnection.InvokeAsync("MethodName", args...) 调用服务器方法,参数类型和顺序必须严格匹配
建议在 OnInitializedAsync中启动连接,在
DisposeAsync中显式停止并释放连接
常见注意点
几个容易出错的地方:
URL 必须和服务端MapHub的路径完全一致(含大小写),且不能漏掉前导斜杠 服务器启用
EnableDetailedErrors = true仅用于开发,上线前关闭 WASM 客户端不支持依赖注入
HubConnectionBuilder到组件属性,应通过服务封装或手动构建 跨域请求需在服务端配置 CORS,允许前端域名 基本上就这些。
