Vue项目创建并使用MQTT以及MQTT管理工具

mqtt配置好后，就可以直接使用了

Vue项目MQTT客户端详细配置

首先在main.js里面new一个mqtt

new myMqtt(`/ns/c2a/test/#`, data => {  // '/ns/c2a/test/#' 为主题
  Vue.prototype.$gettingData(data);
});

在eventBus.js里面写挂载方法，如下，作用是其他网页可以直接调用mqtt

export default {
  $reciveData:{},
  $indexData:{},
  install (Vue, options) {
    Vue.prototype.$gettingData = function (data) {
      this.$reciveData = data
      Bus.$emit("reciveEvent", data);
    }
  }
}

引入eventBus，并在created里使用mqtt

import Bus from "@/eventBus";
created(){
  var _this = this;
  Bus.$on('reciveEvent',(reciveMessage) => {
    const data = JSON.parse(reciveMessage);
    _this.getTestData(data)
  });
}

mqtt常用管理工具如下：

这是mqtt自带的工具，网页输入你的mqtt host并且端口设为18083即可进入，在这里可以查看你当前host下的所有正在运作的mqtt

这是mqttx，一个非常好用的mqtt工具，你可以直接连接上你的mqtt，设置主题，然后就可以在软件中收发消息