首页 > 其他分享 >Active MQ直接与前端通信

Active MQ直接与前端通信

时间:2024-11-07 10:40:59浏览次数:1  
标签:function mqClient console 前端 var MQ Active topicName msg

var mqClient;
var mqSubscribeIDObj = { scada: "scada" };

var connectCallback = function (msg) {
  for (let topicName in mqSubscribeIDObj) {
    addSubscribeTopic(topicName);
  }
  console.log("websocket is connected");
  updateAMQStatusLight("connect");
};

var errorCallback = function (errMsg) {
  console.log("websocket error");
  updateAMQStatusLight("error");
};

var disconnectCallback = function (msg) {
  console.log("websocket is closed");
  updateAMQStatusLight("disconnect");
};

var checkConnectionInterval = setInterval(function () {
  if (mqClient == undefined) {
    conActiveMQ();
  } else if (mqClient.ws.readyState == mqClient.ws.CONNECTING) {
    console.log("ActiveMQ websocket is connecting");
    updateAMQStatusLight("reconnect");
  } else if (mqClient.ws.readyState == mqClient.ws.CLOSED) {
    // show notification
    showToast(
      "ActiveMQ websocket is disconnected and reconnection is attempting...",
      "error"
    );

    // disconnect activeMQ
    updateAMQStatusLight("disconnect");
    mqClient.ws.close();
    for (let topicName in mqSubscribeIDObj) {
      mqClient.unsubscribe(mqSubscribeIDObj[topicName]);
    }
    mqClient.disconnect();

    // reconnect activeMQ
    conActiveMQ();
  }
}, 500);

// connect activeMQ - using websocket
function conActiveMQ() {
  var hostname = window.location.hostname
    ? window.location.hostname
    : "127.0.0.1";
  var url = `ws://${hostname}:61614`;
  var login = "admin";
  var passcode = "admin";

  mqClient = Stomp.client(url);
  mqClient.heartbeat.outgoing = 3000;
  mqClient.heartbeat.incoming = 3000;
  mqClient.reconnect_delay = 500;

  mqClient.connect(login, passcode, connectCallback, errorCallback);
  // mqClient.connect(login, passcode, connectCallback, errorCallback, disconnectCallback);
}

// subscribe topic
function addSubscribeTopic(topicName) {
  const destination = `/topic/${topicName}`;

  let mqSubscribeID = mqClient.subscribe(destination, function (msg) {
    var jsonObj = JSON.parse(msg.body);
    debugger
    if (topicName.includes("_ALARM")) {
      alarm(jsonObj);
    } else {
        TagValueOperation(jsonObj);
    }
  });

  mqSubscribeIDObj[topicName] = mqSubscribeID;
  console.log(`Subscribe Topic: ${topicName}`);
}

// unsubscribe topic
function removeSubscribeTopic(topicName) {
  let id = mqSubscribeIDObj[topicName];
  mqClient.unsubscribe(id);

  delete mqSubscribeIDObj[topicName];
  console.log(`Unsubscribe Topic: ${topicName}`);
}

// send msg to ActiveMQ Topic - REST API
function sendTopicMsg(TopicName, msg) {
  var clientId = "user";
  $.ajax({
    url: `/mq/${TopicName}?type=topic&clientId=${clientId}`,
    type: "POST",
    async: true,
    data: { body: JSON.stringify(msg) },
    success: function () {
      console.log(`Message has been sent to Topic: ${TopicName}`);
    },
  });
}

// send msg to ActiveMQ Queue - STOMP WebSocket, REST API
function sendQueueMsg(QueName, msg) {
  // send msg to ActiveMQ queue - STOMP WebSocket
  // var destination = `/queue/${QueName}`;
  // mqClient.send(destination, {}, JSON.stringify(msg));
  // console.log(`Message has been sent to Queue: ${QueName}`);

  // send msg to activeMQ queue - REST API
  var clientId = "user";
  $.ajax({
    url: `/mq/${QueName}?type=queue&clientId=${clientId}`,
    type: "POST",
    async: true,
    data: { body: JSON.stringify(msg) },
    success: function () {
      console.log(`Message has been sent to Queue: ${QueName}`);
    },
  });
}

// receive msg from activeMQ (queue) - REST API
function recvQueueMsg(QueName) {
  let clientId = "user";

  $.ajax({
    url: `/mq/` + QueName + `?type=queue&clientId=${clientId}`,
    type: "GET",
    success: function (data) {
      let jsonData = JSON.parse(data);
      console.log("get queue message from ActiveMQ");
    },
  });
}


