在一个项目中，前端用到的数据是设备接入后主动上报的，所以使用了mqtt

第一步，看看GitHub有什么好的插件

选择mqtt.js，文档写的不错，直接有代码示例

第二步，开始开发

一开始在每个vue文件每次交互都照着文档直接写一套，从创建客户端到连接到订阅到监听

var mqtt = require('mqtt')
var client  = mqtt.connect('mqtt://test.mosquitto.org')

client.on('connect', function () {
  client.subscribe('presence', function (err) {
    if (!err) {
      client.publish('presence', 'Hello mqtt')
    }
  })
})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

等连上真实mqtt服务器，我就傻了，上面的写法是错误的

注意事项1：mqtt客户端最好整个项目创建一个，如果一个页面创建一个，可能把服务器搞崩溃

注意事项2：client.on('connect'）是一个回调，客户端创建成功并连接后触发，如果整个项目只有一个客户端，那么也就只有一个.on('connect'）

注意事项3：mqtt保留消息会在订阅的时候自动发送，但是重复订阅并不会重复发送，所以当切换页面的时候，再切回来，mounted里面通过mqtt获取数据就获取不到了

注意事项4：client.on('message'）监听多次，就算mqtt服务器只发送一次，代码却会打印多遍

注意事项4：说到这里，一个解决办法就是写一个公共的js文件，来执行mqtt相关的创建、连接、订阅、监听，然后把数据存到vuex中，在每个vue文件里面获取store的值

第三步，兼容ie

当项目快要写完的时候，我发现却不兼容ie浏览器，因为mqtt是基于socket，所以不兼容ie10以下，为什么ie11也出不来呢？后来经过试验发现是mqttjs依赖含有es6代码，而默认是不转译node_modules文件夹下面的es6代码的，首先确认安装了babel-polyfill，然后在webpack.base.conf.js(cli2)里面加上

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'), 
          resolve('test'), 
          resolve('node_modules/mqtt'),
          resolve('node_modules/mqtt-packet'),
        ]
      }]

然而发现并没有效果，我怀疑是转码并没有成功，所以改变策略，不用npm安装，改用cdn引入，先在bootcdn找到mqtt的源码，

再放在/src/assets下面，放在src下面是为了默认转译，然后在main.js里面import './assets/lib/mqtt' 引入

完成了！

第四步，IE的滚动条太丑了

请看下集 perfect scrollbar插件无限上拉bug，以及export default (imported as xxx) was not found in xxx报错