여러 페이지 사용 시 반복 연결 문제를 해결하기 위해 VUE3+mqtt를 캡슐화하는 방법

시나리오:

한 프로젝트에서 여러 페이지가 메시지를 수신하려면 mqtt를 사용해야 하는데 이 경우 각 페이지가 mqtt에 한 번씩 연결하고 옵션 정보를 구성하고 주제를 구독하고 메시지를 다시 수신해야 하는데 이는 매우 번거롭기 때문에 mqtt를 vuex로 캡슐화해서 여러 페이지에서 사용할 수 있도록 하는 방법을 생각 중입니다. 이렇게 하면 한 번만 연결하고 구독하면 수신된 메시지를 vuex에 저장할 수 있습니다.

1. mqtt

npm install mqtt

2를 설치합니다. main.js에서 vue 인스턴스를 노출합니다.

export 기본값을 사용하여 앱을 노출합니다.

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. mqtt를 캡슐화합니다.

여러 페이지에 대한 필요성을 해결합니다. mqtt를 사용하여 메시지를 수신할 때 각 페이지는 재구성, 연결, 주제 구독 등을 수행해야 합니다.

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 구성 파일 작성

src 아래 utils 아래에 새 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']
}

5 , 페이지에서 가져와서 사용합니다

모든 페이지에서 사용하는 공용 컴포넌트에 도입하여 사용합니다. main.js에서도 사용할 수 있습니다(소개 방법 2 참조)

방법 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>

방법 2: 메인에 도입됨

이 방법은 메인에서 연결을 생성하고 홈페이지

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의 렌더링 수명 주기에서 mqtt 상태 모니터링을 시작해야 합니다.

아아아아

위 내용은 여러 페이지 사용 시 반복 연결 문제를 해결하기 위해 VUE3+mqtt를 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!