vue-cli3使用mqtt

前言：因公司业务，最近在做一个物联网平台的后台管理系统。采用的技术是vue-cli3，elementUI。因为有需求对设备数据进行实时监控，故前端需要使用mqtt来接收实时数据。将个人踩坑整理出来，希望对大家有帮助。

MQTT是什么

MQTT是机器对机器(M2M)/物联网(IoT)连接协议。它被设计为一个极其轻量级的发布/订阅消息传输协议。对于需要较小代码占用空间和/或网络带宽非常宝贵的远程连接非常有用，是专为受限设备和低带宽、高延迟或不可靠的网络而设计。这些原则也使该协议成为新兴的“机器到机器”(M2M)或物联网(IoT)世界的连接设备，以及带宽和电池功率非常高的移动应用的理想选择。例如，它已被用于通过卫星链路与代理通信的传感器、与医疗服务提供者的拨号连接，以及一系列家庭自动化和小型设备场景。它也是移动应用的理想选择，因为它体积小，功耗低，数据包最小，并且可以有效地将信息分配给一个或多个接收器。
在我个人理解，其实就跟websocket差不多，前端与后台一直建立连接，后台会持续主动推过来数据，不用我们主动去发请求去请求数据。是一个双向通信连接。
具体大家可以看mqtt官网自行了解mqtt中文网

vue项目中如何使用mqtt

1.安装mqtt

npm i mqtt --save

2.使用mqtt

这里我将mqtt配置写到一个单独的js中

import mqtt from 'mqtt'
//这里配置的是一些需要的参数
const options = {
  port: 443,
  clientId: "",
  username: "",
  password: "",
  clean: true
};
//建立mqtt连接实例
const client = mqtt.connect("wss://www.xxxxxx.cn/mqtt",options);
export default client

因为在项目中 有好几个模块都需要这个实时数据，所以此时需要在切换路由时保持数据一直在接收。如果不保存在一个公共的地方，在路由跳转时连接就会断开，需要重新在新的路由页面建立连接。所以我就将接收到的数据存到了vuex中，这样全部的组件都可以取到实时数据，将建立连接放在了app.vue下。
在vuex中的stroe.js中

import client from '@/mqtt'  // 引入刚才配的mqtt

state ={
  mqttData:{}  //接收到mqtt实时数据
}
mutations = {
  SET_MQTTDATA:(state,data)=>{
    state.mqttData = data;
  }
}
actions = {
  connectMqtt({ commit }){
    client.on("connect", function() {
      console.log("mqtt连接成功")
      client.subscribe("/test/thing/data/post", function(err) {}) //这里是需要订阅的topic
    })
    client.on("message", function(topic, message) {
      let data = JSON.parse(message)
      commit('SET_MQTTDATA',data)
      }
    })
  }
}

subscribe是监听某个topic,然后可以通过on来监听返回来的数据，将数据存到state中，因为数据是实时变化的，可以将data存到 getters中

getters = {
  mqtt_data:state => state.mqttData
}

在app.vue中触发监听

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted(){
    this.$store.dispatch('connectMqtt');
  },
}
</script>

这样系统一进来就会建立连接，实时获取数据，刷新页面会重新触发mouted函数，重新建立连接。
在页面中使用

computed:{
        mqttData(){
            return this.$store.getters.mqtt_data
        }
    },
    watch:{
       mqttData(val){
           //数据变化，进行相应操作
       } 
    },

因为在vue中使用mqtt资料很少，自己摸索着暂时完成了阶段的开发任务，应该还有更好更优的处理方式，希望大家多多指正，一起进步。