Record the steps of using mqtt server to realize instant communication in vue

npm install mqtt --save

import mqtt from 'mqtt'

client: {}

  //Connect to the server connect() {
      let options = {
        username: "xxx",
        password: "xxxx",
        cleanSession : false,
        keepAlive:60,
        clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
        connectTimeout: 4000
      }
      this.client = mqtt.connect('ws://192.168.xxx.xx:8083/mqtt',options);
      this.client.on("connect", (e)=>{
        console.log("Successfully connected to the server:",e);
        //Subscribe to three topics named 'top/#', 'three/#' and '#' this.client.subscribe(['top/#', 'three/#', '#'], { qos: 1 }, (err)=> {
          if (!err) {
            console.log("Subscription successful");
            //Publish a message with the content 'hello, this is a nice day!' to the topic "pubtop" this.publish("pubtop", 'hello, this is a nice day!')
          } else {
            console.log('Message subscription failed!')
          }
        });
      });
      //Reconnect this.reconnect()
      //Has the connection been disconnected? this.mqttError()
      //Listen for information this.getMessage()
    }

    //Publish message @topic subject @message publish content publish(topic,message) {
      if (!this.client.connected) {
        console.log('Client not connected')
        return
      }
      this.client.publish(topic,message,{qos: 1},(err) => {
        if(!err) {
          console.log('The subject is' + topic + "Published successfully")
        }
      })
    }

    //Listen for received messages getMessage() {
      this.client.on("message", (topic, message) => {
        if(message) {
          console.log('Received from', topic, 'information', message.toString())
          const res = JSON.parse(message.toString())
          //console.log(res, 'res')
          switch(topic) {
             case 'top/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             case 'three/#' :
               this.msg = res
               break;
             default:
               return
               this.msg = res
           }
           this.msg = message
        }
      });
    },

    //Monitor whether the server connection fails mqttError() {
      this.client.on('error',(error) => {
        console.log('Connection failed:',error)
        this.client.end()
      })
    },

    //Unsubscribe unsubscribe() {
      this.client.unsubscribe(this.mtopic, (error)=> {
        console.log('Topic is' + this.mtopic + 'Unsubscribe successfully', error)
      })
    },

    //disconnect unconnect() {
      this.client.end()
      this.client = null
      console.log('The server has been disconnected!')
    },

    //Listen for server reconnection reconnect() {
      this.client.on('reconnect', (error) => {
          console.log('Reconnecting:', error)
      });
    },