npm stomp.js 的消息断连报警

这篇具有很好参考价值的文章主要介绍了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函数,关闭弹框的时候,也就关闭告警的声音。
 文章来源地址https://www.toymoban.com/news/detail-681707.html

到了这里,关于npm stomp.js 的消息断连报警的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于STOMP协议的WebSocket消息代理和相关的安全握手处理器以及消息拦截器

    这段代码是一个Spring配置类 WsChatConfig ,基于STOMP协议的WebSocket消息代理和相关的安全握手处理器以及消息拦截器。这个类通过实现 WebSocketMessageBrokerConfigurer 接口来定义WebSocket通信的路由、安全握手以及消息拦截的逻辑。 核心方法详解 configureMessageBroker(MessageBrokerRegistry confi

    2024年04月26日
    浏览(52)
  • WebSocket的那些事(5-Spring STOMP支持之连接外部消息代理)

    上节我们在 WebSocket的那些事(4-Spring中的STOMP支持详解) 中详细说明了通过 Spring内置消息代理 结合 STOMP 子协议进行Websocket通信,以及相关注解的使用及原理。 但是Spring内置消息代理会有一些限制,比如只支持STOMP协议的一部分命令,像 acks 、 receipts 命令都是不支持的,还有

    2024年02月09日
    浏览(41)
  • 微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:uniapp开发的小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 在static/js中新建stomp.js和websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代码如下: 位置:项目/pages/static/

    2024年02月11日
    浏览(60)
  • uniapp微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:原生微信小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 1.yarn add stompjs 2.版本 “stompjs”: “^2.3.3” 3.在static/js中新建websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代

    2024年02月11日
    浏览(44)
  • Spring Boot 3 + Vue 3 整合 WebSocket (STOMP协议) 实现广播和点对点实时消息

    🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页: Gitee 💫 Github 💫 GitCode 💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正! WebSocket是一种在Web浏览器与Web服务器之间建立双向通信的协议,而Spring Boot提供了便捷的WebSocket支持

    2024年02月02日
    浏览(48)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(58)
  • flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client

    flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client 在app中经常会使用长连接进行消息通信,这里记录一下基于websocket使用stomp协议的使用。 1.1 stomp介绍 stomp,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息的中间件

    2024年02月13日
    浏览(46)
  • Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果)

    在项目开发过程中,可能需要实现以下场景:未读消息提示、报警信息、消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示 下面分享一下这类效果的实现方法: 首先实现静态部分,需要一个容器,里面包含

    2024年02月10日
    浏览(51)
  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(49)
  • LiveGBS国标GB/T28181国标视频流媒体平台-功能报警告警订阅查询报警预案截图保存视频及REDIS消息订阅

    设备比如监控摄像头,配置了报警监测,触发了报警,如果设备支持GB28181报警消息上报,那么其注册的GB28181国标平台就会收到报警。针对报警消息,平台可以查询。根据报警预案进行相关的快照及视频录制触发。 LiveGBS的WEB后台-》报警查询 平台这边如果要正常的接收处理设

    2023年04月21日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包