vue2和vue3项目使用signalr插件,前后端如何配合使用
后端(以 Java 为例)
使用 Spring Boot 和 Spring SignalR
import org.springframework.stereotype.Component;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
// 启用 WebSocket 消息代理
@EnableWebSocketMessageBroker
@Component
public class SignalRBackendConfigurer extends AbstractWebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
// 注册一个用于客户端连接的端点,路径为 "/signalr"
registry.addEndpoint("/signalr").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
// 配置消息代理,指定应用内目的地的前缀
registry.setApplicationDestinationPrefixes("/app");
// 定义广播消息的目的地前缀
registry.enableSimpleBroker("/topic");
}
// 发送消息的方法
public void sendMessage(String message) {
SimpMessagingTemplate template = new SimpMessagingTemplate();
template.convertAndSend("/topic/message", message);
}
}
后端(以.NET Core 为例)
1、安装SignalR包
在ASP.NET Core项目中,你需要安装SignalR的NuGet包。
Install-Package Microsoft.AspNetCore.SignalR
2、创建 SignalR Hub 类
定义一个继承自 Hub 的类来处理与客户端的交互逻辑。
using Microsoft.AspNetCore.SignalR;
// 定义 SignalR Hub 类,用于处理与客户端的交互
public class MySignalRHub : Hub
{
// 定义发送消息的方法,将消息发送给所有连接的客户端
public async Task SendMessageToClients(string message)
{
await Clients.All.SendAsync("MessageReceived", message);
}
}
3、配置 SignalR 服务
在 Startup 类的 ConfigureServices 方法中注册 SignalR 服务。
在 Configure 方法中配置 SignalR 的路由。
// 在 Startup 类中配置 SignalR 服务
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
// 注册 SignalR 服务
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseRouting();
app.UseEndpoints(endpoints =>
{
// 配置 SignalR 的路由,指定 Hub 的路径
endpoints.MapHub<MySignalRHub>("/mySignalRHub");
});
}
}
前端VUE
1、安装SignalR客户端库
npm install @microsoft/signalr
yarn add @microsoft/signalr
2、创建 signalr.js 文件进行封装
import * as signalR from '@microsoft/signalr';
// 定义 SignalRService 类
export default class SignalRService {
//option为调用SignalRService 类传进来的参数
constructor(option) {
// 初始化 SignalR 连接对象为 null
this.connection = null;
//this.url = options.url || "";
// 初始化重试次数为 0
this.retryCount = 0;
// 最大重试次数
this.maxRetryAttempts = 5;
// 重试间隔(毫秒)
this.retryInterval = 5000;
}
// 初始化 SignalR 连接的方法
initSignalR(url) {
// 创建 SignalR 连接对象,并指定后端的 URL
this.connection = new signalR.HubConnectionBuilder()
.withUrl(url)
.build();
// 调用启动连接的方法
this.startConnection();
}
// 实际启动连接的方法
startConnection() {
// 尝试启动连接
this.connection.start().then(() => {
// 连接成功,打印日志并重置重试次数
console.log('Connected to SignalR successfully!');
this.retryCount = 0;
}).catch(err => {
// 连接失败,打印错误日志
console.error('Error connecting to SignalR:', err);
// 如果重试次数小于最大重试次数
if (this.retryCount < this.maxRetryAttempts) {
// 设置一个定时器,在指定间隔后重试连接,并增加重试次数
setTimeout(() => {
this.retryCount++;
this.startConnection();
}, this.retryInterval);
}
});
}
// 用于注册消息接收回调函数的方法
onMessageReceived(callback) {
//.net 在连接对象上注册消息接收事件的回调函数
this.connection.on("MessageReceived", callback);
java 在连接对象上注册消息接收事件的回调函数
//this.connection.on("message", callback);
}
// 停止 SignalR 连接的方法
stopSignalR() {
// 如果存在连接对象
if (this.connection) {
// 停止连接,并打印日志
this.connection.stop();
console.log('Disconnected from SignalR.');
}
}
}
3、在 Vue2 组件中使用
<template>
<!-- 组件模板 -->
</template>
<script>
import SignalRService from './signalr.js';
export default {
data() {
return {};
},
created() {
// 创建 SignalRService 实例
this.signalR = new SignalRService();
// 初始化 SignalR 配置,并指定后端 URL
this.signalR.initSignalR('/mySignalRHub');
// 注册消息接收的回调函数
this.signalR.onMessageReceived((message) => {
// 处理接收到的消息,此处仅打印到控制台
console.log(message);
});
},
beforeDestroy() {
// 在组件销毁时,停止 SignalR 连接
this.signalR.stopSignalR();
}
}
</script>
4、在 Vue 3 组件中使用
<template>
<!-- 组件模板 -->
</template>
<script setup>
import SignalRService from './signalr.js';
// 创建 SignalR 服务实例
const signalR = new SignalRService();
// 组件创建时初始化 SignalR 配置
onMounted(() => {
signalR.initSignalR('/signalr');
// 注册消息接收的回调函数
signalR.onMessageReceived((message) => {
console.log(message);
});
});
// 组件卸载时停止 SignalR 连接
onUnmounted(() => {
signalR.stopSignalR();
});
</script>
总结
后端java使用 Spring Boot 和 Spring SignalR。
后端创建了 SignalR Hub 类,并进行了服务的注册和路由配置,以准备与前端进行通信。
前端的 signalr.js 中,构造函数初始化了一些重连相关的参数。initSignalR 方法用于创建连接,startConnection 方法负责实际的连接启动,并在连接失败时根据重试次数和间隔进行自动重连尝试。
在 Vue 组件中,在 created 钩子中初始化 SignalR 服务,监听消息,并在组件销毁时(beforeDestroy 钩子)断开连接。
例如,如果网络出现短暂波动导致连接断开,前端会自动进行重试连接,以保持通信的稳定性。而当关闭 Vue 页面时,会确保断开 SignalR 链接,释放相关资源。