纯JavaScript实现的MQTT智能门锁

本文重点是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部分。

代码语言：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

mqtt javascript ide 物联网 html

0 人点赞