上一篇文章：什么是webSocket？以及它的一些相关理论知识
背景：
MQTT 的发布/订阅模式与 WebSocket 的双向通信特性相结合。
通过将 MQTT 与 WebSocket 结合使用，可以在 Web 应用中实现高效、实时的消息传输，特别适用于需要实时数据更新的应用场景。
效果展示：
一、MQTT工具的使用：
MQTT 客户端的操作界面：
简化了初始化一个MQTT对象的代码书写。
MQTT客户端的操作步骤：
1.双击运行
2.打开界面，连接服务器
3.配置参数
4.订阅消息
5.发布消息
6.MQTT的历史记录
MQTT的代码示例：
前端使用 MQTT.js 库
MQTT.js 是一个功能强大的 MQTT 客户端库，支持在 Node.js 和浏览器中使用。下面是一个简单的示例，展示如何在浏览器中使用 MQTT over WebSocket。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MQTT over WebSocket Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.2.6/mqtt.min.js"></script>
</head>
<body>
<h1>MQTT over WebSocket Example</h1>
<div>
<label for="message">Message:</label>
<input type="text" id="message">
<button onclick="sendMessage()">Send</button>
</div>
<ul id="messages"></ul>
<script>
// 连接到 MQTT 代理
var client = mqtt.connect('ws://localhost:8083');
// 当连接建立时触发
client.on('connect', function () {
console.log('Connected to MQTT broker');
// 订阅主题
client.subscribe('test/topic', function (err) {
if (!err) {
console.log('Subscribed to test/topic');
}
});
});
// 当接收到消息时触发
client.on('message', function (topic, message) {
// 将消息添加到页面
var msg = document.createElement('li');
msg.textContent = topic + ": " + message.toString();
document.getElementById('messages').appendChild(msg);
});
// 发送消息
function sendMessage() {
var message = document.getElementById('message').value;
client.publish('test/topic', message);
}
</script>
</body>
</html>
示例解释：
-
引入 MQTT.js 库：
- 通过 CDN 引入 MQTT.js 库。
-
连接到 MQTT 代理：
- 使用
mqtt.connect('ws://localhost:8083')连接到启用了 WebSocket 的 MQTT 代理。
- 使用
-
订阅主题：
- 在连接建立后，订阅
test/topic主题。
- 在连接建立后，订阅
-
接收消息：
- 通过
client.on('message', function (topic, message) { ... })处理接收到的消息，并将其显示在页面上。
- 通过
-
发送消息：
- 使用
client.publish('test/topic', message)向test/topic主题发送消息。
- 使用
