vue订阅MQTT

安装

npm install mqtt

引入

import mqtt from 'mqtt'
Vue.prototype.mqtt = mqtt

页面中使用

import mqtt from 'mqtt'
methods:{
  initMQTT() {
      const connectUrl = 'ws://13.60.15.29:8083/mqtt';

      let client = mqtt.connect(connectUrl, {
          clean: true,
          connectTimeout: 4000,
          reconnectPeriod: 1000,
          clientId: 'camellia-web' + Date.now(),
          username: 'camellia-web'
      })

      // 需要订阅的主题
      const subscribe = ['/env_01/data/post', '/leak_01/data/post', '/smoke_01/data/post', '/dtu_01/data/post'];

      //成功连接后触发的回调
      client.on('connect', () => {
          console.log('已经连接成功');
          // 这里可以订阅多个主题
          client.subscribe(subscribe, () => {
              console.log(`订阅了主题 ${subscribe}`)
          })
      });
      let _this = this;
      // 当客户端收到一个发布过来的消息时触发回调
      client.on('message', function (topic, message) {
          // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
          let data = JSON.parse(message.toString());
          // console.log("返回的数据：", topic);
          // console.log(data);
          if (topic === subscribe[0]) {
              _this.envData.temper = data.temper_1 + "℃";
              _this.envData.humidity = data.humidity_1 + "%RH";
              _this.envData.co = data.co_1 + "ppm";
              _this.envData.co2 = data.co2_1 + "ppm";
              _this.envData.pressure = data.pressure_1 + "pa";
              _this.envData.pm25 = data['pm2.5_1'] + "ug/m³";
              _this.envData.pm10 = data.pm10_1 + "ug/m³";
              _this.envData.noise = data.noise_1 + "dB";
          }
          // if (topic === subscribe[1]){
          //     $("#leak_1").text(data.ex_1 + '%LEL');
          //     $("#leak_2").text(data.ex_2 + '%LEL');
          //     $("#leak_3").text(data.ex_3 + '%LEL');
          //     $("#leak_4").text(data.ex_4 + '%LEL');
          // }
      });

      // 连接断开后触发的回调
      client.on("close", function () {
          console.log("已断开连接")
      });
  },
}