在物联网（IoT）领域，MQTT（消息队列遥测传输）是一种轻量级的消息传递协议，特别适合于低带宽、高延迟或不可靠网络环境下的设备间通信。随着Web开发技术的进步，我们可以利用WebSocket等技术在网页上与MQTT服务器进行连接，实现数据的展示与控制命令的下发。在这篇文章中，我们将通过一个示例展示如何使用JavaScript连接MQTT并进行数据交互。
1. 准备工作
首先，你需要一个MQTT broker（如Mosquitto、EMQX等），并确保它能够接收和处理来自客户端的消息。在本例中，我们将使用mqtt.js库来连接MQTT broker。
在你的HTML文件中引入mqtt.js库，可以通过CDN引入：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT Web 应用</title>
<script src="https://cdn.jsdelivr.net/npm/mqtt/dist/mqtt.min.js"></script>
<style>
body { font-family: Arial, sans-serif; }
#log { margin: 20px; }
</style>
</head>
<body>
<h1>MQTT Web 应用</h1>
<div id="log"></div>
<input type="text" id="command" placeholder="输入控制命令"/>
<button id="send">发送命令</button>
<script>
const clientID = 'web_' + Math.random().toString(16).substr(2, 8);
const client = mqtt.connect('ws://your_mqtt_broker:port', { clientId: clientID });
client.on('connect', () => {
console.log('已连接到MQTT broker');
client.subscribe('your/topic', (err) => {
if (!err) {
console.log('已订阅主题');
}
});
});
client.on('message', (topic, message) => {
// message是Buffer对象，转换为字符串
const msg = message.toString();
console.log(`接收到消息: ${msg}`);
document.getElementById('log').innerHTML += `<p>主题: ${topic}, 消息: ${msg}</p>`;
});
document.getElementById('send').onclick = () => {
const command = document.getElementById('command').value;
client.publish('your/control/topic', command, (err) => {
if (!err) {
console.log(`已发送命令: ${command}`);
document.getElementById('command').value = ''; // 清空输入框
}
});
};
</script>
</body>
</html>
2. 代码解析
连接MQTT Broker
我们使用mqtt.connect方法连接到MQTT broker，其中ws://your_mqtt_broker:port是你的MQTT broker的WebSocket路径。使用一个随机的客户端ID以便于区分不同的连接。
订阅主题
当连接成功后，使用client.subscribe订阅我们关心的主题。在本示例中，我们订阅了your/topic来接收数据消息。
接收消息
使用client.on('message', ...)来处理接收的消息。当MQTT broker发送数据到订阅的主题时，该回调函数会被调用，消息内容会更新到网页的日志区域。
发送命令
在页面上有一个输入框和一个按钮。当用户输入控制命令并点击发送时，使用client.publish将命令发送到指定的控制主题（your/control/topic）。发送成功后，输入框会被清空。
3. 总结
通过上述示例，我们可以看到如何利用JavaScript与MQTT broker进行交互。在这个基础上，我们可以扩展更多功能，例如处理不同的主题、实现更复杂的控制逻辑等。MQTT的轻量特性和Web技术的结合，为物联网应用的开发提供了极大的便利，使得开发者能够快速构建IoT解决方案。
![[HTML]Web前端开发技术22（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，animation ，@keyframes，Transition——喵喵画网页](http://img.makehui.com/836.jpg)
