npm stomp.js 的消息断连报警

stomp.js的新版本是可以支持MQ断连后,自动重连,但是如果是直接物理断网了,那久无论如何都没有办法重连,为了不影响业务,可以实现一个MQ断连后,重连三次,然后还是连不上的话,就启动告警,让业务人员注意。

代码如下:

定义一个告警的audio控件,让它隐藏,最好是放在页面一直能访问的地方,头部,脚部的位置。要注意,如果要引用assets里面的多媒体文件,要使用动态引入的方式,不然没法引入成功。



在MQ监听器

import { Client } from '@stomp/stompjs';
//计数器
const errorNum = ref(0);
//播放的flag
const playFlag = ref(true)
//消息框
const elMessageRef = ref(null);
const clients = new Client({
   
    brokerURL: 'ws://0.0.0.1:1111', 
    connectHeaders: {
      login: 'admin123',
      passcode: 'admin123',
    },
    debug: function (str) {
       console.log(str);
    },
    reconnectDelay: 1000,
    heartbeatIncoming: 2000,
    heartbeatOutgoing: 2000,
});

clients.onConnect = function (frame) {
     const subscription = clients.subscribe('/topic/aa', consumerCallback); 
     let alertAudio = document.getElementById("Audio");
      alertAudio.pause();
      // 关闭告警消息框,使用的是elmessage.close()函数。
      elMessageRef.value.close();
      elMessageRef.value = null;
  };

clients.onWebSocketClose = function(frame){
  errorNum.value += 1; 
  if(errorNum.value== 3 && playFlag.value == true){
    elMessageRef.value = showErrorMessage();
    playSound();
    errorNum.value = 0
  }
};
// 让告警的声音响起来,
function playSound(){
  let alertAudio = document.getElementById("Audio");
  if(playFlag.value){
    alertAudio.play();
//让告警的声音一直循环播放
    alertAudio.addEventListener('ended', () => {
      alertAudio.currentTime = 0;
      alertAudio.play();
      });
  }else{
    alertAudio.pause();
  }
}

// 显示告警信息框
function showErrorMessage(){
 let msg =  ElMessage({
        showClose: true,
        duration:0,
        message: 'MQ断开了,请注意',
        type: 'error',
        onClose:()=>{
          elMessageRef.value = null;
          let alertAudio = document.getElementById("Audio");
          alertAudio.pause();
          playFlag.value = true;
        }
      });
      return msg
}

onConnect 函数就是连接成功,那就需要去让警告声音自动关闭。调用alertAudio.pause();并且将告警框销毁,elMessageRef.value.close()。

onWebSocketClose函数就是监听websocket是否关闭,如果关闭,就去开始计数,然后调用警告声音和弹框。

在弹框这里,需要去让弹框不自动消失,而是触发关闭onclose函数,关闭弹框的时候,也就关闭告警的声音。
 

你可能感兴趣的:(javascript,npm,开发语言,stomp.js,消息队列,MQ,vue)