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是否关闭,如果关闭,就去开始计数,然后调用警告声音和弹框。文章来源:https://www.toymoban.com/news/detail-681707.html
在弹框这里,需要去让弹框不自动消失,而是触发关闭onclose函数,关闭弹框的时候,也就关闭告警的声音。
文章来源地址https://www.toymoban.com/news/detail-681707.html
到了这里,关于npm stomp.js 的消息断连报警的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!