在vue项目中使用mqtt和qccode实现扫码登录

import QRCode from 'qrcodejs2' // 引入qrcode

import { v1 as uuidv1 } from 'uuid'

import PahoMQTT from 'paho-mqtt'

  mounted() {   

    this.clientId = uuidv1()    

    let codeUrl = '扫码要跳转的地址‘  

    this.qrcode(codeUrl)    

    this.CreateMQTT()

}

 methods: {

    qrcode(url) {     

         let qrcode = new QRCode('qrcode', {        

         text: url, // 二维码地址

         width: 230,

         height: 230,

         colorDark: '#000000', colorLight: '#ffffff',                                                                   correctLevel: QRCode.CorrectLevel.H,                                                                              })                                                                                                                                   }, 

   CreateMQTT() {                                                                                                                         let rand = Math.ceil(Math.random() * 10000) + ''                                                    

         this.topic = '/******/' + this.clientId         

         client = new PahoMQTT.Client('xxx.cn', Number(8084), this.topic)                                                                                                                                                                                 client.onConnectionLost = this.onConnectionLost 

        //注册连接断开处理事件                                                                         

         client.onMessageArrived = this.onMessageArrived 

        //注册消息接收处理事件               client.connect({ onSuccess: this.onConnect, useSSL: true })                                     }，

   onConnect() {                                                                                                                              client.subscribe(this.topic, 0) //订阅主题                                                                             console.log('onConnected')                                                                                        },

   onConnectionLost: function (responseObject) {                                                                          if (responseObject.errorCode !== 0) {                                                                                        console.log('onConnectionLost:' + responseObject.errorMessage)                  setTimeout(function () {                                                                                                              console.log('重连'）                                                                                                            client.connect({ onSuccess: this.onConnect, useSSL: true })                                     }, 10000) }                                                                                                                   },

  onMessageArrived(message) {                                                                                                      console.log('onMessageArrived:' + message.payloadString)                                              if (message.payloadString == 'close') return                                                                     //接收到数据后可以进行后续操作...  },

}