uniapp中使用和引入mqtt

首先到uniapp插件市场找到mqtt的插件下载

https://ext.dcloud.net.cn/plugin?id=854

 

废话少说，放代码

import mqtt from 'mqtt/dist/mqtt.js'
import store from '@/vuex/store'

/**
 * @name MQTT连接
 * @author zzc
 * @date 2020-4-13
 * @param { Object } data 后端返回的一些mqtt参数
 */
export default new class {
  constructor() {
    this.client = null
  }

  init(data) {
    const { GroupId, topic, username, token, host } = data
    const { state, commit } = store
    const clientId = GroupId + state.userData.id
    const opt = {
      clientId,
      username,
      keepalive: 30,  
      protocolId: 'MQTT',
      protocolVersion: 4,
      password: token,
      reconnectPeriod: 5000, 
    }
    const protocol = typeof plus !== 'undefined' ? 'wx' : 'ws'
    let client = this.client
    //保险起见，先关闭再打开
    if (this.client) {
      client.end()
    }
    client = mqtt.connect(`${protocol}://${host}`, opt)
    this.client = client
    // commit('updateMQTT', client)

    client.on('connect', function(res) {
      console.log('mqtt连接成功...' + JSON.stringify(res))
      client.subscribe(topic, function(err) {
        if (!err) {
          console.log('订阅成功', topic)
        }
      })
      commit('updateMqttStatus', 'success')
    })

    client.on('reconnect', function() {
      console.log('mqtt重新连接中...')
      commit('updateMqttStatus', '')
    })

    client.on('close', function() {
      console.log('mqtt连接中断...')
      commit('updateMqttStatus', 'lost')
      // client.reconnect()
    })

    client.on('error', function(res) {
      console.log('mqtt连接失败' + JSON.stringify(res))
      commit('updateMqttStatus', 'fail')
      client.reconnect()
    })

    return client
  }
}

 

如果不先关闭，会导致不断重连，另外在苹果手机，一次性接收多条消息只能收到其中一条。

 

调用方法

<script>
  import mqtt from '@/utils/mqtt'
  export default {
    mounted() {
      mqtt.init(this.mqttData)
      mqtt.client.on('message', (topic, payloadString) => {
        // todo something
      })
    }
  }
</script>