VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實(shí)例)
更新時(shí)間：2023年04月13日 12:34:27 作者：如光不息丶
最近了解到mqtt這樣一個(gè)協(xié)議,可以在web上達(dá)到即時(shí)通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
場景：
在做的一個(gè)項(xiàng)目中多個(gè)頁面都需要使用到mqtt接收消息，但這樣的話每個(gè)頁面就都需要連接一次mqtt，并且要再次配置options信息、訂閱主題、接收消息，非常的不方便，因此琢磨將mqtt封裝到vuex中，使其可以多頁面通用，這樣只需要連接訂閱一次，接收到的消息可以存儲在vuex中。
mqtt在線測試工具：http://www.emqx.io/online-mqtt-client
一、安裝mqtt
npm install mqtt
二、暴露出main.js中的vue實(shí)例
使用export default暴露出app
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')
export default app
三、封裝mqtt
將mqtt服務(wù)封裝到VUEX中，可以解決多頁面需要用到mqtt接收消息時(shí)，每個(gè)頁面都要再次配置、連接、訂閱主題等問題
import { createStore } from 'vuex'
import main from "../main";//main.ts文件中要暴露app
import router from '@/router';// 引入vuex
export default createStore({
state: {
topics: [],//訂閱話題
},
mutations: {
//mqtt服務(wù)
MQTT_SERVICE(state, event){
// mqtt連接成功
main.config.globalProperties.$mqtt.on('connect', (e) => {
console.log('連接成功:', e)
// console.log(state.topics)
main.config.globalProperties.$mqtt.subscribe(state.topics, { qos: 1 }, (error) => {
if (!error) {
console.log('訂閱成功')
} else {
console.log('訂閱失敗')
}
})
})
// 接收消息處理
main.config.globalProperties.$mqtt.on('message', (topic, message) => {
console.log('收到來自', topic, '的消息', message.toString())
})
// 斷開發(fā)起重連
main.config.globalProperties.$mqtt.on('reconnect', (error) => {
console.log('正在重連:', error)
})
// 鏈接異常處理
main.config.globalProperties.$mqtt.on('error', (error) => {
console.log('連接失敗:', error)
})
},
//發(fā)布消息
MQTT_PUBLISH(state, {topic, msg}){
console.log(topic)
main.config.globalProperties.$mqtt.publish(topic, msg)
},
//斷開MQTT
MQTT_CLOSE(state, event){
console.log('斷開MQTT');
main.config.globalProperties.$mqtt.end()
},
},
actions: {
},
modules: {
}
})
四、編寫mqtt配置文件
在src下的utils下新建一個(gè)js文件：mqttConfig.js
更多options配置參數(shù)參考mqtt文檔：https://github.com/mqttjs/MQTT.js
import $store from "@/store/index";
export function getOptions(){
let options = {
connectTimeout: 40000,
clientId: 'mqttId',
clean: true,
username: admin,
password: admin
}
return options
}
export function setTopics(){
//此處修改VUEX中的值建議通過actions、mutations修改state值
$store.state.topics = [ 'topic01','topic02','topic03''topic04''topic05']
}
五、頁面引入并使用
這里是在一個(gè)所有頁面都要用到的一個(gè)公共組件中引入使用的，也可以在main.js中使用（看引入方法二）
方法一：公共組件中引入
import { computed, reactive, ref ,defineComponent, onMounted, onUnmounted } from 'vue-demi';
import $store from "@/store/index";//引入VUEX
import main from "../main";//main.ts文件中要暴露app
import { getOptions, setTopics } from "@/utils/mqttConfig.js"
import mqtt from 'mqtt'//引入mqtt
//mqtt鏈接地址
let mqttUrl = 'ws://broker.emqx.io:8084'
export default defineComponent ({
name:'msgDisplay',
setup(){
onMounted(() => {
//mqtt連接
main.config.globalProperties.$mqtt = mqtt.connect(mqttUrl, getOptions())
//設(shè)置訂閱主題
setTopics()
//啟動mqtt狀態(tài)監(jiān)聽
$store.commit('MQTT_SERVICE')
})
onUnmounted(() => {
$store.commit('MQTT_CLOSE') //斷開mqtt
})
return { }
}
})
</script>
方法二：main中引入
該方法需要在main中創(chuàng)建連接，在首頁的渲染生命周期中啟動mqtt狀態(tài)監(jiān)聽
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
import mqtt from 'mqtt'
import { getOptions, setTopics } from "./utils/mqttConfig.js"
let mqttUrl = 'ws://broker.emqx.io:8084'
//mqtt連接
app.config.globalProperties.$mqtt = mqtt.connect(mqttUrl, getOptions())
//設(shè)置訂閱主題
setTopics()
app.use(ElementPlus)
app.use(store).use(router).mount('#app')
export default app
首頁.vue:
<script>
import { onMounted, defineComponent, onUnmounted } from 'vue';
import $store from "@/store/index";
export default defineComponent ({
setup(){
onMounted(() => {
//啟動mqtt狀態(tài)監(jiān)聽
$store.commit('MQTT_SERVICE')
})
onUnmounted(() => {
//關(guān)閉項(xiàng)目時(shí)斷開mqtt
//此處僅適用于從首頁跳轉(zhuǎn)到下一個(gè)頁面后首頁沒有被銷毀的情況,其它情況自行修改
$store.commit('MQTT_CLOSE')
})
}
})
</script>
至此mqtt封裝結(jié)束，此文為mqtt使用過程中的個(gè)人封裝筆記，如有不足或可改進(jìn)之處還請指出。
總結(jié)
到此這篇關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的文章就介紹到這了,更多相關(guān)VUE3 mqtt封裝解決重復(fù)連接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問題
這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問題，文中有相關(guān)的解決方法，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來定義組件的自定義事件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解
這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個(gè)開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁面,需要的朋友可以參考下2023-11-11
vue項(xiàng)目使用md5加密、crypto-js加密、國密sm3及國密sm4的方法
密碼或者其他比較重要東西假如使用明文傳輸中是很危險(xiǎn)的,所以就需要前端一些加密協(xié)議,對密碼、手機(jī)號、身份證號等信息進(jìn)行保護(hù),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用md5加密、crypto-js加密、國密sm3及國密sm4的相關(guān)資料,需要的朋友可以參考下2022-12-12
在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法
今天小編就為大家分享一篇在vue項(xiàng)目中,將juery設(shè)置為全局變量的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3.2?Composition?API項(xiàng)目依賴升級
這篇文章主要為大家介紹了vue3.2?Composition?API項(xiàng)目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vuejs router history 配置到iis的方法
今天小編就為大家分享一篇vuejs router history 配置到iis的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05