Maison > Article > interface Web > Comment encapsuler VUE3+mqtt pour résoudre le problème des connexions répétées lors de l'utilisation de plusieurs pages
Dans un projet, plusieurs pages doivent utiliser mqtt pour recevoir des messages, mais dans ce cas, chaque page doit se connecter une fois à mqtt, configurer les informations sur les options, s'abonner à des sujets et recevoir à nouveau des messages, ce qui est très compliqué. Ce n'est pas pratique, je pense donc à encapsuler mqtt dans vuex afin qu'il puisse être utilisé sur plusieurs pages. De cette façon, je n'ai besoin de me connecter et de m'abonner qu'une seule fois, et les messages reçus peuvent être stockés dans vuex.
npm install mqtt
Utilisez l'exportation par défaut pour exposer l'application
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
Encapsulez le service mqtt dans VUEX pour résoudre le besoin de plusieurs pages. Lors de l'utilisation de mqtt pour recevoir des messages, chaque page doit se reconfigurer, se connecter, s'abonner à des sujets, etc.
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: { } })
Créez un nouveau fichier js sous utils sous 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'] }
Ceci est introduit et utilisé dans un composant public qui est utilisé par toutes les pages. Il peut également être utilisé dans main.js (voir la deuxième méthode d'introduction)
Première méthode : introduite dans le public. composant
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>
Méthode 2 : Introduite dans main
Cette méthode doit créer une connexion dans main et démarrer la surveillance de l'état mqtt dans le cycle de vie de rendu de la page d'accueil
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
Homepage.vue :
<script> import { onMounted, defineComponent, onUnmounted } from 'vue'; import $store from "@/store/index"; export default defineComponent ({ setup(){ onMounted(() => { //启动mqtt状态监听 $store.commit('MQTT_SERVICE') }) onUnmounted(() => { //关闭项目时断开mqtt //此处仅适用于从首页跳转到下一个页面后首页没有被销毁的情况,其它情况自行修改 $store.commit('MQTT_CLOSE') }) } }) </script>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!