MQTT 的使用_前端mqtt 链接mqtt

文章目录

一、为什么要使用 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);