VUE3+mqtt怎么封装解决多页面使用需重复连接等问题

发布时间:2023-04-13 13:43:35 作者:iii
来源:亿速云 阅读:229

这篇文章主要介绍“VUE3+mqtt怎么封装解决多页面使用需重复连接等问题”,在日常操作中,相信很多人在VUE3+mqtt怎么封装解决多页面使用需重复连接等问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE3+mqtt怎么封装解决多页面使用需重复连接等问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

场景:

在做的一个项目中多个页面都需要使用到mqtt接收消息,但这样的话每个页面就都需要连接一次mqtt,并且要再次配置options信息、订阅主题、接收消息,非常的不方便,因此琢磨将mqtt封装到vuex中,使其可以多页面通用,这样只需要连接订阅一次,接收到的消息可以存储在vuex中。

一、安装mqtt

npm install mqtt

二、暴露出main.js中的vue实例

使用export default暴露出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

三、封装mqtt

将mqtt服务封装到VUEX中,可以解决多页面需要用到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: {
  }
})

四、编写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']
}

五、页面引入并使用

这里是在一个所有页面都要用到的一个公共组件中引入使用的,也可以在main.js中使用(看引入方法二)

方法一:公共组件中引入

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>

方法二:main中引入

该方法需要在main中创建连接,在首页的渲染生命周期中启动mqtt状态监听

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

首页.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>

到此,关于“VUE3+mqtt怎么封装解决多页面使用需重复连接等问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. springboot如何实现mqtt物联网
  2. 怎么在SpringBoot2.0中使用MQTT实现一个消息推送功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

mqtt vue3

上一篇:Windows无法初始化此硬件的设备驱动程序怎么修复

下一篇:怎么防止Mac在显示器关闭时进入睡眠状态

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》