使用 SignalR 和 .NET 进行实时通信应用程序开发

科技   2024-12-31 06:14   上海  


如今的应用程序常常需要与用户进行实时通信,无论是发送即时通知、提供实时聊天功能,还是动态更新仪表盘都是如此。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添加到应用程序的服务中
}
  1. 然后,在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,你的系统能够快速适应变化,使其非常适用于许多现代场景。

如果你喜欢我的文章,请给我一个赞!谢谢

架构师老卢
资深软件架构师, 分享编程、软件设计经验, 教授前沿技术, 分享技术资源(每天发布电子书),每天进步一点点...
 最新文章