詳解JS HTML Web端使用MQTT通訊測(cè)試
系統(tǒng):windows10 64bit
開(kāi)發(fā)工具:UEdit64
運(yùn)行環(huán)境:360安全瀏覽器 12.1
測(cè)試工具:MQTTBox
一、編寫(xiě)簡(jiǎn)單布局
布局效果:
布局代碼:
<body style="margin: 0 auto;"> <div style="width: 500px;">服務(wù)器地址:<input style="float: right;width: 300px;" id="MQTT_ServerAdd" value="ws://www.passingworld.vip:8083/mqtt"></div> <div style="width: 500px;">心跳時(shí)間 :<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()">連接服務(wù)器</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> 發(fā)布點(diǎn):<input id="MQTT_Publish_Text"> 發(fā)布消息:<input id="MQTT_Publish_Msg"> <button onclick="Send_MQTT_Msg()">發(fā)送消息</button> </div> </body>
二、編寫(xiě)JS代碼
連接代碼
function MQTT_Connect(serveradd,KeepAlive,UserName,PassWord) { //MQTT連接的配置 MQTT_Options: { protocolVersion: 4; //MQTT連接協(xié)議版本 clientId: 'miniTest22222'; clean: false; keepalive: KeepAlive; password: UserName; username: PassWord; reconnectPeriod: 1000; //1000毫秒,兩次重新連接之間的間隔 connectTimeout: 10 * 1000; //1000毫秒,兩次重新連接之間的間隔 resubscribe: true; //如果連接斷開(kāi)并重新連接,則會(huì)再次自動(dòng)訂閱已訂閱的主題(默認(rèn)true) }; //開(kāi)始連接 MQTT_Client = mqtt.connect(serveradd, this.MQTT_Options); MQTT_Client.on('connect', function (connack) { console.log('MQTT連接成功') }) //服務(wù)器下發(fā)消息的回調(diào) 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; }) //服務(wù)器連接異常的回調(diào) MQTT_Client.on("error", function (error) { console.log("MQTT Server Error 的回調(diào)" + error) }) //服務(wù)器重連連接異常的回調(diào) MQTT_Client.on("reconnect", function () { console.log("MQTT Server Reconnect的回調(diào)") }) //服務(wù)器連接異常的回調(diào) MQTT_Client.on("offline", function (errr) { console.log("MQTT Server Offline的回調(diào)" + errr) }) };
訂閱一個(gè)主題代碼
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('請(qǐng)先連接服務(wù)器') ok = false; } return ok; };
訂閱多個(gè)主題代碼
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('請(qǐng)先連接服務(wù)器') } };
發(fā)布消息代碼
MQTT_PubMsg = function(Topic, Msg) { if (MQTT_Client && MQTT_Client.connected) { MQTT_Client.publish(Topic, Msg); console.log('發(fā)布成功->' + Topic + '->' + Msg) } else { console.log('請(qǐng)先連接服務(wù)器') } };
取消訂閱一個(gè)主題代碼
function MQTT_UnSubOne(Topic) { if (MQTT_Client && MQTT_Client.connected) { MQTT_Client.unsubscribe(Topic); } else { console.log('請(qǐng)先連接服務(wù)器') } };
取消訂閱多個(gè)主題代碼
function MQTT_UnSubOne(Topic) { if (MQTT_Client && MQTT_Client.connected) { MQTT_Client.unsubscribe(Topic); } else { console.log('請(qǐng)先連接服務(wù)器') } };
三、實(shí)驗(yàn)效果
到此這篇關(guān)于JS HTML Web端使用MQTT通訊測(cè)試的文章就介紹到這了,更多相關(guān)Web端使用MQTT通訊測(cè)試內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 在Node.js下運(yùn)用MQTT協(xié)議實(shí)現(xiàn)即時(shí)通訊及離線推送的方法
- Django連接MQTT的示例代碼
- vue3+vite2+mqtt連接遇到的坑及解決
- vue3使用mqtt的示例代碼
- MQTT.js 入門(mén)使用教程
- VUE3+mqtt封裝解決多頁(yè)面使用需重復(fù)連接等問(wèn)題(附實(shí)例)
- 解決spring-integration-mqtt頻繁報(bào)Lost connection錯(cuò)誤問(wèn)題
- JS?連接MQTT的使用方法
- 使用java?實(shí)現(xiàn)mqtt兩種常用方式
- Android MQTT與WebSocket協(xié)議詳細(xì)講解
- MQTT Client實(shí)現(xiàn)消息推送功能的方法詳解
相關(guān)文章
js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
需要改變多個(gè)元素的位置,可以通過(guò)元素拖動(dòng)來(lái)實(shí)現(xiàn),下面以圖片拖動(dòng)為例,用jQuery來(lái)實(shí)現(xiàn),需要的朋友可以參考下2014-05-05詳解javascript中原始數(shù)據(jù)類型Null和Undefined
這篇文章主要介紹了javascript中原始數(shù)據(jù)類型Null和Undefined的相關(guān)資料,需要的朋友可以參考下2015-12-12js判斷IE6/IE7/FF的代碼[XMLHttpRequest]
js下通過(guò)XMLHttpRequest判斷IE6/IE7/FF的代碼,需要的朋友可以參考下。2011-02-02Javascript實(shí)用方法之json合并的場(chǎng)景分析
這篇文章主要介紹了Javascript實(shí)用方法之json合并,jQuery 的“extend()”方法有兩個(gè)原型:合并的方法,分別是淺合并和深度合并,本文通過(guò)代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03深入講解xhr(XMLHttpRequest)/jsonp請(qǐng)求之a(chǎn)bort
這篇文章主要給大家深入的介紹了關(guān)于xhr(XMLHttpRequest)/jsonp請(qǐng)求之a(chǎn)bort的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-07-07javascript隨機(jī)將第一個(gè)dom中的圖片添加到第二個(gè)div中示例
此代碼的是一個(gè)簡(jiǎn)單的例子,將第一個(gè)div中的五張圖片中,提取隨機(jī)兩張顯示到第二個(gè)div中,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-10-10使用純JS代碼判斷字符串中有多少漢字的實(shí)現(xiàn)方法(超簡(jiǎn)單實(shí)用)
這篇文章主要給大家介紹了js判斷字符串中有多少漢字的實(shí)現(xiàn)方法然后給大家分享了使用JS判斷輸入字符串長(zhǎng)度的兩種方法,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11兩個(gè)JS之間的函數(shù)互相調(diào)用方式
這篇文章主要介紹了兩個(gè)JS之間的函數(shù)互相調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03