npm i mqtt --save

import mqtt from 'mqtt'

data() {
	client: null,
    connection: {
      host: 'localhost',
      port: 8083, // 端口號(hào)
      endpoint: '/mqtt',
      clean: true,
      connectTimeout: 4000, // 超時(shí)時(shí)間
      reconnectPeriod: 4000,
      clientId: uuid.v4(), // 這是一個(gè)隨機(jī)生成的自定義的值
      cleanSession: true, // 是否清理Session
      keepAlive: 5 // 心跳間隔
    },
    mqttfalg: true, // 是否開啟 mqtt
    // 下邊三個(gè)的值是與后端約定好的，根據(jù)實(shí)際情況賦值
    ImgStart: '', 
    ImgSend: '',
    ImgEnd: ''
},
mounted() {
	// 創(chuàng)建連接
	this.createConnection()
},
beforeDestroy() {
	// 斷開 mqtt 連接，不然會(huì)一直監(jiān)聽消息
  	this.disConnect()
},
methods: {
	// 創(chuàng)建連接
    createConnection() {
      const { host, port, endpoint, ...options } = this.connection
      // 連接的 url
      const connectUrl = `ws://${host}:${port}${endpoint}`
      // 如果開啟了 mqtt
      if (this.mqttfalg) {
        this.client = mqtt.connect(connectUrl, options)
        this.client.on('connect', () => {
          console.log('連接成功!')
          // 關(guān)閉開關(guān)，不然會(huì)一直重復(fù)連接
          this.mqttfalg = false
          // 訂閱配置（這里的參數(shù)都是與后端約定好的，根據(jù)實(shí)際情況傳入）
          this.client.subscribe(this.ImgEnd, { qos: 2 })
          this.client.subscribe(this.ImgSend, { qos: 2 })
          this.client.subscribe(this.ImgStart, { qos: 2 })
        })
        // 連接出錯(cuò)執(zhí)行
        this.client.on('error', error => {
          console.log('連接出錯(cuò)', error)
        })
        // 重連時(shí)執(zhí)行
        this.client.on('reconnect', error => {
          console.log('正在重連', error)
        })
		// 監(jiān)聽收到的消息
        this.client.on('message', async (topic, data) => {
          const json = JSON.parse(data.toString())
          console.log('接到了消息', topic, json)
          // 如果收到的消息 topic 等于發(fā)送
          if (topic === this.ImgSend) {
            // 處理收到的消息 json
            console.log('收到的消息內(nèi)容', json)
          }
		  // 如果收到的消息 topic 等于結(jié)束，說明當(dāng)前最后一條消息已發(fā)送完畢
          if (topic === this.ImgEnd) {
            console.log('消息接收完畢')
          }
        })
      }
    },
    // 斷開連接
    disConnect() {
      if (this.client) {
        this.client.end()
        console.log('斷開連接')
      }
    },
}