SignalR for C# (.NET): 完整指南及示例

什么是 SignalR，为什么需要它？

\n\n

SignalR 是一个用于 ASP.NET Core 的库，它简化了在 Web 应用程序中添加实时 (real-time) 功能的过程。它允许服务器即时向已连接的客户端（浏览器、移动应用、桌面应用）发送数据，而无需客户端不断发起请求。

\n\n

为什么需要它？ 传统的 HTTP 协议基于“请求-响应”模式：客户端发送请求，服务器响应。为了获取更新，客户端必须不断轮询 (polling) 服务器。这效率低下且会造成延迟。SignalR 通过提供持久的双向连接解决了这个问题。

\n\n

主要使用场景：

\n

\n
• 聊天和即时通讯（消息即时送达）
\n
• 监控面板和仪表盘（更新汇率、股票报价）
\n
• 协同编辑文档（类似 Google Docs）
\n
• 实时通知（新订单、警报）
\n
• 多人在线游戏
\n
• 长时间操作（文件上传、数据处理）的进度显示
\n

\n\n

SignalR 会自动选择最佳的传输协议进行连接：

\n

\n
• WebSocket — 最高效，持久的双向连接
\n
• Server-Sent Events (SSE) — 从服务器到客户端的单向传输
\n
• Long Polling — 当 WebSocket 和 SSE 不可用时的回退机制
\n

\n\n

安装 SignalR

\n\n

服务器端安装 (ASP.NET Core)

\n

对于服务器端，使用 NuGet 包。在终端中执行：

\n

dotnet add package Microsoft.AspNetCore.SignalR

\n

或者通过 Visual Studio 中的 Package Manager Console：

\n

Install-Package Microsoft.AspNetCore.SignalR

\n\n

JavaScript 客户端安装 (浏览器)

\n

对于客户端（浏览器），使用 npm：

\n

npm install @microsoft/signalr

\n

或者通过 CDN 引入：

\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>

\n\n

.NET (C#) 客户端安装

\n

对于 C# 客户端（例如控制台应用或 WPF）：

\n

dotnet add package Microsoft.AspNetCore.SignalR.Client

\n\n

快速入门："Hello, World!" 示例

\n\n

让我们创建一个简单的聊天程序：服务器接收消息并将其广播给所有已连接的客户端。

\n\n

步骤 1：创建 Hub（服务器端）

\n

创建文件 ChatHub.cs：

\n

using Microsoft.AspNetCore.SignalR;\n\nnamespace SignalRChat.Hubs\n{\n    public class ChatHub : Hub\n    {\n        public async Task SendMessage(string user, string message)\n        {\n            // 向所有已连接的客户端发送消息\n            await Clients.All.SendAsync("ReceiveMessage", user, message);\n        }\n    }\n}\n

\n\n

步骤 2：在 Program.cs 中注册 SignalR

\n

using SignalRChat.Hubs;\n\nvar builder = WebApplication.CreateBuilder(args);\n\n// 添加 SignalR\nbuilder.Services.AddSignalR();\n\nvar app = builder.Build();\n\napp.MapGet("/", () => "Hello World!");\n\n// 将 Hub 映射到路径 /chatHub\napp.MapHub<ChatHub>("/chatHub");\n\napp.Run();\n

\n\n

步骤 3：创建客户端 (HTML + JavaScript)

\n

<!DOCTYPE html>\n<html>\n<head>\n    <title>SignalR Chat</title>\n</head>\n<body>\n    <h2>SignalR Chat</h2>\n    <div>\n        <input type="text" id="userInput" placeholder="您的姓名" />\n        <input type="text" id="messageInput" placeholder="消息" />\n        <button onclick="sendMessage()">发送</button>\n    </div>\n