vue3使用mqtt

 封装类

//封装一个类（可直接cv）
class createds {
  //创建公共变量
  static url; //mqtt地址
  static oldSubscribe; //取消订阅准备
  static subscribe; //订阅地址
  static client; //mqtt公共变量
  //接受床底来的数据
  constructor(subscribe) {
    console.log(subscribe, "订阅地址");
    //获取传递来的订阅地址
    this.subscribe = subscribe;
    this.url = "ws://127.0.0.1:8083/mqtt";
  }

  //初始化mqtt
  init() {
    const options = {
      clean: true, // true: 清除会话, false: 保留会话
      connectTimeout: 4000, // 超时时间
    };
    this.client = mqtt.connect(this.url, options);
    this.client.on("error", (error) => {});
    this.client.on("reconnect", (error) => {});
  }
  //取消订阅
  unsubscribes() {
    this.client.unsubscribe(this.subscribe, (error) => {
      if (!error) {
        console.log(this.subscribe, "取消订阅成功");
      } else {
        console.log(this.subscribe, "取消订阅失败");
      }
    });
  }
  //结束链接
  over() {
    this.client.end();
  }
  //链接
  link() {
    this.client.on("connect", (e) => {
      this.client.subscribe(this.subscribe, (error) => {
        //在js代码中最简单的抛出异常方法
        if (!error) {
          console.log("订阅成功");
        } else {
          console.log("订阅失败");
        }
      });
    });
  }
  //收到的消息
  get() {
    this.client.on("message", (topic, message) => {
      console.log("收到消息：", message.toString());
    });
  }
  //结束链接
  over() {
    this.client.end();
  }
}
export default createds;　　

使用

//引入封装的类
import createds from "@/utils/mqtt.js";

const PublicMqtt = ref(null);
const startMqtt = (val) => {
  //val = 订阅地址
  //设置订阅地址
  PublicMqtt.value = new createds(val);
  //初始化mqtt
  PublicMqtt.value.init();
  //链接mqtt
  PublicMqtt.value.link();
  getMessage();
};
//获取订阅数据
const getMessage = () => {
  PublicMqtt.value.client.on("message", (topic, message) => {
    let str = JSON.parse(message.toString());
    console.log(str,'返回的数据')
  });
};
//取消MQTT订阅
const unsubscribe = () => {
  //如果页面并没有初始化MQTT，无需取消订阅
  if (PublicMqtt.value) {
    PublicMqtt.unsubscribes();
  }
};
onUnmounted(() => {
  //页面销毁结束订阅
  if (PublicMqtt.value) {
    PublicMqtt.value.unsubscribes();
    PublicMqtt.value.over();
  }
});

// vue3使用npm下载mqtt依赖可能跑不起来，可以把他的js文件下载下来放在本地