溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“JS、HTML、Web端怎么使用MQTT通訊測試”，內容詳細，步驟清晰，細節處理妥當，希望這篇“JS、HTML、Web端怎么使用MQTT通訊測試”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
布局效果：
布局代碼：
<body > <div >服務器地址：<input id="MQTT_ServerAdd" value="ws://www.passingworld.vip:8083/mqtt"></div> <div >心跳時間 ：<input id="MQTT_ConnHeartbeatTime" value="30"></div> <div >用戶名 ：<input id="MQTT_UserName" value="admin"></div> <div >密碼 ：<input id="MQTT_PassWord" value="public"></div> <div> <button onclick="MQTT_ConnServer()">連接服務器</button> </div> <div > 訂閱消息<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 > 訂閱列表 </div> <div> <table border="1"> <tr > <td>訂閱消息</td> <td>QoS</td> <td>操作</td> </tr> </table> </div> <div > 接收消息 </div> <div> <textarea id="textareaid" rows="5" cols="30" class="message1" ></textarea> </div> <div> 發布點：<input id="MQTT_Publish_Text"> 發布消息：<input id="MQTT_Publish_Msg"> <button onclick="Send_MQTT_Msg()">發送消息</button> </div> </body>
連接代碼
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_UnSubOne(Topic) {
if (MQTT_Client && MQTT_Client.connected) {
MQTT_Client.unsubscribe(Topic);
} else {
console.log('請先連接服務器')
}
};
讀到這里，這篇“JS、HTML、Web端怎么使用MQTT通訊測試”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
