So kapseln Sie VUE3+mqtt, um das Problem wiederholter Verbindungen bei Verwendung mehrerer Seiten zu lösen

Szenario:

In einem Projekt müssen mehrere Seiten mqtt verwenden, um Nachrichten zu empfangen. In diesem Fall muss jedoch jede Seite einmal eine Verbindung zu mqtt herstellen und die Optionsinformationen müssen erneut konfiguriert werden Das Abonnieren von Themen und das Empfangen von Nachrichten ist sehr umständlich. Daher habe ich darüber nachgedacht, mqtt in vuex zu kapseln, damit es auf mehreren Seiten verwendet werden kann. Auf diese Weise müssen Sie nur einmal eine Verbindung herstellen und abonnieren, und die empfangenen Nachrichten können gespeichert werden vuex.

1. Installieren Sie mqtt

npm install mqtt

2. Stellen Sie die Vue-Instanz in main.js bereit.

Verwenden Sie den Exportstandard, um die App verfügbar zu machen.

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

3. Kapseln Sie mqtt

Kapseln Sie den MQTT-Dienst in VUEX, wodurch das Problem gelöst werden kann, dass jede Seite konfiguriert, verbunden und abonniert werden muss, wenn mehrere Seiten MQTT zum Empfangen von Nachrichten verwenden müssen zu Themen usw. nochmal Frage

import { createStore } from 'vuex'
import main from "../main";//main.ts文件中要暴露app
import router from '@/router';// 引入vuex
export default createStore({
  state: {
    topics: [],//订阅话题
  },
  mutations: {
    //mqtt服务
    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())
      })
      // 断开发起重连
      main.config.globalProperties.$mqtt.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })
      // 链接异常处理
      main.config.globalProperties.$mqtt.on('error', (error) => {
        console.log('连接失败:', error)
      })
    },
    //发布消息
    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: {
  }
})

4. Mqtt-Konfigurationsdatei schreiben

Erstellen Sie eine neue js-Datei unter utils unter src: 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']
}

#🎜 🎜# 5. Seitenimport und -verwendung

Dies wird in einer gemeinsamen Komponente eingeführt und verwendet, die von allen Seiten verwendet wird. Es kann auch in main.js verwendet werden (siehe Einführungsmethode zwei) #🎜 🎜##🎜 🎜#

Methode 1:

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())
      //设置订阅主题
      setTopics()
      //启动mqtt状态监听
      $store.commit('MQTT_SERVICE')
    })
    
    onUnmounted(() => {
      $store.commit('MQTT_CLOSE') //断开mqtt
    })
    
    return { }
  }    
})
</script>

Methode 2:

einführen Hauptsache Du Sie müssen eine Verbindung in main erstellen und die mqtt-Statusüberwachung im Rendering-Lebenszyklus der Homepage startenmain.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())
//设置订阅主题
setTopics()

app.use(ElementPlus)
app.use(store).use(router).mount('#app')

export default app

Homepage.vue:

<script>
import { onMounted, defineComponent, onUnmounted } from &#39;vue&#39;;
import $store from "@/store/index";
export default defineComponent ({
  setup(){
    onMounted(() => {
    //启动mqtt状态监听
      $store.commit(&#39;MQTT_SERVICE&#39;)
    })
    onUnmounted(() => {
      //关闭项目时断开mqtt
      //此处仅适用于从首页跳转到下一个页面后首页没有被销毁的情况,其它情况自行修改
      $store.commit(&#39;MQTT_CLOSE&#39;) 
    })
  }
})
</script>

Das obige ist der detaillierte Inhalt vonSo kapseln Sie VUE3+mqtt, um das Problem wiederholter Verbindungen bei Verwendung mehrerer Seiten zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!