Blazor 与 SignalR 结合可实现 C# 全栈实时交互,无需大量 JavaScript;Server 模式支持 HubContext 直推,WASM 需手动管理连接并注意跨域;需用 DTO 传参、调整 Circuit 超时、异步建连防 JS 未就绪。

Blazor 和 SignalR 结合,能让你在 .NET 生态里轻松做出真正的实时交互页面,比如聊天室、实时仪表盘、协同编辑——不用写一堆 JavaScript 就能双向推拉数据。
为什么选 Blazor + SignalR 而不是纯 JS 方案?
Blazor(尤其是 Server 或 WebAssembly + Auto 模式)允许你用 C# 写前端逻辑;SignalR 则负责底层连接管理、自动重连、协议协商(WebSocket / Server-Sent Events / Long Polling)。两者配合,业务逻辑全在 C# 侧,前后端类型一致、调试统一、共享模型类,省去 JSON 序列化/反序列化的隐式成本和类型错位风险。
快速接入 SignalR 的三步走
-
服务端:注册 Hub 并启用 SignalR
在
Program.cs中加:builder.Services.AddSignalR();app.MapHub("/hub/chat"); -
写一个 Hub 类(例如
ChatHub.cs):
继承Hub,公开方法供客户端调用(如SendAsync),用Clients.All.SendAsync或Clients.Group.SendAsync推送消息。 -
客户端:在 Blazor 组件中连接 Hub
使用
@inject HubConnection(Server)或HubConnectionBuilder(WASM),在OnInitializedAsync建连,DisposeAsync断连。记得处理OnClosed和重连逻辑。
Blazor Server 与 WASM 的关键差异点
Server 模式下,Hub 连接天然共享同一个 Circuit,可直接注入 HubContext 从服务层触发推送(比如数据库变更后通知前端);WASM 则必须走完整 HTTP + WebSocket 连接,无法直连服务容器,需通过 API 中间层或使用 HubConnection 手动管理生命周期。另外,WASM 客户端要引用 Microsoft.AspNetCore.SignalR.Client 包,并注意跨域和证书问题(尤其开发时用 HTTPS)。
华友协同办公管理系统(华友OA),基于微软最新的.net 2.0平台和SQL Server数据库,集成强大的Ajax技术,采用多层分布式架构,实现统一办公平台,功能强大、价格便宜,是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想,集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、
避坑提醒:几个高频问题
- Hub 方法参数必须是可序列化的简单类型或你定义的 DTO 类(别传
DbContext或IQueryable) - Blazor Server 默认开启 Circuit 自动断开,长时间无操作会中断 SignalR 连接——可在
App.razor里用CircuitOptions调整超时 - WASM 中不要在
OnInitialized启动连接,要用OnInitializedAsync+await,否则可能报“JS interop not ready” - 调试时打开浏览器 Network 面板,看
/hub/chat是否建立 WebSocket,避免被代理或防火墙静默拦截
基本上就这些。跑通一次连接、发一条消息、再收回来,后面就能按业务扩展分组、用户追踪、离线缓存了。









