用python做一个智能门锁（纯JavaScript实现的MQTT智能门锁）

匴掵姺泩 2023-07-20 16:41:57

本文重点是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() } //渲染html function 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

也可私戳学长获取源码
,