基于Vue的mqttws31.js连接mqtt服务器（WebSocket）

网络上有关于mqttws31.js连接mqtt服务器的例子：http://blog.csdn.net/leytton/article/details/51896951

但是我遇到的问题是必须在vue工程里面连接mqtt服务，也想用mqttws31.js，声明这个连接用的是WebSocket至于tcp协议可以自行网上搜索

下面就来说说我的改造，改造的基础是在上面连接的js文件的基础上修改成vue可以识别的

1.首先要把mqttws31.js引入我你所用的html页面，因为我的工程是vue单页面，所以就引入到了index.html中了

2.修改代码如下：

<template></template><style></style><script>  export default {    name: 'mqttws',    data() {      return {        client : new Paho.MQTT.Client("IP地址", 端口号, ""),//第三个参数是clientID可以为空        topic: "XXXX"// 订阅的主题      }    },    created () {      this.client.connect({onSuccess:this.onConnect});//连接服务器并注册连接成功处理事件      this.client.onConnectionLost = this.onConnectionLost;//注册连接断开处理事件      this.client.onMessageArrived = this.onMessageArrived;//注册消息接收处理事件    },    methods : {      onConnectionLost:function (responseObject) {        if (responseObject.errorCode !== 0) {          console.log("onConnectionLost:"+responseObject.errorMessage);          console.log("连接已断开");        }      },      onMessageArrived: function(message) {        console.log("收到消息:"+message.payloadString);      },      onConnect : function() {        console.log("onConnected");        this.client.subscribe(this.topic);//订阅主题      }    }  }</script>

3.最后把这个文件引入到你要用到数据的父组件内就行了，上下的就是接受数据的事情了。

解决了这个问题 在这里Mark下，技术有限，大神发现不对的地方可以指出！