VUE3+mqtt如何封裝解決多頁(yè)面使用需重復(fù)連接等問題

今天小編給大家分享一下VUE3+mqtt如何封裝解決多頁(yè)面使用需重復(fù)連接等問題的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)自2013年起，先為薩嘎等服務(wù)建站，薩嘎等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為薩嘎企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

場(chǎng)景：

在做的一個(gè)項(xiàng)目中多個(gè)頁(yè)面都需要使用到mqtt接收消息，但這樣的話每個(gè)頁(yè)面就都需要連接一次mqtt，并且要再次配置options信息、訂閱主題、接收消息，非常的不方便，因此琢磨將mqtt封裝到vuex中，使其可以多頁(yè)面通用，這樣只需要連接訂閱一次，接收到的消息可以存儲(chǔ)在vuex中。

一、安裝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中，可以解決多頁(yè)面需要用到mqtt接收消息時(shí)，每個(gè)頁(yè)面都要再次配置、連接、訂閱主題等問題

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

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']
}

五、頁(yè)面引入并使用

這里是在一個(gè)所有頁(yè)面都要用到的一個(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()
      //啟動(dòng)mqtt狀態(tài)監(jiān)聽
      $store.commit('MQTT_SERVICE')
    })
    
    onUnmounted(() => {
      $store.commit('MQTT_CLOSE') //斷開mqtt
    })
    
    return { }
  }    
})
</script>

方法二：main中引入

該方法需要在main中創(chuàng)建連接，在首頁(yè)的渲染生命周期中啟動(dò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

首頁(yè).vue:

<script>
import { onMounted, defineComponent, onUnmounted } from 'vue';
import $store from "@/store/index";
export default defineComponent ({
  setup(){
    onMounted(() => {
    //啟動(dòng)mqtt狀態(tài)監(jiān)聽
      $store.commit('MQTT_SERVICE')
    })
    onUnmounted(() => {
      //關(guān)閉項(xiàng)目時(shí)斷開mqtt
      //此處僅適用于從首頁(yè)跳轉(zhuǎn)到下一個(gè)頁(yè)面后首頁(yè)沒有被銷毀的情況,其它情況自行修改
      $store.commit('MQTT_CLOSE') 
    })
  }
})
</script>

以上就是“VUE3+mqtt如何封裝解決多頁(yè)面使用需重復(fù)連接等問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：VUE3+mqtt如何封裝解決多頁(yè)面使用需重復(fù)連接等問題
鏈接地址：http://bm7419.com/article4/pcceoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、ChatGPT、品牌網(wǎng)站制作、小程序開發(fā)、Google、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)