标签:function,mqClient,console,前端,var,MQ,Active,topicName,msg
From: https://www.cnblogs.com/duixue/p/18531718

相关文章

  • 简述大前端技术栈的渲染原理
    作者:京东物流卢旭大前端包括哪些技术栈大前端指的是涵盖所有与前端开发相关的技术和平台,应用于各类设备和操作系统上。大前端不仅包括Web开发,还包括移动端开发和跨平台应用开发,具体包括:•原生应用开发:Android、iOS、鸿蒙(HarmonyOS)等;•Web前端框架:Vue、React、Angular等;•......
  • ST表(RMQ问题)
    算法理解RMQ问题就是对与区间最值查询一类问题的总称对于RMQ问题的求解主要有以下两种方式:线段树,建树O(n),查询O(logn),支持在线修改ST表,预处理O(logn),查询O(1),不支持在线修改这个单元主要讲解的是ST表倍增思想考虑一个数必然能被拆分成二进制,所以我们先预处理出\(2^k\)......
  • 为什么前端打包出来的静态文件名字是一串 Hash 值 ?
    前端打包出来的静态文件名带有一串Hash值,主要是为了实现以下几个目的:缓存有效性:当文件内容发生变化时,Hash值也随之改变,这意味着浏览器能够识别文件的更新。如果文件内容没有变化,Hash值保持不变,浏览器可以从缓存中加载文件,节省网络带宽和提高加载速度。避免缓存问题:在......
  • 【前端基础】CSS高级
    目标:掌握定位的作用及特点;掌握CSS高级技巧我们想要布局页面:标准流flex可以让多个块级元素一样显示定位01-定位(重点)作用:灵活的改变盒子在网页中的位置实现:1.定位模式:position2.边偏移:设置盒子的位置leftrighttopbottom相对定位position:relative特点:不脱标......
  • 常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式
    目前的开发项目,准备明年的国产化,用了十年的自研系统借这个机会全部重写,订立更严格的规范,这里把返回格式及对应状态码记录一下。常见HTTP状态码及解释HTTP状态码用于表示客户端请求的响应状态,它们分为五类:2xx表示成功,3xx表示重定向,4xx表示客户端错误,5xx表示服务......
  • 个人练习前端技术使用Bootstrap、JQuery、thymeleaf
    说明:本代码只是为了本人练习前后端联动技术,包含html,jquery,thymeleaf模板、ajax请求及后端功能联动,方便自己查找及使用。@目录代码场景场景1.table批量查询功能(有默认值),点击"查询最新数据"从后台查询覆盖默认显示的数据场景2.新增,点击“新建”显示form表单,提交成功后隐藏form表......
  • RabbitMQ交换机类型
    RabbitMQ交换机类型1、RabbitMQ工作模型2、RabbitMQ交换机类型2.1、FanoutExchange(扇形)2.1.1、介绍2.1.2、示例2.1.2.1、生产者2.1.2.2、消费者2.1.2.3、测试2.2、DirectExchange(直连)2.2.1、介绍2.2.2、示例2.2.2.1、生产者2.2.2.2、测试2.3、TopicExchange(主题交......
  • RabbitMQ如何保证发送的消息可靠(RabbitMQ的Confirm模式和2.Return模式)
    RabbitMQ如何保证发送的消息可靠(RabbitMQ的Confirm模式和2.Return模式)1、RabbitMQ消息Confirm模式(保证从生产者到交换机的消息可靠)1.1、Confirm模式简介1.2、具体代码实现1.2.1、application.yml开启确认模式1.2.2、生产者方式1:实现RabbitTemplate.ConfirmCallback生产......
  • 前端自学(5)-使用Vue组件库element书写前端代码
    element是饿了么团队研发的,一套为开发者,设计师和产品经理提供的基于Vue2.0的桌面端组件库。官网:Element-网站快速成型工具有了element组件库,开发人员就可以通过CV(复制粘贴。)制作出精美的前端页面。下面是一个简单页面的示例,我将为大家演示如何制作一个这样的页面。1.首......
  • 为了降低前端开发可视化大屏难度,设计师能有什么作为呢
    一、引言在当今数字化时代,可视化大屏作为一种强大的数据展示和分析工具,被广泛应用于各个领域,如企业管理、智慧城市、金融科技等。然而,前端开发可视化大屏往往面临着诸多挑战,其开发难度较大,需要投入大量的时间和精力。在这个过程中,设计师扮演着至关重要的角色。那么,为了降低前......