使用网页制作一个MQTT客户端
目录
引言
我在上《智能物联网应用设计》课程的时候，一直在寻找一个简单的方法来实现MQTT客户端。今天在想能不能用网页来实现个MQTT客户端，简单尝试了一下还是可以的。
工作原理
要在网页中实现MQTT客户端，只能通过websockets访问服务器，好在目前的很多MQTT服务器都支持MQTT over Websocket。我测试时使用的服务器时Nanomq的Windows版本。
JS库采用的是paho-mqtt.js，有关介绍参见：mqttws.js_mqttws31.js-CSDN博客。
程序设计
程序的大部分是使用Kimi生成的，有少量修改。程序由三个部分组成。
主页面
主页面index.html的内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Light Control</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="switch-container">
<label class="switch">
<input type="checkbox" id="lightSwitch">
<span class="slider round"></span>
</label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"></script>
<script src="script.js"></script>
</body>
</html>styles.css 文件
这个文件主要定义了界面元素的风格。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
.switch-container {
text-align: center;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}script.js文件
这个文件是核心逻辑 ，代码如下：
const clientId = "1fc9600";
const client = new Paho.MQTT.Client('localhost', 8083, clientId);
const lightTopic = 'light002';
let connected = false;
// called when the client connects
client.onConnectionLost = function (responseObject) {
console.log("Connection lost: " + responseObject.errorMessage);
connected = false;
};
// called when the client loses its connection
client.onConnect = function (responseObject) {
if (responseObject.errorCode === 0) {
console.log("Connected to MQTT broker!");
connected = true;
} else {
console.log("Failed to connect, return code: " + responseObject.errorCode + ", error message: " + responseObject.errorMessage);
}
};
// called when a message arrives
client.onMessageArrived = function (message) {
console.log("Message arrived: " + message.payloadString);
if(message.payloadString === 'ON') {
document.getElementById('lightSwitch').checked = true;
} else {
document.getElementById('lightSwitch').checked = false;
}
};
// connect to the MQTT server
client.connect({onSuccess: onConnect, useSSL: false});
// subscribe to the topic
function onConnect() {
console.log("Connected to MQTT broker!");
connected = true;
console.log("Subscribing to topic: " + lightTopic);
client.subscribe(lightTopic, {qos: 0});
}
document.getElementById('lightSwitch').addEventListener('change', function (e) {
if (connected) {
const message = e.target.checked ? 'ON' : 'OFF';
client.send(lightTopic, message, 0, true);
}
});运行结果
Nanomq默认支持Websocket，端口是8083。
直接加载index.html页面，就可以看到一个控制开关。
切换控制开关，它会向light002主题发布ON或OFF消息。如果使用MQTTX向这个主题发布ON或OFF消息，按钮也会做相应的变化。
结语
整体看来，使用网页做客户端还是挺简单的。
原文地址：https://blog.csdn.net/bit_mike/article/details/144411122
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！