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