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

npm 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连接发生错误已关闭");

  });

}

参考链接：

juejin.cn/post/735925…

docs.emqx.com/zh/cloud/la…