How to encapsulate VUE3+mqtt to solve the problem of repeated connection when using multiple pages

Scenario:

In a project, multiple pages need to use mqtt to receive messages, but in this case, each page needs to connect to mqtt once, and configure options information and subscribe to topics again. , receiving messages is very inconvenient, so I am thinking about encapsulating mqtt into vuex so that it can be used on multiple pages. In this way, you only need to connect and subscribe once, and the received messages can be stored in vuex.

1. Install mqtt

npm install mqtt

2. Expose the vue instance in main.js

Use export default to expose the 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

3. Encapsulation mqtt

Encapsulate the mqtt service into VUEX, which can solve the problem that when multiple pages need to use mqtt to receive messages, each page must configure, connect, and subscribe to topics again

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. Write mqtt configuration file

Create a new js file under utils under 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. Page introduction and use

Here is a page where all pages If you want to introduce it into a public component, you can also use it in main.js (see the introduction method two)

Method one: introduce it into the public component

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>

Method 2: Introduction into main

This method needs to create a connection in main and start mqtt status monitoring in the rendering life cycle of the homepage

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>

The above is the detailed content of How to encapsulate VUE3+mqtt to solve the problem of repeated connection when using multiple pages. For more information, please follow other related articles on the PHP Chinese website!