最近的项目需要使用mqtt协议与设备建立直接关联来进行数据通讯，因此对此做个记录。
 在vue中使用mqtt通讯协议与后台建立双向通讯有几个注意点：
 1.通过浏览器来建立的mqtt通道其实质是基于websocket来进行通讯的。
 –因此如果有要通过tcp之类的请求，这个请在后台服务器那边配置支持ws，并且开放相关端口，因为前端这边不好处理。
 2.市场上有各种mqtt的js插件。都是大同小异，而其中比较出色的就是mqtt.js。因此本例使用mqtt.js来进行操作。
 mqtt.js：https://www.npmjs.com/package/mqtt
 
安装mqtt.js
 
npm install mqtt --save
 
vue中使用
 
第一步：建立一个文件：如mqtt-vue.js
 其中的内容如下：
 
import mqtt from "mqtt";
let client = {};
export default {
  // 通过mqtt建立连接，执行一次即可，如：在created里面创建连接startMqtt，然后在destroyed中断开连接endMqtt.
  startMqtt() {
    return new Promise((resove, reject) => {
      // mqtt.connect(ip,option)介绍：
      // 第一个参数是ip地址---必须--后台给
      // 第二个参数是连接配置对象，其内容如下：
      /* 
      {
      	clientId：‘xxx’，// 唯一id标识，多连接区分用 ---必须
      	username：‘xxx’， // 账号名称 ---必须-- 后台给
      	password: "xxx",// 账号密码 ---必须-- 后台给
      	port: 9001 // 端口号 ---必须-- 后台给
      	...... // 其余的参考npm介绍
	  }
	  */
      client = mqtt.connect("mqtt://101.101.101.101", {
        clientId:
          "mqttjs_" +
          Math.random()
            .toString(16)
            .substr(2, 8),
        username: "xxx", 
        password: "xxx", 
        port: 9001
      });
      client.on("connect", function(e) {
        console.log("mqtt连接成功!", e);
        resove(true);
      });
      client.on("error", function(e) {
        console.log("mqtt连接错误!", e);
        reject('mqtt连接失败');
      });
    });
  },
  // 断开连接
  endMqtt() {
    console.log("mqtt断开连接!");
    client.end();
  },
  // 监听传递数据 callback是一个回调函数
  mqttMessage(callback) {
    client.on("message", (topic, message) => {
      callback(topic, message);
    });
  },
  // 订阅主题-主题的路径由后台给，订阅了主题后就可以在mqttMessage中接受到传递的信息
  subscribe(topic) {
    console.log("mqtt订阅了(" + topic + ")主题");
    client.subscribe(topic);
  },
  // 广播内容，广播是将需要传递的消息通知到后台。
  publish(topic, message) {
    console.log(
      "mqtt给(" + topic + ")主题，广播了" + JSON.stringify(message) + "信息"
    );
    client.publish(topic, JSON.stringify(message));
  }
};
 
第二步：在main.js中引入并且注册在vue原型链上：
 main.js文件中内容如下：
 
// 导入mqtt协议通讯，并且注册在原型链上
import mMQTT from './mqtt';
Vue.prototype.$mqtt = mMQTT;
 
第三步：在需要使用的组件中调用方法，其测试如下:
 
 
使用效果