使用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 @ 2023-05-18 18:20  DL·Coder  阅读(1797)  评论(0编辑  收藏  举报