npm stomp.js 的消息断连报警

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

代码如下：

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

<template> 
<audio controls="controls" hidden :src="getAudioUrl()"  id="alertAudio" ></audio>
</template>

<script>
methods:{
    getAudioUrl(name){
        return new URL(`../../assets/audio.mp3}`, import.meta.url).href
    },
}
</script>

在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函数，关闭弹框的时候，也就关闭告警的声音。