JS HTML Web端使用MQTT通讯测试
VC MFC C++ MQTT VC编译MQTT VC调用MQTT dll eclipse-paho-mqtt
JS HTML Web端使用MQTT通讯测试
Android Studio MQTT 使用测试 eclipse.paho.mqtt
系统：windows10 64bit
开发工具：UEdit64
运行环境：360安全浏览器 12.1
测试工具：MQTTBox
一、编写简单布局
布局效果：
布局代码：
<body style="margin: 0 auto;"><div style="width: 500px;">服务器地址：<input style="float: right;width: 300px;" id="MQTT_ServerAdd" value="ws://www.passingworld.vip:8083/mqtt"></div> <div style="width: 500px;">心跳时间 ：<input style="float: right;width: 300px;" id="MQTT_ConnHeartbeatTime" value="30"></div> <div style="width: 500px;">用户名 ：<input style="float: right;width: 300px;" id="MQTT_UserName" value="admin"></div> <div style="width: 500px;">密码 ：<input style="float: right;width: 300px;" id="MQTT_PassWord" value="public"></div> <div> <button onclick="MQTT_ConnServer()">连接服务器</button> </div> <div style="margin-top: 20px;">订阅消息<input id="MQTT_Subscribe_Msg"> QoS<select id="MQTT_Subscribe_QoS"><option>0_Almost_Once</option><option>1_Atleast_Once</option><option>2_Exactly_Once</option></select> <button onclick="Add_MQTT_Subscribe()">添加订阅信息</button> </div><div style="margin-top: 20px;">订阅列表</div> <div><table style="padding: 1px;width: 700px;margin-top: 5px;" border="1"><tr style="background-color: #919191;"><td>订阅消息</td><td>QoS</td><td>操作</td></tr></table></div><div style="margin-top: 20px;">接收消息</div> <div><textarea id="textareaid" rows="5" cols="30" class="message1" style="width: 100%;height: 300px; min-height: 100px;"></textarea></div> <div> 发布点：<input id="MQTT_Publish_Text"> 发布消息：<input id="MQTT_Publish_Msg"> <button onclick="Send_MQTT_Msg()">发送消息</button> </div>
</body>二、编写JS代码
连接代码
function MQTT_Connect(serveradd,KeepAlive,UserName,PassWord) {//MQTT连接的配置MQTT_Options: {protocolVersion: 4; //MQTT连接协议版本clientId: 'miniTest22222';clean: false;keepalive: KeepAlive;password: UserName;username: PassWord;reconnectPeriod: 1000; //1000毫秒，两次重新连接之间的间隔connectTimeout: 10 * 1000; //1000毫秒，两次重新连接之间的间隔resubscribe: true; //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）};//开始连接MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options);MQTT_Client.on('connect',function (connack) {console.log('MQTT连接成功')})//服务器下发消息的回调MQTT_Client.on("message", function (topic, payload) {console.log(" 收到 topic:" + topic + " , payload :" + payload)var str = document.getElementById("textareaid").value;document.getElementById("textareaid").value = str + "\n"+"收到 topic:" + topic + " , payload :" + payload;})//服务器连接异常的回调MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回调" + error) })//服务器重连连接异常的回调MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回调") })//服务器连接异常的回调MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回调" + errr) })};订阅一个主题代码
MQTT_SubOne = function(Topic) {var ok = false;if (MQTT_Client && MQTT_Client.connected) {MQTT_Client.subscribe(Topic, function (err, granted) {if (!err) { console.log('订阅主题 ' + Topic + ' 成功') ok = true;}else { console.log('订阅主题 ' + Topic + ' 失败') ok = false;}})} else {console.log('请先连接服务器')ok = false;}return ok;};订阅多个主题代码
function MQTT_SubMany() {if (MQTT_Client && MQTT_Client.connected) {MQTT_Client.subscribe({ 'Topic1': { qos: 0 }, 'Topic2': { qos: 1 } }, function (err, granted) {if (!err) {console.log('订阅多主题成功')} else {console.log('订阅多主题失败')}})} else {console.log('请先连接服务器')}};发布消息代码
MQTT_PubMsg = function(Topic, Msg) {if (MQTT_Client && MQTT_Client.connected) {MQTT_Client.publish(Topic, Msg);console.log('发布成功->' + Topic + '->' + Msg)} else {console.log('请先连接服务器')}};取消订阅一个主题代码
function MQTT_UnSubOne(Topic) {if (MQTT_Client && MQTT_Client.connected) {MQTT_Client.unsubscribe(Topic);} else {console.log('请先连接服务器')}};取消订阅多个主题代码
function MQTT_unSubMany() {if (MQTT_Client && MQTT_Client.connected) {MQTT_Client.unsubscribe(['Topic1', 'Topic2']);} else {console.log('请先连接服务器')}};三、实验效果
JS HTML Web端使用MQTT通讯测试相关推荐
- websocket 发送图片_基于WebSocket的web端IM即时通讯应用的开发
基于WebSocket的web端IM即时通讯应用的开发 功能列表: 1.Web端的IM即时通讯应用 2.支持上线.下线.实时在线提醒 3.单聊.群聊的建立 4.普通文字.表情.图片的传输(子定义富文本 ...
- 聊一聊Web端的即时通讯
聊一聊Web端的即时通讯 Web端实现即时通讯的方法有哪些? - 短轮询 长轮询 iframe流 Flash Socket 轮询 客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并 ...
- 使用ros3d.js实现web 端3D建图
使用ros3d.js实现web 端3D建图 使用ros3d.js实现web 端3D建图 前端资源下载: ros3d地图与小车模型显示-机器学习文档类资源-CSDN下载
- 使用ros2d.js实现web端导航
使用ros2d.js实现web端导航 前端资源下载: ros2d地图显示导航校准-机器学习文档类资源-CSDN下载
- MQTT 通讯测试 linux端 Android app相互发送消息
MQTT 通讯测试服务器C代码: //编译gcc -o mqttclient mqttclient.c -lpaho-mqtt3c -I ./../paho.mqtt.c/src/ -L ../pah ...
- Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架
一.基本介绍 WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯.而Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket ...
- 使用EasyNVR、easy-player-element.js在web端实现视频直播
web端实现直播,将监控视频嵌入系统.摄像头是天地伟业的.各种坑,终于在页面看见直播了.记下吧 https://github.com/bycb/videoPlayer.git 准备:easyNVR安装 ...
- web端怎么做兼容性测试
一.客户端兼容性 1.浏览器的兼容性测试 a.内核角度 Tridnt内核:代表作IE.腾讯.遨游.世界之窗等 Gecko内核:代表作Firefox webkit内核:代表作Safari.Chrome ...
- Web端性能测试和安全测试要点
一.安全测试 (1)SQL注入(比如登陆页面) (2)XSS跨网站脚本攻击:程序或数据库没有对一些特殊字符进行过滤或处理,导致用户所输入的一些破坏性的脚本语句能够直接写进数据库中,浏览器会直接执行这些 ...
- vue3.2+js，web端canvas实现手写签名
1.创建一个canvas <template><div><canvas id="canvas" height="300" widt ...
最新文章
- 图解eclipse+myeclipse完全绿色版制作过程
- python代码壁纸-python设置windows桌面壁纸的实现代码
- 深度学习与神经网络关系（BP网络【浅层】与深层网络）
- Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File （四） —— ContentProvider...
- ionic 性能优化
- 3. PSR-3 --- 日志接口
- smart210 资源
- TCS2010（中国标准编写模板）安装教程+解决三级标题条无法设置
- php的一些编码问题
- 软件设计师2021考试大纲
- 计算机系统基础lab2（二进制炸弹实验）
- 莱斯康混响插件合集 – Lexicon PCM LXP MPX Native Reverb WiN
- Git Commit failed with error The Git process exited with the code -1,073,741,819
- 《数据结构》第十篇、线性表中的链式存储结构--双链表
- python 协程是啥_Python中的协程是什么
- Python:如何用python编写无限猴子定理
- 性能测试之nmon对linux服务器的监控 侵删
- 颜色恒常性评价指标——角度误差【弧度角度】避坑
- 想要专升本你不得不看的全干货_吐血整理_专升本_计算机文化基础（一）
- uniapp实现滑动答题