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 {@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 注册一个用于客户端连接的端点，路径为 "/signalr"registry.addEndpoint("/signalr").withSockJS();}@Overridepublic 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 连接对象为 nullthis.connection = null;//this.url = options.url || "";// 初始化重试次数为 0this.retryCount = 0;// 最大重试次数this.maxRetryAttempts = 5;// 重试间隔（毫秒）this.retryInterval = 5000;}// 初始化 SignalR 连接的方法initSignalR(url) {// 创建 SignalR 连接对象，并指定后端的 URLthis.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 配置，并指定后端 URLthis.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 链接，释放相关资源。