安装MQTT

npm install mqtt

安装Vite和Vue

npm install vite vue

MQTT连接的JS

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