【vue+ stompjs接收rabbitMQ消息（断连重连mq问题】-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue+ stompjs接收rabbitMQ消息（断连重连mq问题】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：stompjs断连重连后一直连接不上，一直Opening web Socket …

原因：一个实例只能connect一次，重新new 对象

stompjs源码片段：（stompjs文档）

【vue+ stompjs接收rabbitMQ消息（断连重连mq问题】,vue,vue.js,rabbitmq,前端

函数内部new Client返回新的一个对象，Stomp.over(ws)执行一次就是一个新对象

vue+stompjs接收mq消息完整代码文章来源地址https://www.toymoban.com/news/detail-522546.html


<template>
  <div></div>
</template>

<script>
import Stomp from "stompjs"
export const MQTT_SERVICE = location.protocol === 'https:'
 ? 'wss://xxx/ws'
 : 'ws://xxx:15674/ws' // mqtt服务地址(https需要用wss协议)
export const MQTT_USERNAME = 'xxx' // mqtt连接用户名
export const MQTT_PASSWORD = 'xxx' // mqtt连接密码
export default {
  data() {
    return {
      client: Stomp.client(MQTT_SERVICE),
    };
  },
  created() {
    this.connect();
  },
  methods: {
    onConnected: function(frame) {
      this.client.heartbeat.outgoing = 20000;
	  this.client.heartbeat.incoming = 0;
      console.log("Connected: " + frame);
      //订阅事件
      const event = "xxx"; //topic
      this.client.subscribe(event, this.responseCallback);
      //订阅状态
      const sataus = "xxx"; //topic
      this.client.subscribe(sataus, this.responseCallback);
    },
    onFailed: function(frame) {
      console.log("MQ Failed: " + frame);
      //******需要加下列代码才能重新new 对象连接
      this.client = Stomp.client(MQTT_SERVICE); //一个实例只能connect一次，得new个新的实例才可能进行新的connect
      Stomp.over(this.client);
      //失败重连
      this.connect();
    },
    responseCallback: function(frame) {
      //接收消息处理
      console.log("MQ msg=>" + frame.body);
      if (frame.body){
      	//...逻辑处理
      }
    },
    connect: function() {
      //初始化mqtt客户端，并连接mqtt服务
      const headers = {
        login: MQTT_USERNAME,
        passcode: MQTT_PASSWORD,
        host: 'xxx'
      };
      this.client.connect(headers, this.onConnected, this.onFailed);
    },
  },
};
</script>