文章目录
一、为什么要使用 MQTT
二、使用 MQTT
1. 二次封装 mqtt
2. 使用封装的 mqtt
一、为什么要使用 MQTT
MQTT 是一种基于发布/订阅模式的轻量级物联网消息传输协议，可以用极少的代码和带宽为联网设备提供实时可靠的消息服务，它广泛应用于物联网、移动互联网、智能硬件、车联网、电力能源等行业。
当我们需要和物联网端进行交互时，就需要用到 MQTT
二、使用 MQTT
npm i -S mqtt前端想要使用 MQTT，需要先下载 mqtt 这个依赖，该库支持浏览器环境和 Node.js 环境，浏览器环境只支持 WebSocket 连接，而 Node.js 环境支持 WebSocket 和 MQTT 连接，下面以浏览器为例
1. 二次封装 mqtt
下载好 mqtt 依赖后，先进行简单的二次封装，可以使用 Class 或 Function 进行二次封装，以下以 Function 封装为例
import * as mqtt from "mqtt/dist/mqtt.min";
export default function (
url: string, // 连接地址
onMessage: (tioic: string, msg: any) => void, // 收到信息后的回调
theme?: string // 需要订阅的主题
) {
// 创建连接
const client = mqtt.connect(url);
// 值为1是，断开连接
client.close = 0;
// 连接成功回调
client.on("connect", (e: unknown) => {
console.log("连接成功");
// 订阅
if (theme) {
client.subscribe(theme, { qos: 0 }, (error: unknown)=> {
if (error) {
console.log("订阅失败", error);
} else {
console.log("订阅成功");
}
});
}
// 监听信息，topic：收到信息的主题；message：收到的数据
client.on("message", (topic: string, message: any) => {
// 收到信息后，执行回调，将数据和
onMessage(topic, info);
// 取消订阅
if (client.close && theme) {
console.log("取消订阅");
client.unsubscribe(theme, { qos: 0 }, (error: unknown) => {
if (error) {
console.log("取消订阅失败", error);
}
});
}
return;
});
// 重新连接
client.on("reconnect", (err: unknown) => {
console.log("正在重新连接", err);
});
// 连接失败
client.on("error", (err: unknown) => {
console.log("连接失败");
});
});
return client;
}2. 使用封装的 mqtt
// 引入 二次封装的 mqtt
import mqtt from "@/utils/mqtt";
const mqttMsg = (tioic: string, msg: unknown)=>{
console.log("收到的数据",{tioic,msg});
}
const client = mqtt(
"ws://127.0.0.1:3100", // 连接的ip和端号
mqttMsg, // 回调函数
"zs/channel/live" // 订阅的主题
);
setTimeout(() => {
client.close = 1 // 断开 mqtt 连接
}, 10000);