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

相关推荐
爱吃烤鸡翅的酸菜鱼19 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我27 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子32 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
心情好的小球藻1 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json
Y4090011 小时前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
DanB241 小时前
html复习
javascript·microsoft·html
古月-一个C++方向的小白6 小时前
C++11之lambda表达式与包装器
开发语言·c++
沐知全栈开发7 小时前
Eclipse 生成 jar 包
开发语言
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf