记一次使用vue连接rabbitMq

devtools/2024/12/23 1:17:09/
  • 连接rabbitMq需要使用stompjs
  • npm i stompjs
    下下面是连接代码
import Stomp from 'stompjs'onConnected(frame) {// 绑定交换机exchange_pushmsg是交换机的名字rk_pushmsg是绑定的路由keyvar exchange = this.rabbitMqexchange || 'queue.device.zzzz'// 创建随机队列用上面的路由key绑定交换机,放入收到消息后的回调函数和失败的回调函数this.client.subscribe(exchange, this.responseCallback, this.onFailed)},onFailed(frame) {console.log(frame)},responseCallback(frame) {if (frame.body != '' && frame.body != null) {const formatter = (data, params) => {this.dataOldChart = data;if (typeof this.dataFormatter === 'function') {try {data = this.dataFormatter(data, params, this.getItemRefs());} catch (err) {console.log(new Error(err))data = err + ''}}this.handleCommonBind(data, -1, 'dataAfterFormatter')return data}console.log('-----[' + frame.body);let result = typeof frame.body == 'string' ? JSON.parse(frame.body) : frame.bodythis.dataChart = formatter(result, this.dataParams)setTimeout(() => { this.updateChart() }, 100)}},connect() {this.client = Stomp.client(this.rabbitMqUrl || 'ws://172.16.0.97:15670')// 填写你rabbitMQ登录的用户名和密码var headers = {'login': this.rabbitMqUser || '','passcode': this.rabbitMqPass || '',// 虚拟主机,默认“/”'host': this.rabbitMqHost || '/'}let safe = this// 创建连接,放入连接成功和失败回调函数this.client.connect(headers, this.onConnected, this.onFailed)this.client.debug = (message) => {console.log('对接:' + message)this.mqDockingMessage = message}},

后端端口一搬都是15670或者15672 、我们这后端就因为端口问题搞啦好久 一直以为是我的问题
我这里得dataChart 就是页面想要的数据、基本上代码都在这啦 直接this.connect()接可以啦
之后在关闭页面时断开if (this.client !== null) { this.client.disconnect(); // 关闭连接 }

虽然都是复制粘贴 、但是也是创作不易、结尾出给个小连接、如果你得后端不会rabbitMq抓紧让他看这个、-> 学学吧、别硬挺


http://www.ppmy.cn/devtools/59274.html

相关文章

网络协同新纪元:Eureka引领分布式网络管理革命

网络协同新纪元:Eureka引领分布式网络管理革命 在微服务架构的浪潮中,服务的分布式网络管理成为了确保系统稳定性和可扩展性的关键。Eureka,作为Netflix开源的服务发现框架,提供了服务注册与发现的核心功能,为分布式网…

Excel第31享:基于left函数的截取式数据裂变

1、需求描述 如下图所示,在“Excel第30享”中统计2022年YTD各个人员的“上班工时(a2)”,需要基于工时明细表里的“日期”字段建立辅助列,生成“年份”字段,本文说明“年份”字段是怎么裂变而来的。 下图为…

NewStarCTF 2023 week5--web

目录 Unserialize Again 法一:(非预期) 法二: Final Yes Pickle pppython? 4-复盘 Unserialize Again f12告诉了我们cookie, 查看一下,可以发现 pairing.php <?php highlight_file(__FILE__); error_reporting(0); class story{private $useradmin;public $p…

前端加密数据 后端java对应解密数据的方案

实现前端加密后端解密的数据传输方案可以分为以下步骤&#xff1a; 前端加密数据 在前端使用 JavaScript 或其他前端技术对需要传输的数据进行加密。常见的加密方式包括对称加密&#xff08;如AES&#xff09;和非对称加密&#xff08;如RSA&#xff09;。 使用AES对称加密示…

各地户外分散视频监控点位,如何实现远程集中实时监看?

公司业务涉及视频监控项目承包搭建&#xff0c;此前某个项目需求是为某林业公司提供视频监控解决方案&#xff0c;需要实现各地视频摄像头的集中实时监看&#xff0c;以防止国家储备林的盗砍、盗伐行为。 公司原计划采用运营商专线连接各个视频监控点位&#xff0c;实现远程视…

《0基础》学习Python——第十讲

小知识点补充 一、json大字符串 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它以易于阅读和编写的方式为基础&#xff0c;同时也易于解析和生成。因为其简洁性和可读性&#xff0c;JSON已成为数据交换的首选格式。 大字符…

Java 网络协议面试题答案整理,最新面试题

TCP和UDP的主要区别是什么? TCP(传输控制协议)和UDP(用户数据报协议)的主要区别在于TCP是面向连接的协议,而UDP是无连接的协议。这导致了它们在数据传输方式、可靠性、速度和使用场景方面的不同。 1、连接方式: TCP是面向连接的协议,数据传输前需要三次握手建立连接。U…

安卓学习中遇到的问题【bug】

安卓学习中遇到的问题 1Gradle下载慢怎么办&#xff1f; Gradle下载慢怎么办&#xff1f; distributionUrlhttps://mirrors.cloud.tencent.com/gradle/gradle-7.5-bin.zip 2 Could not resolve all files for configuration ‘:classpath‘. &#xff1e; Could not resolv…