vue 通过 mqtt 实现实时接收消息

一. MQTT 简介

‌MQTT（消息队列遥测传输）是一种基于发布/订阅模式的轻量级消息协议，适用于硬件性能有限的远程设备和网络状况不佳的环境。‌它工作在TCP/IP协议之上，具有轻量、简单、开放和易于实现的特点，广泛应用于物联网（IoT）、机器与机器（M2M）通信、智能家居等领域。

二. MQTT 的基本组成

MQTT协议由固定头、可变头和消息体三部分组成：

‌固定头‌：每个消息都有固定头，但其长度不固定，范围为2-5个字节。固定头用于表示消息的长度和其他控制信息。
‌可变头‌：存储消息相关的属性，如协议名、协议版本号、心跳时长、主题名、消息ID等。不同类型的消息，可变头中的内容也不同。
‌消息体‌：实际发送的数据。例如，CONNECT消息体包含客户端标识、用户名、密码等信息；PUBLISH消息体则是实际发送的消息内容。

三. MQTT 的使用

1. 安装

npm i mqtt --save

2. 引入

import mqtt from 'mqtt'

3. 使用

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('断开连接')
      }
    },
}