vue2和vue3项目使用signalr插件，前后端如何配合的

vue2和vue3项目使用signalr插件，前后端如何配合使用

- [后端（以 Java 为例）](#后端（以 Java 为例）)
- - [使用 Spring Boot 和 Spring SignalR](#使用 Spring Boot 和 Spring SignalR)
- [后端（以.NET Core 为例）](#后端（以.NET Core 为例）)
- - 1、安装SignalR包
  - [2、创建 SignalR Hub 类](#2、创建 SignalR Hub 类)
  - [3、配置 SignalR 服务](#3、配置 SignalR 服务)
- 前端VUE
- - 1、安装SignalR客户端库
  - [2、创建 signalr.js 文件进行封装](#2、创建 signalr.js 文件进行封装)
  - [3、在 Vue2 组件中使用](#3、在 Vue2 组件中使用)
  - [4、在 Vue 3 组件中使用](#4、在 Vue 3 组件中使用)
- 总结

后端（以 Java 为例）

使用 Spring Boot 和 Spring SignalR

java 复制代码

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 的类来处理与客户端的交互逻辑。

csharp 复制代码

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 的路由。

csharp 复制代码

// 在 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 文件进行封装

javascript 复制代码

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 组件中使用

javascript 复制代码

<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 组件中使用

javascript 复制代码

<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 链接，释放相关资源。