MQTT (Message Queuing Telemetry Transport)
协议类型：MQTT 是一种轻量级的发布/订阅消息传输协议，通常基于 TCP/IP 实现。
功能：设计用于高延迟网络环境中，在带宽有限的情况下高效传输小量数据。广泛用于物联网（IoT）设备之间的通信。
特点：
- 发布/订阅模型：客户端可以发布消息到主题，也可以订阅主题以接收消息。
- 质量服务等级（QoS）：支持三种服务质量等级（QoS 0、1、2），以确保消息传递的可靠性。
- 轻量级：头部开销小，适合资源受限的设备。
- 保持会话：支持保持会话和持久化会话，以便在连接丢失后恢复状态。
WebSocket
协议类型：WebSocket 是一种双向全双工通信协议，建立在 TCP 协议之上。
功能：允许在客户端和服务器之间建立持久的、全双工的通信通道。主要用于浏览器和服务器之间的实时通信。
特点：
- 全双工通信：客户端和服务器可以在同一连接上同时发送和接收数据。
- 低延迟：提供实时的数据交换，减少通信延迟。
- Web集成：原生支持浏览器，适合基于 Web 的应用程序（如实时聊天、在线游戏等）。
比较
设计目标：
MQTT：优化为在低带宽和高延迟的网络环境下工作，适合 IoT 设备和传感器。
WebSocket：优化为在浏览器和服务器之间实现实时、全双工通信，适合 Web 应用程序。
使用场景：
- MQTT：常用于物联网（IoT）、移动应用的后台服务、传感器网络等。
- WebSocket：常用于实时网页应用、聊天应用、在线游戏等。
通信模型：
- MQTT：基于发布/订阅模型，消息发布者和订阅者不需要直接连接。
- WebSocket：基于客户端和服务器之间的全双工通信，数据流动是对等的。
协议开销：
- MQTT：更轻量，适合低带宽和高延迟的环境。
- WebSocket：在网络条件较好的环境下使用，适合实时、快速的数据交换。
js
publishMessage() {//开关触发
if (this.client) {
this.client.publish("zhLock/openLock", "Hello");
} else {
console.log("MQTT client is not initialized");
}
},
onLoad() {
// 动态引入 MQTT.js 库
const script = document.createElement("script");
script.src = "https://unpkg.com/mqtt/dist/mqtt.min.js";
script.onload = () => {
// 初始化 MQTT 客户端
this.client = mqtt.connect("ws://broker.hivemq.com:8000/mqtt", {
username: "admin",
password: "public",
clientId: `client_${Math.random().toString(36).substring(2, 15)}`, // 生成唯一的 clientId
cleanSession: true,
reconnectPeriod: 1000, // 1秒重新连接一次
});
// 连接成功回调
this.client.on("connect", () => {
console.log("连接成功回调");
// 订阅主题
const topics = ["zhLock/lockHeart", "zhLock/lockSuccess", "zhLock/openLock"];
topics.forEach((topic) => {
this.client.subscribe(topic, (err) => {
if (!err) {
console.log(`Subscribed to ${topic}`);
}
});
});
});
// 处理接收到的消息
this.client.on("message", (topic, message) => {
console.log("处理接收到的消息 Received message:", topic, message.toString());
switch (topic) {
case "zhLock/lockHeart":
// 处理锁心跳消息
break;
case "zhLock/lockSuccess":
// 处理锁成功消息
break;
case "zhLock/openLock":
// 处理开锁消息
break;
default:
console.warn(`Unhandled topic: ${topic}`);
}
});
// 处理连接错误事件
this.client.on("error", (err) => {
console.log(" 处理连接错误事件 MQTT connection error:", err);
});
};
document.head.appendChild(script);
},