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

相关推荐
DuelCode1 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
优创学社21 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
猴哥源码1 小时前
基于Java+springboot 的车险理赔信息管理系统
java·spring boot
YuTaoShao2 小时前
【LeetCode 热题 100】48. 旋转图像——转置+水平翻转
java·算法·leetcode·职场和发展
Dcs2 小时前
超强推理不止“大”——手把手教你部署 Mistral Small 3.2 24B 大模型
java
东阳马生架构2 小时前
订单初版—1.分布式订单系统的简要设计文档
java
Code blocks3 小时前
使用Jenkins完成springboot项目快速更新
java·运维·spring boot·后端·jenkins
荔枝吻3 小时前
【沉浸式解决问题】idea开发中mapper类中突然找不到对应实体类
java·intellij-idea·mybatis
snoopyfly~3 小时前
Ubuntu 24.04 LTS 服务器配置:安装 JDK、Nginx、Redis。
java·服务器·ubuntu