当前位置：首页 > article >正文

vue3中使用mqtt

article 2025/1/12 9:45:47

vue3连接mqtt

什么是MQTT?

MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。

MQTT的工作原理很简单：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。这种模式使得通信非常灵活，因为发送者和接收者之间的耦合度很低。MQTT还支持负载消息（payload message）的传输，这意味着可以发送各种类型的数据，如传感器读数、控制指令等。

MQTT的轻量级设计使其在网络带宽和资源受限的环境中表现出色，因此在物联网应用中得到了广泛应用。它可以在低带宽、不稳定的网络环境下可靠地运行，同时保持较低的能耗。MQTT也有许多开源实现和客户端库，使得它在各种平台上都能方便地使用。

MQTT在项目的运用

官网使用指南：docs.emqx.com/zh/cloud/la…

（1）安装MQTT

pnpm install mqtt

（2）本项目Vite和Vue版本（包括但不限于）

"vue":"^3.3.11"
"vite": "^5.0.10"

（3）引入MQTT文件

import mqtt from "mqtt";

（4）MQTT的具体使用本文将使用 EMQ X 提供的免费公共 MQTT 服务器，该服务基于 EMQ X 的 MQTT 物联网云平台创建。服务器接入信息如下：

Broker: broker.emqx.io
Port: 8083

export const connectMqtt = ({host, name, pwd, theme},onMessageArrived) => {
  let client = null
  let url = `${host}/mqtt`
  let options={
    username: name,  // 用户名字
    password: pwd,  // 密码
    // clientId: 'clientId'
  }
  try {
  client = mqtt.connect(url, options)
  }catch (error) {
    console.log('mqtt.connect error', error)
  }
  // 订阅主题
  client.subscribe(theme, (topic) => {
    console.log(topic);  // 此处打印出订阅的主题名称
  });
  // 推送消息
  // client.publish(theme, JSON.stringify({one: '1', two: '2'})); 
  //接受消息
  client.on("message", (topic, data) => {
    // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
    let dataArr = data.toString();
    console.log('mqtt收到的消息', dataArr);
    onMessageArrived(data)
  });
  // 重连
  client.on("reconnect", (error) => {
    console.log("正在重连mqtt:", error);
  });
  // 错误回调
  client.on("error", (error) => {
    console.log("MQTT连接发生错误已关闭");
  });
}