uniapp中使用和引入mqtt

2020-05-30 00:00
椰子皮
3953
0
3

在uniapp使用mqtt的例子,mqtt消息队列是阿里云那边的,由于做直播拉流的需求需要用到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>

 

支付宝微信
3
关注公众号获取更多内容
element-ui使用axios进行全局控制loading
结合lazyload实现文章页里面的图片预加载
暂无评论,快抢沙发吧
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新