Bagaimana untuk merangkum VUE3+mqtt untuk menyelesaikan masalah sambungan berulang apabila menggunakan berbilang halaman

Senario:

Dalam projek, berbilang halaman perlu menggunakan mqtt untuk menerima mesej, tetapi dalam kes ini, setiap halaman perlu bersambung ke mqtt sekali dan mengkonfigurasi maklumat pilihan dan melanggan topik sekali lagi. menerima mesej adalah sangat menyusahkan, jadi saya berfikir tentang merangkumkan mqtt ke dalam vuex supaya ia boleh digunakan pada berbilang halaman Dengan cara ini, anda hanya perlu menyambung dan melanggan sekali, dan mesej yang diterima boleh disimpan dalam vuex.

1. Pasang mqtt

npm install mqtt

2. Dedahkan contoh vue dalam main.js

Gunakan lalai eksport untuk mendedahkan apl

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

Enkapsulasi perkhidmatan mqtt ke dalam VUEX, yang boleh menyelesaikan masalah apabila berbilang halaman perlu menggunakan mqtt untuk menerima mesej, setiap halaman mesti dikonfigurasikan, disambungkan dan melanggan topik sekali lagi

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. Tulis fail konfigurasi mqtt

Buat fail js baharu di bawah utils di bawah 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. Pengenalan dan penggunaan halaman

Berikut ialah halaman di mana semua halaman Ia boleh diperkenalkan ke dalam komponen awam untuk digunakan, atau ia boleh digunakan dalam main.js (lihat kaedah pengenalan dua)

Kaedah satu: Pengenalan kepada komponen awam

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>

Kaedah 2: Perkenalkan

ke dalam utama Kaedah ini perlu mencipta sambungan dalam utama dan memulakan pemantauan status mqtt dalam kitaran hayat halaman utama

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())
//设置订阅主题
setTopics()

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

export default app

Home.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>

Atas ialah kandungan terperinci Bagaimana untuk merangkum VUE3+mqtt untuk menyelesaikan masalah sambungan berulang apabila menggunakan berbilang halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!