网页端HTML使用MQTTJs订阅RabbitＭＱ数据
最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中，在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。
需求：做一个统一日志系统可以查看日志列表和一个可以订阅最新日志的页面。通过提供一个封装好日志记录方法的sdk文件将日志统一收集。
通过上面的需求进行我们使用RabbitＭＱ+Mongodb来实现系统。
使用Ｃ#封装一个ＳＤＫ大家都会这里就不说了。Ｃ#连接RabbitＭＱ示例代码也是一堆堆的也没什么好说的。下面重点说一下网页端如何使用JS去订阅RabbitＭＱ收到的最新日志信息。
后端都是使用RabbitＭＱ的ＡＭＱＰ协议，而前端要求在网页HTML上显示数据。我们选择了使用ＭＱＴＴ协议从RabbitＭＱ中订阅数据。
具体步骤：
１、先准备好相关JS库。ＭＱＴＴ有一个叫browserMqtt.js看名字就知道是为浏览器提供的JS库。还有一个封装了操作MQ的JS库 mqfactory.js。最后还要一个jquery.js文件。这样工具就准备好了。JS文件下载
２、ＨＴＭＬ端代码。
<script type="text/javascript" src="~/js/MqJs/jquery.js"></script>
<script type="text/javascript" src="~/js/MqJs/browserMqtt.min.js"></script>
<script type="text/javascript" src="~/js/MqJs/mqfactory.js"></script>
<body><div><lable>Host: </lable><input id="txtHost" placeholder="192.168.1.88" value="10.1.0.7" /><br /><lable>Port: </lable><input id="txtPort" placeholder="15675" value="15675" /><br /><label>UserName: </label><input id="txtUserName" placeholder="username" value="admin" /><br /><label>Password: </label><input id="txtPassword" placeholder="password" value="admin" /><br /><label>Protocol: </label><input id="txtProtocol" placeholder="ws" value="ws" /><br /><input id="btnConnect" type="button" value="Connect RabbitMQ" /></div><div><input id="btnSubscribe" type="button" value="Subscribe" /><input id="btnPublish" type="button" value="Publish" /><br /><input id="btnSSHuanjing" type="button" value="Subscribe Huanjing" /><input id="hdnIsSubscribed" type="hidden" value="" /><input id="btnPubHuanjing" type="button" value="Publish Huanjing"><br />路由:<input id="btnRoutingKey" type="text" value="Dcon/Logs/Client"><br /><input id="txtMessage" type="text" placeholder="Please enter message" /></div><div><label>log:</label><br /><ul id="lstLog"></ul><input id="btnClearLog" type="button" value="Clear Log" /></div>
</body>
<script type="text/javascript">$(function () {var mqclient;//var routingKey = 'Dcon.Logs.ServerWebShow';var message;$('#btnSubscribe').attr('disabled', 'disabled');$('#btnPublish').attr('disabled', 'disabled');$('#btnSSHuanjing').attr('disabled', 'disabled');$('#btnPubHuanjing').attr('disabled', 'disabled');$('#btnConnect').click(function () {var mqttOpts = {host: (() => $('#txtHost').val())(),port: (() => $('#txtPort').val())(),username: (() => $('#txtUserName').val())(),password: (() => $('#txtPassword').val())(),//transformWsUrl方法用于在浏览器中使用MQTT的场景，默认情况下,MQTT自动生成的url为ws://ip:port形式，//然而服务器要求的格式是ws://ip:port/ws，所以MQTT提供了此接口用于在生成url时自定义url格式transformWsUrl: (url, opts, client) => { return opts.protocol && opts.protocol == 'ws' ? url + 'ws' : url; },clientId: (() => { return 'mqttjs_' + Math.random().toString(16).substr(2, 8); })()};var biz = {huanjing: function (handler, isOn) {if (isOn !== false) {this.ss(this.topics.huanjing, handler);} else {this.sus(this.topics.huanjing, handler);}},topics: {huanjing: '/hyj/huanjing/monitor'}};//系统初始化时注入连接选项mqfactory.inject(mqttOpts, biz);//创建mqclient单例 mqclient = mqfactory.create();//注册mqclient的连接成功事件mqclient.on('connect', mqconnected);});$('#btnSubscribe').click(function () {if ($(this).val() == 'Subscribe') {//订阅成功后，仅注册一次事件(要考虑每次注册事件时，事件处理器调用的次数，如果仅用一次，就用once方法)//routingKey = $("#btnRoutingKey").val();mqclient.once('onss', mqSubscribeSuccess);//简单订阅mqclient.ss($("#btnRoutingKey").val());} else {mqclient.once('onsus', mqUnsubscribeSuccess)mqclient.sus($("#btnRoutingKey").val());}});$('#btnPublish').click(function () {var msg = $('#txtMessage').val().length > 0 ? $('#txtMessage').val() : guid();if (message === msg) {msg = guid();}message = msg;$('#txtMessage').val(message);//发送消息mqclient.pub($("#btnRoutingKey").val(), message);$('#lstLog').append('<li>Send Message: ' + message + '</li>');});$('#btnSSHuanjing').click(function () {if ($(this).val() == 'Subscribe Huanjing') {mqclient.once('onss', mqHJSubscribeSuccess);mqclient.huanjing(onHuanjingMessageArrived);} else {mqclient.once('onsus', mqHJUnsubscribeSuccess);mqclient.huanjing(onHuanjingMessageArrived, false);}});$('#btnPubHuanjing').click(function () {var msg = $('#txtMessage').val().length > 0 ? $('#txtMessage').val() : guid();if (message === msg) {msg = guid();}message = msg;$('#txtMessage').val(message);//发送消息mqclient.pub(mqclient.topics.huanjing, message);$('#lstLog').append('<li>Send Huanjing Message: ' + message + '</li>');});$('#btnClearLog').click(function () {$('#lstLog').empty();});function mqconnected() {//alert("mqconnected");$('#btnSubscribe').removeAttr('disabled');$('#btnPublish').removeAttr('disabled');$('#btnSSHuanjing').removeAttr('disabled');$('#btnPubHuanjing').removeAttr('disabled');$('#lstLog').append('<li>mqclient connected</li>');}function mqSubscribeSuccess() {//订阅成功，就注册接受消息的方法，此处要接收多次，因此使用了onmqclient.on($("#btnRoutingKey").val(), onMessageArrived);$('#btnSubscribe').val('Unsubscribe');$('#lstLog').append('<li>Subscribe successful.' + $("#btnRoutingKey").val()+'</li>');}function mqUnsubscribeSuccess() {//注销订阅，所以将事件处理器解除绑定mqclient.off($("#btnRoutingKey").val(), onMessageArrived);$('#btnSubscribe').val('Subscribe');$('#lstLog').append('<li>Unsubscribe successful</li>');}function mqHJSubscribeSuccess() {$('#btnSSHuanjing').val('Unsubscribe Huanjing');$('#lstLog').append('<li>Hanjing Subscribe successful</li>');}function mqHJUnsubscribeSuccess() {$('#btnSSHuanjing').val('Subscribe Huanjing');$('#lstLog').append('<li>Huanjing Unsubscribe successful</li>');}function onMessageArrived(message) {$('#lstLog').append('<li>Receive message: ' + new Date().toString() + ' ' + message.toString() + '</li>');}function onHuanjingMessageArrived(message) {$('#lstLog').append('<li>Receive Huanjing message: ' + new Date().toString() + ' ' + message.toString() + '</li>');}function guid() {function s4() {return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);}return s4() + s4() + '-' + s4() + '-' + s4() + '-' +s4() + '-' + s4() + s4() + s4();}});
</script>３.后端代码：
３.１客户端sdk代码
/// <summary>/// 写日志/// </summary>/// <param name="model"></param>public static void Write(LogModel model){//判断写入的日志级别if (model != null && model.LogLevel >= LogLevel){try{var mqMsg = new MqMessage(){MessageBody = JSON.Serialize(model),MessageRouter = SystemConst.RoutingKeyTopic.LogTopic_Producer};//MQHelper.Instance.ProducerMessage_Fanout(mqMsg);MQHelper.Instance.ProducerMessage_Topic(mqMsg);}catch (Exception ex){var errorLog = string.Format("Ip:{0},LogHelper.Write方法异常,{1}", IpHelper.LocalHostIp, ex.Message);//MQHelper.Instance.ProducerMessage_Fanout(new MqMessage() { MessageBody = errorLog });MQHelper.Instance.ProducerMessage_Topic(new MqMessage() { MessageBody = errorLog });}}}３.２后端ＭＱ代码：
#region 主题 交换机/// <summary>/// 生产者 客户端调用/// </summary>/// <param name="msg"></param>public void ProducerMessage_Topic(MqMessage msg){try{using (var connection = factory.CreateConnection()){using (var channel = connection.CreateModel()){var body = Encoding.UTF8.GetBytes(msg.MessageBody);channel.BasicPublish(exchange: SystemConst.MqName_LogMq_TopicDefault,routingKey: msg.MessageRouter,basicProperties: null,body: body);Console.WriteLine(" [x] Sent {0}", msg.MessageBody);}}}catch (Exception ex){var exMsg = ex.Message;}}/// <summary>/// 消费者 服务器接收并写入数据库/// 消费方法无法通过参数传入/// EventHandler<BasicDeliverEventArgs> received/// </summary>public void ConsumeMessage_Topic(params string[] routingKeys){if (routingKeys == null || routingKeys.Length == 0){throw new Exception("请指定接收路由");}using (var connection = factory.CreateConnection()){using (var channel = connection.CreateModel()){var queueName = channel.QueueDeclare().QueueName;//获得已经生成的随机队列名//对列与交换机绑定foreach (var rKey in routingKeys){channel.QueueBind(queue: queueName,exchange: SystemConst.MqName_LogMq_TopicDefault,routingKey: rKey);}var consumer = new EventingBasicConsumer(channel);//绑定消费方法consumer.Received += consomer_Received_Topic;//绑定消费者channel.BasicConsume(queue: queueName,autoAck: true,consumer: consumer);Console.WriteLine("日志订阅服务启动成功.");Console.WriteLine(" Press [enter] to exit.");Console.ReadLine();}}}/// <summary>/// 接收通知服务异步的推送/// </summary>/// <param name="sender"></param>/// <param name="e"></param>void consomer_Received_Topic(object sender, BasicDeliverEventArgs e){var body = e.Body;var message = Encoding.UTF8.GetString(body);Console.WriteLine(" [x] {0}", message);
//这里可以增加写入数据库的代码}#endregion３.３路由
/// <summary>/// 主题路由/// </summary>public class RoutingKeyTopic{/// <summary>/// 生产者/// </summary>public const string LogTopic_Producer = "Dcon.Logs.Client";/// <summary>/// 消息者_日志服务_保存日志/// </summary>public const string LogTopic_Consume_Server_SaveDB = "Dcon.Logs.*";/// <summary>/// 消息者_日志服务_Web显示日志/// </summary>public const string LogTopic_Consume_Server_WebShow = "Dcon.Logs#";//".Logs.Client";/// <summary>/// 消息者_日志服务_Web显示日志/// </summary>public const string LogTopic_Consume_Server_WebShow_T = "*.Logs.Client";//".Logs.Client";/// <summary>/// 消息者_日志服务_ # 接收所有/// </summary>public const string LogTopic_Consume_Server_All = "#";//".Logs.Client";}}注意点：
１、ＭＱＴＴ的路由是以 / 来分割的。在RabbitＭＱ中会被转义成 . 如示例中的路由Dcon/Logs/Client会被转换成 Dcon.Logs.Client
２、网页端接收时的路由要和发送端的路由一至。也就是说 后端用 Dcon.Logs.Client 来推数据前端就要使用 Dcon/Logs/Client来接收数据。
３、ＭＱＴＴ路由不支持通配符.
４、由于ＭＱＴＴ的ＪＳ库没有提供Topic交换机与路由绑定功能。所以前端接收时 不能设置订阅主题交换机名称。如果要和amqp交互只能使用amqp的默认主题交换机名称 amq.topic
运行效果图：
相关文章：
网页端HTML使用MQTTJs订阅RabbitＭＱ数据
最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中，在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。 需求：做一个统一日志系统可以查看日志列表和一个可…...
课题学习(二十一)----姿态更新的四元数算法推导
声明：本人水平有限，博客可能存在部分错误的地方，请广大读者谅解并向本人反馈错误。 最近需要使用AEKF对姿态进行结算，所以又对四元数进了深入的学习，本篇博客仅对四元数进行推导，后续会对基于四元数的…...
NL2SQL进阶系列(5)：论文解读业界前沿方案（DIN-SQL、C3-SQL、DAIL-SQL、SQL-PaLM）、新一代数据集BIRD-SQL解读
NL2SQL进阶系列(5)：论文解读业界前沿方案（DIN-SQL、C3-SQL、DAIL-SQL）、新一代数据集BIRD-SQL解读 NL2SQL基础系列(1)：业界顶尖排行榜、权威测评数据集及LLM大模型（Spider vs BIRD）全面对比优劣分析[Text2…...
双指针运用：删除重复元素、移除元素
26.删除重复元素 题目描述 给你一个 非严格递增排列 的数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元…...
什么是三高架构
三高架构是指在软件系统设计与开发中，注重解决高并发性、高可用性和高性能的架构设计模式。 高并发性：指系统能够处理大量并发请求的能力。在高并发场景下，系统需要具备有效的并发处理机制，以保证系统能够快速、准确地响应大量并…...
Unity 对APK签名
关键代码 PS D:\UnityProject\YueJie> jarsigner -verbose -keystore D:\UnityProject\YueJie\user.keystore -signedjar D:\UnityProject\YueJie\meizuemptyapk-release-signed.apk D:\UnityProject\YueJie\MeizuEmpty-release-unsigned.apk 1 示例 # jarsigner的命令格…...
合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测等应用
合成孔径雷达干涉测量（Interferometric Synthetic Aperture Radar, InSAR）技术作为一种新兴的主动式微波遥感技术，凭借其可以穿过大气层，全天时、全天候获取监测目标的形变信息等特性，已在地表形变监测、DEM生成、滑坡…...
QT进阶------------------QPushButton(快速添加按钮与使用)
1、解决如何快速的添加按钮 在qt中，通常我们喜欢一个按钮添加一个信号与槽，但是这样写太过浪费时间。要是多个按钮那不是要写30个信号与槽，说实话，我不太喜欢这样。 在ui中，只要拖动按钮，会自动生成按钮的名…...
Vue项目管理器创建项目
黑马程序员JavaWeb开发教程 文章目录 1、创建新项目2、详情3、预设4、功能5、配置6、是否保存为预设模板7、正在创建项目8、创建完成 1、创建新项目 2、详情 3、预设 选择手动，点击下一步 4、功能 只需要额外选择一项–Router 即可，其余的保持默认&a…...
PHP-extract变量覆盖
[题目信息]： 题目名称题目难度PHP-extract变量覆盖1 [题目考点]： 变量覆盖指的是用我们自定义的参数值替换程序原有的变量值，一般变量覆盖漏洞需要结合程序的其它功能来实现完整的攻击。 经常导致变量覆盖漏洞场景有：$$&#x…...
研究表明，全球互联网流量竟有一半来自机器人
据Cyber News消息，Thales Imperva Bad Bot近期做了一份报告，显示在2023年有49.6%的互联网流量竟来自机器人，比上一年增长 2%，达到自2013年以来观察到的最高水平。 报告称，这一趋势正对企业组织产生负面影响，…...
橡胶衬板的更换与安装
橡胶衬板的更换与安装 橡胶衬板作为一种重要的工业材料，广泛应用于各种设备和机器中，以提供减震、防滑、耐磨等功能。然而，随着时间的推移和使用频率的增加，橡胶衬板可能会磨损或老化，需要及时更换和安装。本文将介绍…...
Compose 简单组件
文章目录 Compose 简单组件TextText属性使用AnnotatedStringSpanStyleParagraphStyle SelectionContainer 和 DisableSelectionClickableText TextFieldTextField属性使用OutlinedTextFieldBasicTextFieldKeyboardOptions 键盘属性KeyboardActions IME动作 ButtonButton属性使用…...
第十一届蓝桥杯省赛真题（C/C++大学B组）
目录 试题A ：门牌制作 试题B ：既约分数 试题C ：蛇形填数 试题D ：跑步训练 试题E ：七段码 试题F ：成绩统计 试题G ：回文日期 试题H ：字串分值 试题I ：平面切分&a…...
Qt 实战（2）搭建开发环境 | 2.1、Windows下安装QT
一、Windows下安装QT 1、QT官网 QT官网：https://download.qt.io/，打开官网地址，如下： 目录结构介绍 目录说明snapshots预览版，最新的开发测试中的 Qt 库和开发工具onlineQt 在线安装源official_releases正式发布版&am…...
校园通用型发生网络安全事件解决方案
已知校园多教学楼、多教学机房、非标网络机房缺乏防护设备、检测设备、安全保护软件(杀软) 切断所有外网，断网理！！！！！！！！！！！…...
数通HCIE考试分享：考前心态很重要，心情放松好过一次练习
誉天数通HCIE晚班火热预约中！真机实验考前辅导备考资料，名师保驾护航，助你稳定通关！识别二维码，即可获取免费试听名额！ 备考阶段 我是去年10月底完成了笔试考试，在笔试之前就将PY的课程过了一遍…...
GVRP协议与动态、静态vlan
一、GVRP协议使用场景 1、当实际组网复杂到网络管理员无法短时间内了解网络的拓扑结构，或者是整个网络的VLAN太多时，工作量会非常大，而且非常容易配置错误。在这种情况下，用户可以通过GVRP的VLAN自动注册功能完成VLAN的配置。 2、…...
shell脚本启动jar包
1、启动脚本的命令start.sh # 设置jar包名称 JAR_NAME"ruoyi-admin.jar" # 使用pgrep查找jar包名称的进程，如果存在，返回0（表示找到了进程） if pgrep -f "$JAR_NAME" >/dev/null thenecho "Jar进程已…...
qt 元对象系统及属性系统
Qt元对象系统(QMetaObject) Qt 的元对象系统叫 Meta-Object-System，提供了对象之间通信的信号与槽机制、运行时类型信息和动态属性系统。即使编译器不支持RTTI（RTTI的实现耗费了很大的时间和存储空间，这就会降低程序的性能）&…...
2024年MathorCup数学建模A题移动通信网络中PCI规划问题解题文档与程序
2024年第十四届MathorCup高校数学建模挑战赛 A题 移动通信网络中PCI规划问题 原题再现： 物理小区识别码(PCI)规划是移动通信网络中下行链路层上，对各覆盖小区编号进行合理配置，以避免 PCI 冲突、PCI 混淆以及 PCI 模3 千扰等现象。PCI 规划…...
Learn something about front end——颜色
好装的标题啊哈哈哈哈哈哈 最近get了一个学习前端的网站叫FreeCodeCamp 原色：rgb三个值的其中一个值拉满，比如说rgb(255,0,0)是红色这样，三个主色： 红色 rgb(255, 0, 0) #FF0000绿色 rgb(0, 255, 0) #00FF00蓝色 rgb(0, 0, …...
各大厂都推出鸿蒙APP了，你就一定要学习一下鸿蒙APP测试了！
2023年8月，华为推出鸿蒙4.0，由于其广泛的用户基础和品牌传播力，在短短几个月的时间，使用鸿蒙4.0系统的设备就达到千万级别，并且在9月份发售Mate 6之后，还在装机量的增长更加迅猛。 基于此，11月…...
ppt里的音乐哪里来的？
心血来潮，想照着大神的模板套一个类似于快闪的ppt。 ppt里是有一段音乐的，那段音乐就是从幻灯片第二页开始响起的。 但是我就找不到音乐在哪。 甚至我把ppt里的所有素材都删除了，再看动画窗格，仍然是空无一物，显然&…...
【算法】标签算法及其运作流程
标签算法 1. 标签算法及其运作流程2. 标签算法主要有哪些？3.用python语言举例实现聚类 1. 标签算法及其运作流程 标签算法是一种用于自动为数据或文本内容添加标签或分类的算法。这些标签可以帮助组织、检索和理解数据，是信息管理和数据挖掘中的重要工具…...
【数据结构】习题之链表的回文结构和相交链表
👑个人主页：啊Q闻 🎇收录专栏：《数据结构》 🎉前路漫漫亦灿灿 前言 今日的习题是关于链表的，分别是链表的回文结构和相交链表的判断。 链表的回文结构 题目为：链表的回文结…...
5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax
实现New 首先创建一个新的空对象设置原型，将对象的原型设置为函数的prototype对象让函数的this指向这个对象，执行构造函数的代码判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类…...
WPF 跨线程-Dispatcher：详解与示例
在 WPF 应用程序中，UI 线程负责处理用户界面元素的所有操作，例如绘制、布局和事件处理。由于 WPF 控件是线程敏感的，只能在 UI 线程上访问它们。如果我们想在后台线程中执行 UI 操作，我们就需要使用 Dispatcher 来确保这些操作在正…...
[c++][netcdf]通过c\c++读取字段的scale_factor与add_offset
函数：c void readScaleAndOffset(const char* FileName,const char* VarName) {NcFile dataFile(FileName, NcFile::read);NcVar Varf dataFile.getVar(VarName);//查看维度cout << "XSizef" << Varf.getDim(0).getSize() << endl;co…...
技术速递｜.NET 智能组件简介 – AI 驱动的 UI 控件
作者：Daniel Roth 排版：Alan Wang AI 的最新进展有望彻底改变我们与软件交互和使用软件的方式。然而，将 AI 功能集成到现有软件中可能面临一些挑战。因此，我们开发了新的 .NET 智能组件，这是一组真正有用的 AI 支持的 …...
网站后台管理系统的重要技术指标/宁波网站优化公司推荐
JAVA课程设计实验报告课 程 名 称 Java语言程序设计班 级 10计算机1班姓 名 赵阳阳学 号指 导 教 师 乐毅报告提交日期 2012年5月8日简易迷宫系统的设计与实现一、课程设计的目的为了培养学生结构化程序设计的思想，加深对JAVA语言基本语言要素和控制结构的理解与运用…...
wordpress修改搜索框全屏/b站推广入口2023mmm无病毒
进行原始的SQL查询 在模型查询API不够用的情况下，你可以使用原始的SQL语句。Django 提供两种方法使用原始SQL进行查询：一种是使用Manager.raw()方法，进行原始查询并返回模型实例；另一种是完全避开模型层，直接执行自定义…...
注重网站建设 把好宣传思想关口/怎样优化网站关键词排名靠前
一、数据成员 termios 函数族提供了一个常规的终端接口，用于控制非同步通信端口。 这个结构包含了至少下列成员：tcflag_t c_iflag; /* 输入模式 */tcflag_t c_oflag; /* 输出模式 */tcflag_t c_cflag; /* 控制模式 */tcflag_t c_lflag; …...
做电影网站怎么赚钱/浙江百度推广
replaceStatesessionStorage解决页面刷新后原先在Vuex中的state丢失的问题（状态丢失） 文件目录 利用 pagehide 事件在用户刷新页面时将vuex的store存入sessionstorage中，然后在页面加载时，从sessionstorage中获取，rep…...
Wordpress建站用什么系统/网站手机版排名seo
MySQL常用操作之备份表结构及表数据场景描述报错信息原因分析解决方案参考链接场景描述 简介 生产上进行数据变更时，经常担心会对已有数据误操作，一般会先进行备份，这里记录一次MySQL备份失败解决过程。 报错信息 描述 -- 备份语句CREATE T…...
查网站是什么公司做的/百度上海分公司地址
主要内容：使用JDBC访问数据库中数据（Java Web数据可视化案例） 文章目录前期准备：案例：第一步：创建数据库及数据第二步：编写实体类第三步：编写Dao类第四步：编写Servlet代码…...