signlar.js

import * as signalR from '@microsoft/signalr';

// SignalR服务 
export default class SignalRService {
    connection = null;
    tryReconnectCount = 0;
    maxReconnectAttempts = 5;
    reconnectTimeout = 5000;
    // 连接
    connect(url, onMessageReceived) {
        this.connection = new signalR.HubConnectionBuilder()
            // 连接地址
            .withUrl(url, { /* 如果你使用 JWT 或其他身份验证，可以在这里设置 access token */ })
            // 启用自动重连 （在连接丢失后，SignalR将立即尝试重新连接（0毫秒），如果失败，则在2秒后再次尝试，然后是5秒、10秒和20秒）
            // .withAutomaticReconnect([0, 2000, 5000, 10000, 20000]) // 配置重连策略
            .withAutomaticReconnect()
            // 设置日志级别
            .configureLogging(signalR.LogLevel.Information)
            .build();

        // 启动连接
        this.connection.start().catch(err => console.error(err.toString())); 
        // 接收消息处理
        this.connection.on('ReceiveMessage', onMessageReceived);

        // // 断开连接处理
        // this.connection.onclose(async (err) => {
        //     if (this.tryReconnectCount < this.maxReconnectAttempts) {
        //         console.log(`连接错误，已关闭. 尝试在 ${this.reconnectTimeout / 1000} 秒钟后重连`);
        //         await new Promise(resolve => setTimeout(resolve, this.reconnectTimeout));
        //         this.tryReconnectCount++;
        //         this.connect(url, onMessageReceived);
        //     } else {
        //         console.error('重连尝试次数达到上限，不再尝试重新连接。');
        //     }
        // });

        // // 正在重连
        // this.connection.onreconnecting(err => {  
        //     console.log('SignalR 正在尝试重连...', err);  
        //     // 这里可以添加在尝试重连时执行的逻辑  
        // });

        // // 已重新连接
        // this.connection.onreconnected(connectionId => {  
        //     console.log('SignalR 已重新连接，连接ID:', connectionId);
        //     // 重置连接次数
        //     this.tryReconnectCount = 0;
        // });

        // 心跳机制（SignalR已内置心跳机制，无需配置）

    }

    // 发送 (methodName: 是在Hub中定义的方法名(与后端约定的方法名称), args: 发送的内容)
    send(methodName, args) {
        if (this.connection && this.connection.connected) {  
            this.connection.invoke(methodName, args).catch(err => console.error(err.toString()));
        }
    }
    // 停止
    disconnect() {
        console.log('停止连接', this.connection, this.connection.connectionId);
        if (this.connection && this.connection.connectionId) {
            this.connection.stop();
            this.connection = null; 
        }
    }
}

// SignalR服务  
// const SignalRService = {
//     connection: null,  
    
//     // 连接到SignalR Hub  
//     connect(url, onMessageReceived) {  
//         this.connection = new signalR.HubConnectionBuilder()
//             // 地址
//             .withUrl(url, { /*如果你使用 JWT 或其他身份验证，可以在这里设置 access token */ })
//             // 启用自动重连
//             .withAutomaticReconnect()
//             // 设置日志级别
//             .build();  
        
//         // 启动连接  
//         this.connection.start().catch(err => console.error(err.toString()));  

//         // 绑定消息接收处理  
//         this.connection.on('ReceiveMessage', onMessageReceived);

//     },  
    
//     // 发送消息到SignalR Hub  
//     send(methodName, message) {  
//         if (this.connection && this.connection.connected) {  
//             this.connection.invoke(methodName, message).catch(err => console.error(err.toString()));  
//         }  
//     },  
    
//     // 断开连接  
//     disconnect() {  
//         if (this.connection && this.connection.connectionId) {  
//             this.connection.stop();  
//             this.connection = null;  
//         }  
//     },  
// };
// export default SignalRService;

index.vue

<template>
    <div ref="dynamic" class="el-content">
        <el-button type="primary" @click="handleSend">发送</el-button>
    </div>
</template>
  
<script>
    import SignalRService from '@/utils/signalr';
    export default {
        components: { },
        data() {
            return {
                // signalR连接
                signalRService: new SignalRService(),
            }
        },
        created() {
            // 连接signalr
            this.signalRService.connect('http://your-signalr-url/chat', this.handleMessage);
        },
        mounted() {},
        beforeDestroy() {
            // 断开signalr
            this.signalRService.disconnect();
        },
        methods: {
            // 接收signalR消息
            handleMessage(data) {
                console.log(data);
            },
            // 发送消息
            handleSend () {
                this.signalRService("SendMessage", "Hello from Vue!")
            },

        }
    }
</script>
  
<style lang="scss" scoped>
</style>