网页端HTML使用MQTTJs订阅RabbitＭＱ数据

最新推荐文章于 2024-04-03 17:04:18 发布

VIP文章 weixin_30402085

最新推荐文章于 2024-04-03 17:04:18 发布

阅读量1.4k

点赞数 2

文章标签：大数据前端 javascript ViewUI

原文链接：http://www.cnblogs.com/stevenchen2016/p/7577793.html

版权

　　最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中，在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。

　　需求：做一个统一日志系统可以查看日志列表和一个可以订阅最新日志的页面。通过提供一个封装好日志记录方法的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 />
        <

最低0.47元/天解锁文章

weixin_30402085

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页端HTML使用MQTTJs订阅RabbitＭＱ数据

　　最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中，在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。　　需求：做一个统一日志系统可以查看日志列表和一个可以订阅最新日志的页面。通过提供一个封装好日志记录方法的sdk文件将日志统一收集。　　通过上面的需求进行我们使用RabbitＭＱ+Mongodb来实现...
复制链接

扫一扫