首先我们把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>