vue-cli中使用mqtt通信

为方便上手，放一个项目的参考链接https://github.com/xieyidi/mqtt
目前多数项目使用mqtt协议和前端通信，都没有在脚手架上，小编查阅了好多资料，亲测了一种可用的方法，手把手分享一下：
1、首先在项目的入口文件index html用script引入mqttws的js文件

引入mqtt.png
2、将mqtt通信逻辑封装成一个vue组件

<template>
  <div id="mqttws">
  <input type="text" id="msg" v-model="msg"/>
    <input type="button" value="Send" @click="send" />
    <input type="button" value="Start" @click="start"/>
    <input type="button" value="Stop" @click="stop"/>
  </div>
</template>
<style>

</style>
<script>
  export default {
    name: 'mqttws',
    data() {
      return {
        hostname: '39.106.63.136',
        port: 443,
        clientId: 'clientId-NX75qTbKES',
        timeout: 5,
        keepAlive: 50,
        cleanSession: false,
        ssl: false,
        userName: 'hj',
        password: '123456',
        topic: '001/in',
        client:{},
        options: {},
        msg:'order',
        count:0
      }
    },
    created : function() {
      this.client = new Paho.MQTT.Client('39.106.63.136', 443, 'clientId-NX75qTbKES');
      console.log(this.client);
      var _client=this.client;
      var opt = this.options =
        {
          invocationContext: {
            host: '39.106.63.136',
            port: 443,
            path: _client.path,
            clientId: 'clientId-NX75qTbKES'
          },
          timeout: 5,
          keepAliveInterval: 50,
          cleanSession: false,
          useSSL: false,
          userName: 'hj',
          password: '123456',
          onSuccess: function() {
            console.log("onConnected");
            _client.subscribe('001/in');//订阅主题
          },
          onFailure: function (e) {
          console.log(e);
          }
        };
      this.client.connect(opt);//连接服务器并注册连接成功处理事件
      this.client.onConnectionLost = this.onConnectionLost;//注册连接断开处理事件

      this.client.onMessageArrived = this.onMessageArrived;//注册消息接收处理事件
//      console.log('after onlost');
    },
//    mounted : function (){
//      var opt = this.options;
//      this.client.connect(opt);//连接服务器并注册连接成功处理事件
//      this.client.onConnectionLost = this.onConnectionLost;//注册连接断开处理事件
//
//      this.client.onMessageArrived = this.onMessageArrived;//注册消息接收处理事件
//      console.log('after onlost');
//    },
    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('001/in');//订阅主题
      },
      send : function (){
        var s = this.msg;
        if(s){
          s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(s)+", from: web console}";
          var message = new Paho.MQTT.Message(s);
          message.destinationName = this.topic;
          this.client.send(message);
          this.msg = '';
        }
      },
      start : function(){
        window.tester = window.setInterval(function(){
          if(this.client.isConnected){
            var s = "{time:"+new Date().Format("yyyy-MM-dd hh:mm:ss")+", content:"+(this.count++)+", from: web console}";
            var message = new Paho.MQTT.Message(s);
            message.destinationName = this.topic;
            this.client.send(message);
          }
        }.bind(this), 1000);
      },
      stop : function (){
        window.clearInterval(window.tester);
      }
    }
  }
</script>

3、在主组件中引入这个子组件

引入组件.png