前言：因公司業(yè)務(wù)权旷，最近在做一個(gè)物聯(lián)網(wǎng)平臺(tái)的后臺(tái)管理系統(tǒng)。采用的技術(shù)是vue-cli3躲查，elementUI。因?yàn)橛行枨髮?duì)設(shè)備數(shù)據(jù)進(jìn)行實(shí)時(shí)監(jiān)控姐霍，故前端需要使用mqtt來(lái)接收實(shí)時(shí)數(shù)據(jù)典唇。將個(gè)人踩坑整理出來(lái)蚓聘，希望對(duì)大家有幫助。
MQTT是什么
MQTT是機(jī)器對(duì)機(jī)器(M2M)/物聯(lián)網(wǎng)(IoT)連接協(xié)議与纽。它被設(shè)計(jì)為一個(gè)極其輕量級(jí)的發(fā)布/訂閱消息傳輸協(xié)議塘装。對(duì)于需要較小代碼占用空間和/或網(wǎng)絡(luò)帶寬非常寶貴的遠(yuǎn)程連接非常有用，是專為受限設(shè)備和低帶寬僚碎、高延遲或不可靠的網(wǎng)絡(luò)而設(shè)計(jì)阴幌。這些原則也使該協(xié)議成為新興的“機(jī)器到機(jī)器”(M2M)或物聯(lián)網(wǎng)(IoT)世界的連接設(shè)備矛双，以及帶寬和電池功率非常高的移動(dòng)應(yīng)用的理想選擇。例如懒闷，它已被用于通過(guò)衛(wèi)星鏈路與代理通信的傳感器栈幸、與醫(yī)療服務(wù)提供者的撥號(hào)連接，以及一系列家庭自動(dòng)化和小型設(shè)備場(chǎng)景玩焰。它也是移動(dòng)應(yīng)用的理想選擇芍锚，因?yàn)樗w積小荔棉，功耗低润樱，數(shù)據(jù)包最小壹若，并且可以有效地將信息分配給一個(gè)或多個(gè)接收器皂冰。
在我個(gè)人理解，其實(shí)就跟websocket差不多赂蕴，前端與后臺(tái)一直建立連接舶胀，后臺(tái)會(huì)持續(xù)主動(dòng)推過(guò)來(lái)數(shù)據(jù)，不用我們主動(dòng)去發(fā)請(qǐng)求去請(qǐng)求數(shù)據(jù)糖赔。是一個(gè)雙向通信連接轩端。
具體大家可以看mqtt官網(wǎng)自行了解mqtt中文網(wǎng)
vue項(xiàng)目中如何使用mqtt
1.安裝mqtt
npm i mqtt --save
2.使用mqtt
這里我將mqtt配置寫(xiě)到一個(gè)單獨(dú)的js中
import mqtt from 'mqtt'
//這里配置的是一些需要的參數(shù)
const options = {
port: 443,
clientId: "",
username: "",
password: "",
clean: true
};
//建立mqtt連接實(shí)例
const client = mqtt.connect("wss://www.xxxxxx.cn/mqtt",options);
export default client
因?yàn)樵陧?xiàng)目中 有好幾個(gè)模塊都需要這個(gè)實(shí)時(shí)數(shù)據(jù)，所以此時(shí)需要在切換路由時(shí)保持?jǐn)?shù)據(jù)一直在接收奋构。如果不保存在一個(gè)公共的地方弥臼，在路由跳轉(zhuǎn)時(shí)連接就會(huì)斷開(kāi)舱呻，需要重新在新的路由頁(yè)面建立連接悠汽。所以我就將接收到的數(shù)據(jù)存到了vuex中，這樣全部的組件都可以取到實(shí)時(shí)數(shù)據(jù)茬高，將建立連接放在了app.vue下假抄。
在vuex中的stroe.js中
import client from '@/mqtt' // 引入剛才配的mqtt
state ={
mqttData:{} //接收到mqtt實(shí)時(shí)數(shù)據(jù)
}
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是監(jiān)聽(tīng)某個(gè)topic,然后可以通過(guò)on來(lái)監(jiān)聽(tīng)返回來(lái)的數(shù)據(jù)丽猬，將數(shù)據(jù)存到state中脚祟，因?yàn)閿?shù)據(jù)是實(shí)時(shí)變化的由桌，可以將data存到 getters中
getters = {
mqtt_data:state => state.mqttData
}
在app.vue中觸發(fā)監(jiān)聽(tīng)
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
mounted(){
this.$store.dispatch('connectMqtt');
},
}
</script>
這樣系統(tǒng)一進(jìn)來(lái)就會(huì)建立連接邮丰，實(shí)時(shí)獲取數(shù)據(jù)，刷新頁(yè)面會(huì)重新觸發(fā)mouted函數(shù)剪廉，重新建立連接斗蒋。
在頁(yè)面中使用
computed:{
mqttData(){
return this.$store.getters.mqtt_data
}
},
watch:{
mqttData(val){
//數(shù)據(jù)變化，進(jìn)行相應(yīng)操作
}
},
因?yàn)樵趘ue中使用mqtt資料很少骤星，自己摸索著暫時(shí)完成了階段的開(kāi)發(fā)任務(wù)爆哑，應(yīng)該還有更好更優(yōu)的處理方式，希望大家多多指正队贱，一起進(jìn)步潭袱。
