前言：因公司业务，最近在做一个物联网平台的后台管理系统。采用的技术是vue-cli3，elementUI。因为有需求对设备数据进行实时监控，故前端需要使用mqtt来接收实时数据。将个人踩坑整理出来，希望对大家有帮助。
MQTT是什么
MQTT是机器对机器(M2M)/物联网(IoT)连接协议。它被设计为一个极其轻量级的发布/订阅消息传输协议。对于需要较小代码占用空间和/或网络带宽非常宝贵的远程连接非常有用，是专为受限设备和低带宽、高延迟或不可靠的网络而设计。这些原则也使该协议成为新兴的“机器到机器”(M2M)或物联网(IoT)世界的连接设备，以及带宽和电池功率非常高的移动应用的理想选择。例如，它已被用于通过卫星链路与代理通信的传感器、与医疗服务提供者的拨号连接，以及一系列家庭自动化和小型设备场景。它也是移动应用的理想选择，因为它体积小，功耗低，数据包最小，并且可以有效地将信息分配给一个或多个接收器。
在我个人理解，其实就跟websocket差不多，前端与后台一直建立连接，后台会持续主动推过来数据，不用我们主动去发请求去请求数据。是一个双向通信连接。
具体大家可以看mqtt官网自行了解mqtt中文网
vue项目中如何使用mqtt
1.安装mqtt
npm i mqtt --save
2.使用mqtt
这里我将mqtt配置写到一个单独的js中
import mqtt from 'mqtt'
//这里配置的是一些需要的参数
const options = {
port: 443,
clientId: "",
username: "",
password: "",
clean: true
};
//建立mqtt连接实例
const client = mqtt.connect("wss://www.xxxxxx.cn/mqtt",options);
export default client
因为在项目中 有好几个模块都需要这个实时数据，所以此时需要在切换路由时保持数据一直在接收。如果不保存在一个公共的地方，在路由跳转时连接就会断开，需要重新在新的路由页面建立连接。所以我就将接收到的数据存到了vuex中，这样全部的组件都可以取到实时数据，将建立连接放在了app.vue下。
在vuex中的stroe.js中
import client from '@/mqtt' // 引入刚才配的mqtt
state ={
mqttData:{} //接收到mqtt实时数据
}
mutations = {
SET_MQTTDATA:(state,data)=>{
state.mqttData = data;
}
}
actions = {
connectMqtt({ commit }){
client.on("connect", function() {
console.log("mqtt连接成功")
client.subscribe("/test/thing/data/post", function(err) {}) //这里是需要订阅的topic
})
client.on("message", function(topic, message) {
let data = JSON.parse(message)
commit('SET_MQTTDATA',data)
}
})
}
}
subscribe是监听某个topic,然后可以通过on来监听返回来的数据，将数据存到state中，因为数据是实时变化的，可以将data存到 getters中
getters = {
mqtt_data:state => state.mqttData
}
在app.vue中触发监听
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
mounted(){
this.$store.dispatch('connectMqtt');
},
}
</script>
这样系统一进来就会建立连接，实时获取数据，刷新页面会重新触发mouted函数，重新建立连接。
在页面中使用
computed:{
mqttData(){
return this.$store.getters.mqtt_data
}
},
watch:{
mqttData(val){
//数据变化，进行相应操作
}
},
因为在vue中使用mqtt资料很少，自己摸索着暂时完成了阶段的开发任务，应该还有更好更优的处理方式，希望大家多多指正，一起进步。
网友评论