如今的应用程序常常需要与用户进行实时通信，无论是发送即时通知、提供实时聊天功能，还是动态更新仪表盘都是如此。SignalR是一个.NET库，它通过支持服务器与客户端之间的双向通信，简化了实时应用程序的开发。
在本指南中，我们将深入探究SignalR，涵盖其主要用例，并通过一个用C#编写的实际示例来创建一个实时应用程序。
什么是SignalR？ SignalR是一个.NET库，它通过使服务器在有更新可用时能立即将数据推送给客户端（无需客户端主动请求），来促进实时通信。SignalR构建于WebSocket之上，并且为了兼容性考虑（作为备用方案），它还会使用诸如服务器发送事件（Server-Sent Events）和长轮询（Long Polling）等其他技术，以确保能跨不同平台正常工作。
工作原理 SignalR使用“中心（Hubs）”来管理服务器与客户端之间的通信。“中心”是一个类，你可以在其中定义能被客户端和服务器调用的方法，从而简化实时应用程序中复杂的交互操作。
关键用例
在.NET中设置SignalR 步骤1：创建项目 打开Visual Studio并创建一个新的ASP.NET Core Web应用程序。 选择“API”或者“Web应用程序”作为项目类型。 在.csproj文件中，确保列出了“Microsoft.AspNetCore.SignalR”；如果没有，通过NuGet添加它。
步骤2：配置SignalR 在Startup.cs文件中，在ConfigureServices方法中添加SignalR配置：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR(); // 将SignalR添加到应用程序的服务中
}
然后，在Configure方法中添加SignalR映射：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
endpoints.MapHub<ChatHub>("/chatHub"); // 将ChatHub映射到“/chatHub”路由
});
}
步骤3：创建“中心” 让我们创建一个“中心”来管理聊天功能。
在项目中，添加一个名为“Hubs”的文件夹。 在“Hubs”文件夹内，创建一个名为ChatHub.cs的新类：
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
在这里，SendMessage方法允许客户端向服务器发送消息，然后服务器使用Clients.All.SendAsync将该消息转发给所有已连接的客户端。
实际示例：使用JavaScript实现客户端 现在，让我们创建一个简单的HTML和JavaScript界面，用于连接到“中心”并发送/接收消息。
在项目中，添加一个名为index.html的文件，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用SignalR的实时聊天</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.0/signalr.min.js"></script>
</head>
<body>
<h2>聊天</h2>
<input type="text" id="userInput" placeholder="你的名字..." />
<input type="text" id="messageInput" placeholder="输入一条消息..." />
<button onclick="sendMessage()">发送</button>
<ul id="messagesList"></ul>
<script>
// 连接到“中心”
const connection = new signalR.HubConnectionBuilder()
.withUrl("/chatHub")
.build();
// 显示接收到的消息
connection.on("ReceiveMessage", (user, message) => {
const li = document.createElement("li");
li.textContent = `${user}: ${message}`;
document.getElementById("messagesList").appendChild(li);
});
connection.start().catch(err => console.error(err.toString()));
// 向服务器发送消息
function sendMessage() {
const user = document.getElementById("userInput").value;
const message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(err => console.error(err.toString()));
}
</script>
</body>
</html>
这段代码连接到“中心”，并定义了发送消息以及实时显示接收到的消息的函数。
其他用例 通知 对于通知系统，你可以在“中心”中创建一个方法，比如SendNotification，然后调用该方法向所有客户端或特定的客户端群组发送特定通知。
public async Task SendNotification(string notification)
{
await Clients.All.SendAsync("ReceiveNotification", notification);
}
动态仪表盘 一个需要展示实时数据（比如销售数据或系统监控数据）的仪表盘可以使用类似的方法。你可以定义一些方法，用接收到的新数据来更新客户端。
public async Task UpdateDashboardData(string data)
{
await Clients.All.SendAsync("ReceiveDashboardData", data);
}
SignalR简化了实时应用程序的构建，实现了快速、动态的交互。本指南涵盖了创建聊天应用程序的基本步骤，同样的概念也可应用于诸如通知和仪表盘等其他用例。
借助SignalR，你的系统能够快速适应变化，使其非常适用于许多现代场景。
阅读原文：原文链接
该文章在 2024/12/31 11:35:27 编辑过
400 186 1886
