使用sockjs-client 和 @stomp/stompjs 创建socket,断线重连机制

import SockClient from 'sockjs-client'
const Stomp = require('@stomp/stompjs')


// 方法
   createStompClient() {
      const that = this
      const ws = new SockClient(`/socket/api/socket-mq?access_token=${getToken()}`)
      this.stompClient = Stomp.Stomp.over(ws)

      // 订阅连接完成事件
      this.stompClient.connect(this.configData.mqUserName, this.configData.mqPassword, () => {
        console.log('【MQ】:on_connect')
        that.clientOnConnectHandle()
      },(err) => {
        console.log('【MQ】:on_error', err)
      }, (val) => {
        console.log('【MQ】:on_close', val)
        that.clientOnDisconnectHandle()
      })

      // 订阅连接断开事件
      // this.client.debug = this.clientOnDebugHandle
      // this.client.onDisconnect = this.clientOnDisconnectHandle
      // this.client.onWebSocketError = this.clientOnWebSocketErrorHandle
      // this.client.onStompError = this.clientOnStompErrorHandle

    },

    // socket 已经连接,发送订阅
    clientOnConnectHandle() {
      this.subscription = this.stompClient.subscribe(`/exchange/ExEventAnalysis/EventAgentInfo.${this.agentConfig.agentId.slice(0,6)}.${this.agentConfig.agentId}`,(msg)=>{
        let msgTool = JSON.parse(msg.body)
        if (msgTool.messageID === 'EventAgentInfo') {
          this.$store.commit('commitData', {
            name: 'staticObj',
            data: msgTool
          })
        }
      })
    },

    // 订阅连接断开事件
    clientOnDisconnectHandle() {
      const that = this
      console.log('【MQ】:连接断开!');
      that.closeStompClient();  // 先关闭之前的socket连接
      this.reload = window.setTimeout(() => {
        that.createStompClient();  // 再重新创建一个新的socket连接
        window.clearTimeout(that.reload)
      }, 2000);
    },

    // 清除订阅
    unsubscribe() {
      if(this.subscription) {
        this.subscription.unsubscribe();
        this.subscription = null;
      }
    },

    // 关闭之前的socket连接
    closeStompClient() {
      if(this.stompClient) {
        this.unsubscribe()
        this.stompClient = null;  // 清空stompClient对象
      }
    },

    clientOnDebugHandle(str) {
      console.log(`【MQ】:${str}`)
    },
    
    clientOnWebSocketErrorHandle(err) {
      console.log(`【MQ - WebSocket异常】:${err}`)
    },

    clientOnStompErrorHandle(receipt) {
      console.log(`【MQ - Stomp异常】:${receipt}`)
    },
posted @   DL·Coder  阅读(2228)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示