Quasar中使用mqtt接收服务器数据改变界面状态

首先我们把mqtt安装到quasar 项目中

quasar new b mqtt

可以在项目的src/boot目录下生成一个mqtt.js文件

在mqtt.js文件中我们将全局使用本文件中的vue对象去操作各个vue文本中需要的数据

import Vue from 'vue'
const bus = new Vue()

const mqtt = require('mqtt')

export default ({ app }) => {
  window.mqtt = mqtt
  const client = mqtt.connect('tcp://198.103.130.92:00883')
  window.mqtt.bus = bus
  window.mqttClient = client

  client.on('connect', () => {
    console.log('MQTT服务器连接成功')

    // # 代表订阅所有数据
    client.subscribe('#', { qos: 0 }, (error) => {
      if (!error) {
        console.log('订阅成功')
      } else {
        console.log('订阅失败')
      }
    })
  })

  // 接收返回数据
  client.on('message', (topic, message) => {
    console.log('======================')
    console.log('收到来自', topic, '的消息')
    console.log(message.toString())
    var cmd = JSON.parse(message.toString())
    console.log(cmd)
    if (cmd) {
      console.log(window.mqtt.bus)
      console.log('window.mqtt.bus')
      console.log(window.mqtt.bus.$emit('api_' + cmd.callid, cmd))
      window.mqtt.bus.$emit('api_' + cmd.callid, cmd)//将数据抛出
    }
  })

  // 断开发起重连
  client.on('reconnect', (error) => {
    console.log('正在重连...', error)
  })
  // 链接异常处理
  client.on('error', (error) => {
    console.log('连接失败...', error)
  })
}

export { mqtt }

当我们需要将数据发送到服务器时触发的函数

Refresh: function () {
      if (this.activeid !== null) {
      //接收到服务器返回来是数据后回调的函数其中payload是服务器返回来的数据
        const callback = payload => {
          this.tasklist = [...payload.proTaskList[this.activeid].taskList]
          console.log('获取定时列表数据：', payload)
        }
        const
          cmd = {
            cmd: 'getTask',
            callid: Math.floor(Math.random() * 0xffffffff),
            proTaskList: [{},{}]
            result: 0
          }

        console.log(callback, cmd)
        window.mqttCall(cmd, callback)//将mqtt的publish封装到这个全局对象中，这个函数将在我们的全局的App.vue文件中定义
      }
    }

在App.vue文件中我们写一个全局的mqtt的publish封装函数将数据推送到服务器

<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<script>

export default {

  name: 'App',
  mounted () {
    window.mqttCall = function (job, callback) {
      window.mqtt.bus.$off('api_' + job.callid)
      window.mqtt.bus.$once('api_' + job.callid, (payload) => {//当'api_' + job.callid，有动作触发
        if (callback) {
          callback(payload)//触发回调，将数据传到Vue界面
        }
      })
      console.log('job')
      window.mqttClient.publish('topic', JSON.stringify(job))
      console.log(job)
    }
  }
}
</script>