vue 通过 mqtt 实现实时接收消息的操作方法

npm i mqtt --save

import mqtt from 'mqtt'

data() {
	client: null,
    connection: {
      host: 'localhost',
      port: 8083, // 端口号
      endpoint: '/mqtt',
      clean: true,
      connectTimeout: 4000, // 超时时间
      reconnectPeriod: 4000,
      clientId: uuid.v4(), // 这是一个随机生成的自定义的值
      cleanSession: true, // 是否清理Session
      keepAlive: 5 // 心跳间隔
    },
    mqttfalg: true, // 是否开启 mqtt
    // 下边三个的值是与后端约定好的，根据实际情况赋值
    ImgStart: '', 
    ImgSend: '',
    ImgEnd: ''
},
mounted() {
	// 创建连接
	this.createConnection()
},
beforeDestroy() {
	// 断开 mqtt 连接，不然会一直监听消息
  	this.disConnect()
},
methods: {
	// 创建连接
    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('连接成功!')
          // 关闭开关，不然会一直重复连接
          this.mqttfalg = false
          // 订阅配置（这里的参数都是与后端约定好的，根据实际情况传入）
          this.client.subscribe(this.ImgEnd, { qos: 2 })
          this.client.subscribe(this.ImgSend, { qos: 2 })
          this.client.subscribe(this.ImgStart, { qos: 2 })
        })
        // 连接出错执行
        this.client.on('error', error => {
          console.log('连接出错', error)
        })
        // 重连时执行
        this.client.on('reconnect', error => {
          console.log('正在重连', error)
        })
		// 监听收到的消息
        this.client.on('message', async (topic, data) => {
          const json = JSON.parse(data.toString())
          console.log('接到了消息', topic, json)
          // 如果收到的消息 topic 等于发送
          if (topic === this.ImgSend) {
            // 处理收到的消息 json
            console.log('收到的消息内容', json)
          }
		  // 如果收到的消息 topic 等于结束，说明当前最后一条消息已发送完毕
          if (topic === this.ImgEnd) {
            console.log('消息接收完毕')
          }
        })
      }
    },
    // 断开连接
    disConnect() {
      if (this.client) {
        this.client.end()
        console.log('断开连接')
      }
    },
}