Vue项目使用MQTT

Vue项目使用MQTT

1、安装依赖

npm i mqtt@2.18.8 -S

2、页面引用

import mqtt from 'mqtt'

3、客户端

data(){
    return {
        ...
        //定义连接的客户端
        client:null
    }
}

4、建立连接并进行订阅

如果此连接是想跟随页面的加载而连接，那么将方法放在created钩子函数中即可。

connectMqtt () {
      const options = {
        clean: true, // 保留会话
        connectTimeout: 10000, // 超时时间
        reconnectPeriod: 10000, // 重连时间间
        clientId: 'xxxx'+"-"+this.$store.state.user.id+uuid(),//客户端连接的唯一值，如果相同会出现客户端连接抢占的问题
        username: 'Android5043879312294918',//用户名
        password: 'eyJhbGciOiJIUzI1NiJ9.eyJ3NX0.hd-DD1_wCyQVcLTP_R4PqMYygWlebHjFQNTnSjeUuoo',//密码
      }
      //前端连接。需在端口后跟  /mqtt
      /**
      * 前端连接MQTT需使用8083的原因：
      *    后端提供的IP与端口是mqtt协议的，前端在使用mqtt.js库有协议转换，mqtt.js库会自动将mqtt协议转化为ws协议来通过           *    WebSocket连接MQTT服务器。这是客户端库为了兼容Web环境而做的处理。因为浏览器直接不支持mqtt协议，而是通过WebSocket
      *    来实现。EMQX默认是使用的8083和8084分别作为非加密和加密的WebSocket端口。因此此处的8083不是固定的，需根据自身实际
      *    需求，使用ws就用非加密的端口，使用wss就用加密的端口即可。
      */
      this.client = mqtt.connect('ws://192.168.3.5:8083/mqtt', options);
      this.client.on('connect', e => {
        console.log('MQTT连接成功');
        let topic = 'xxx/xxx/xxx';
        this.client.subscribe(topic, {qos: 0}, err => {
          debugger
          if (!err) {
            console.log('订阅成功');
          } else {
            console.log('订阅失败');
          }
        })
      })
      // 信息监听事件
      this.client.on('message', (topic, message) => {
        console.log('收到消息：topic:' +topic + ",消息：" +  message.toString());
      })
      //重连
      this.client.on('reconnect', (err) => {
        console.log('正在进行重连', err);
      })
      //失败
      this.client.on('error', (err) => {
        console.log('连接失败', err);
      })
    },