本文重點是JavaScript實現的MQTT，智慧門鎖是基於此的擴充套件應用demo。

簡介

JavaScript實現的MQTT Demo，可通過Hbuilder IDE免費進行App打包，也可直接部署到Web伺服器上。

Demo內容是以MQTT實現的智慧門鎖應用，包括基礎的訂閱、釋出功能。

APP端如下圖所示：

硬體端為集藍芽與WiFi與一體的物聯網開發板ESP32，如下圖所示：

將SG90舵機與ESP32的IO腳相連，通過控制舵機的轉動，帶動門把手的轉動。

還可引入LED燈，作為工作狀態的指示：

正文

其中MQTT庫使用的是mqttws31。

Eclipse Paho專案提供了MQTT和MQTT-SN訊息傳遞協議的開源客戶端實現，這些實現針對物聯網（IoT）的新的，現有的和新興的應用程式。

HTML與CSS部分不講解，直接上JavaScript部分。

（注：若下方程式碼顯示很亂，請用手機端瀏覽，或向學長要程式碼！）

<script>var hostname = 'api.easylink.io',port = 1983,clientId = 'client-' + Math.ceil(Math.random() * 1000),timeout = 5,keepAlive = 100,cleanSession = false,ssl = false,client,topic_send = 'CMD',topic_sub = 'CALLBACK',s = ""; $(document).ready(function(){ $(".host").val("api.easylink.io:1983");$(".subTop").val('CALLBACK');$(".sendTop").val('CMD'); });function onFailure() {console.log(e);}//連線伺服器並註冊連線成功處理事件function onConnect() {innerHTMl(">> 連線成功!"); client.subscribe(topic_sub);}function onConnectionLost(responseObject) { if (responseObject.errorCode !== 0) { console.log("onConnectionLost:" + responseObject.errorMessage);innerHTMl(">> 連接出錯!"); }else{innerHTMl(">> 結束連線!");}}//訊息接收處理function onMessageArrived(message) {innerHTMl(">> 收到訊息:" + message.payloadString);}function getSubTopic(){if($(".subTop").val()){return $(".subTop").val();}else{innerHTMl(">> 請輸入訂閱主題");return null;}}function btnConnect(){if($(".host").val()){var temp = $(".host").val().split(":");hostname = temp[0];port = Number(temp[1]);innerHTMl(">> 使用自定義BROKER: "+temp)}else{innerHTMl(">>使用預設BROKER: "+hostname)}if($(".subTop").val()){topic_sub = $(".subTop").val();innerHTMl(">> 自定義訂閱主題: "+topic_sub)}if($(".sendTop").val()){topic_send = $(".sendTop").val();innerHTMl(">> 自定義釋出主題: "+topic_sub)}client = new Paho.MQTT.Client(hostname, port, clientId)//建立客戶端例項var options = {invocationContext: {host: hostname,port: port,path: client.path,clientId: clientId},timeout: timeout,keepAliveInterval: keepAlive,cleanSession: cleanSession,useSSL: ssl, onSuccess: onConnect,onFailure: onFailure,};//註冊連線斷開處理事件 client.onConnectionLost = onConnectionLost;//註冊訊息接收處理事件client.onMessageArrived = onMessageArrived;client.connect(options);}function btnEnd() {if(client.isConnected){client.disconnect();}else{//console.log(">> 當前未連線!");innerHTMl(">> 當前未連線!");}}function btnOpen() {message = new Paho.MQTT.Message("Open");message.destinationName = topic_send;client.send(message);innerHTMl(">> 已傳送!");}function btnSub(){if($(".subTop").val()){client.subscribe($(".subTop").val());innerHTMl(">> 已訂閱!");}else{innerHTMl(">> 請先輸入訂閱主題!");}}function btnSend(){if($(".sendMsg").val()){if($(".sendTop").val()){message = new Paho.MQTT.Message($(".sendMsg").val());message.destinationName = $(".sendTop").val();client.send(message);innerHTMl(">> 已傳送!");}else{innerHTMl(">> 請先輸入訂閱主題!");}}else{innerHTMl(">> 請先輸入釋出內容!");}}/////////////////////////////////////////////////////////////////////////////刪除當前資料function btnClear(){$(".msgBox").remove()}//渲染htmlfunction innerHTMl(msg) {let str =`<div class='msgBox'><div class='msgTxt'>[${new Date().Format("yyyy-MM-dd hh:mm:ss")}] ${msg}</div></div>`$(".msgCon").append(str);}</script>

最終完成後，可以使用Hbuilder IDE免費打包為手機端APP：

附錄

專案已開源：

https://github.com/1061700625/JavaScript_MQTT

也可私戳學長獲取原始碼