目录
前言
SignalR的基本概念及其工作原理
1、核心概念
2、工作原理
前端环境准备
1、安装SignalR
2、创建SignalR连接
3、设置自动重新连接
4、监听连接状态
5、初始化连接
后端环境准备
1、注册SignalR
2、设置Hub
3、配置路由
4、发送和接收消息
实现聊天应用等典型场景
1、发送和接收消息
2、断开连接后的自动重连
总结
前言
在平时开发中遇到实时网络请求时，传统的轮询方式已经无法满足对于延迟和性能的要求。ASP.NET Core SignalR 作为一种强大的实时通信框架，使得在服务器和客户端之间建立持久连接变得更加简单快捷。
它不仅减少了开发实时功能的复杂度，还极大地提升了用户体验。
本文将介绍如何利用ASP.NET Core SignalR构建高效、可扩展的实时应用程序。我们将从SignalR的基本概念入手，逐步深入到其内部机制及应用场景，并通过一个实际的示例项目来展示如何快速搭建一个具备实时通信能力的应用。
SignalR的基本概念及其工作原理
ASP.NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。
1、核心概念
Hub：Hub是SignalR的核心组件之一，它充当了服务器端与客户端之间的通信桥梁。Hub定义了一系列方法，这些方法可以被客户端调用，也可以由服务器端调用并向客户端发送消息。
客户端：客户端是指与Hub进行交互的应用程序，可以是浏览器中的JavaScript脚本、移动应用或其他任何可以与SignalR服务器通信的客户端。
服务器：服务器端负责创建Hub实例，并处理客户端的请求。
2、工作原理
SignalR使用多种传输协议来实现客户端与服务器之间的双向通信，包括WebSocket、Server-Sent Events (SSE)、Long Polling等。
这些协议的选择取决于客户端的支持情况和网络环境。
前端环境准备
首先，确保Vue.js项目已经创建完成。
如果你还没有创建项目，可以使用Vue CLI或其他你喜欢的方式创建一个新的Vue.js项目。
1、安装SignalR
在Vue.js项目中使用SignalR之前，你需要先安装@microsoft/signalr包。打开终端并进入你的Vue.js项目的根目录。
然后运行以下命令来安装SignalR包：
npm install @microsoft/signalr安装完成后，可以在Vue组件中导入SignalR：
import * as signalR from "@microsoft/signalr";2、创建SignalR连接
为了创建一个SignalR连接，你需要定义一个HubConnectionBuilder实例，并指定服务器的URL。此外，你还需要配置自动重连策略。
3、设置自动重新连接
你可以通过调用withAutomaticReconnect方法来设置自动重连。该方法接受一个包含重试间隔时间的数组作为参数。例如，以下代码设置了第一次尝试立即重连，随后的尝试分别等待2秒、4秒和6秒：
const connection = new signalR.HubConnectionBuilder()
.withUrl("https://yourserver.com/hub")
.withAutomaticReconnect([0, 2000, 4000, 6000])
.build();4、监听连接状态
SignalR提供了几个事件监听器来监控连接的状态变化：
-
onreconnecting: 当连接断开时被触发。 -
onreconnected: 当连接重新建立时被触发。 -
onclose: 当所有重连尝试都失败时被触发。
示例代码
connection.onreconnecting(() => {
console.log('Connection is reconnecting...');
3});
5connection.onreconnected(() => {
console.log('Connection was reconnected!');
});
connection.onclose(() => {
console.log('All reconnection attempts failed. Starting to reinitialize the connection.');
// 重新初始化连接
setTimeout(() => {
initializeConnection();
}, 10000); // 10秒后重新初始化
});5、初始化连接
在初始化连接时，你可能需要处理初始化失败的情况。你可以通过监听onclose事件并在其中重新初始化连接来实现这一点。
示例代码
function initializeConnection() {
try {
connection.start().catch(err => {
console.error(err);
// 如果初始化失败，则在5秒后再次尝试
setTimeout(initializeConnection, 5000);
});
} catch (err) {
console.error(err);
}
}
initializeConnection();后端环境准备
在ASP.NET Core后端项目中，你需要设置SignalR Hub以便与前端通信。
1、注册SignalR
在Startup.cs文件中注册SignalR服务：
public void ConfigureServices(IServiceCollection services)
{
services.AddSignalR();
}2、设置Hub
创建一个Hub类来处理客户端的连接和消息传递：
public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}3、配置路由
在Configure方法中配置SignalR的路由：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<ChatHub>("/chatHub");
endpoints.MapControllers();
});
}4、发送和接收消息
在Vue.js中，你可以通过调用invoke方法来发送消息，并通过注册事件处理器来接收消息。
// 发送消息
connection.invoke('SendMessage', 'User', 'Hello!').catch(err => console.error(err));
// 接收消息
connection.on('ReceiveMessage', (user, message) => {
console.log(`${user} says: ${message}`);
7});实现聊天应用等典型场景
1、发送和接收消息
发送消息：客户端可以通过调用invoke方法向服务器发送消息：
connection.invoke('SendMessage', 'User', 'Hello!').catch(err => console.error(err));接收消息：服务器端通过调用Clients.All.SendAsync方法向所有客户端发送消息：
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}2、断开连接后的自动重连
自动重连：通过withAutomaticReconnect方法设置自动重连策略。
重连失败后的处理：在onclose事件中处理所有重连尝试失败的情况，并重新初始化连接。
总结
本文介绍了如何利用ASP.NET Core SignalR构建高效、可扩展的实时应用程序。我们从SignalR的基本概念入手，逐步深入到其内部机制及应用场景，并通过一个实际的示例项目展示了如何快速搭建一个具备实时通信能力的应用。
最后
如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！优秀是一种习惯，欢迎大家关注学习 ！优秀是一种习惯，欢迎大家关注学习！
