在vue中使用mqtt

119 阅读 0 评论 79 点赞

我是靠谱客的博主勤劳书本，最近开发中收集的这篇文章主要介绍在vue中使用mqtt，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

npm install mqtt

以下是使用mqtt的代码。需要特别注意的是：

端口是8083

mqtt.connect的url协议是"ws"，而且后面要跟"/mqtt"

import mqtt from 'mqtt'

mounted () {
    const options = {
      clean: true,
      connectTimeout: 4000,
      clientId: 'test',
      username: 'xxx',
      password: 'xxx',
      keepalive: 60,
      port: 8083
    }
    this.client = mqtt.connect('ws://xxx.com/mqtt', options)

    this.client.on('connect', e => {
      console.log('连接成功', e)
      this.client.subscribe('xxx', (err) => {
        if (!err) {
          console.log('订阅成功:' + 'xxx')
        }
      })
    })

    this.client.on('message', (topic, message) => {
      console.log(topic + '返回的数据：' + message.toString())
      let data = this.canParseToJson(message.toString())
      if (data) {
        this.msg = JSON.parse(message.toString())
      }
    })

    this.client.on('reconnect', (error) => {
      console.log('正在重连：' + error)
    })

    this.client.on('error', (error) => {
      console.log('连接失败：' + error)
    })
  },

methods: {
    mqttPublish: function (pid = 0) {
      console.log('mqttPublish', pid)
      this.client.publish(this.mtopic, {pid: pid})
    },

    canParseToJson (str, parseFlag = true) {
      try {
        if (typeof JSON.parse(str) === 'object' && Object.prototype.toString.call(JSON.parse(str)) === '[object Object]') {
          return parseFlag === true ? JSON.parse(str) : true
        }
      } catch (e) {}
      return false
    }
  }