Vue3连接mqtt订阅消息

Vue3 中使用以及订阅

没有安装可使用 npm install mqtt --save （暂时使用了npm install mqtt@3.0.0）

页面引入

引用mqtt库 不要直接引用mqtt 会报错
import mqtt from 'mqtt/dist/mqtt'

代码：

1.获取动态配置(关于mqtt的动态配置)

<script>
// //引入mqtt
import mqtt from "mqtt/dist/mqtt";
export default {
 data() {
    return {
      client: {},
    };
  },
  created() {
    this.getrtm_index_config(); //获取运行配置获取并建立mqtt
  },
  methods: {
    //运行配置获取并建立mqtt
    getrtm_index_config() {
      const rtm_index_config_url = "/api/kui/rtm_index_config?token=" + token;
      this.$myaxios.get(rtm_index_config_url).then((res) => {
        this.rtmindexconfig = res.data;
        this.mqttconnect(this.rtmindexconfig.mqtt);
      });
    },
  }，
}
</script>

2.建立mqtt

mqttconnect(_config) {
  var _port = _config.connection.port;
  var _path = "/ws";
  var _usessl = false;
  if (location.protocol == "https:") {
    _port = _config.connection.porthttps;
    _path = "/ws";
    _usessl = true;
  }
  var _hostname = _config.connection.hostname;
  if (_hostname == "") {
    //什么也都没有配置，那么按浏览器的来
    _hostname = location.hostname;
    var tport = location.port;
    if (tport == "") {
      if (_usessl) {
        tport = "443";
      } else {
        tport = "80";
      }
    }
    _port = parseInt(tport);
  }
  const options = {
    connectTimeout: 4000,
    clean: true, // 保留会话
    connectTimeout: 4000, // 超时时间
    reconnectPeriod: 4000, // 重连时间间
    clientId: "emqx_vue_" + Math.random().toString(16).substring(2, 8), //唯一值
    port: _config.connection.port, //端口  port  9000
    host: _hostname, //地址
    username: _config.connection.username, //id
    password: _config.connection.password,
  };
  var controlWsUrl = `ws://${options.host}:${options.port}/ws`;
  console.error(controlWsUrl);
  //创建实例 传入地址和参数对象
  this.client = mqtt.connect(controlWsUrl, options);
  this.client.on("reconnect", (error) => {
    console.log("正在重连:", error);
  });
  //连接成功
  this.client.on("connect", (e) => {
    //订阅主题
    this.onConnect(_config);
    //监听接收信息
    this.getmqMessage();
  });
},

mqtt地址例如：

3.订阅主题

    //订阅主题
    onConnect(_config) {
      console.error(_config.config.topic);
      var spichar = "/";
      var t = _config.config.topic + spichar + "all" + spichar + "#"; //匹配 iopmsglist/all iopmsglist/all/xxx
      this.client.subscribe(t, 0, (error, res) => {
        if (error) {
          console.log("订阅主题错误", error);
          return;
        }
        console.log("订阅主题", res);
      });
    },

4.监听接收信息

   //监听接收消息
    getmqMessage() {
      this.client.on("message", (topic, message) => {
        if (message) {
          console.error("收到来着", topic, "的信息", message.toString());
        }
      });
    },