vue中使用mqtt实现实时通信

简介

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，是 TCP/IP 的再封装，由 IBM 在 1999 年发布。MQTT 最大优点在于，地开销，少流量实现网络通信

协议

mqtt 协议中分为客户端和服务端。服务端一般由消息 broker 实现，MQTT 与传统 HTTP 协议有所不同，所有接入的设备都为客户端。
客户端有两种身份发布者（Publish）、订阅者（Subscribe），也可以同时具备两者身份。
顾名思义，发布者可以发布消息，订阅者可以接受消息

消息内容

MQTT 传输的消息分为：主题（Topic）和负载（payload）两部分：
（1）Topic，主题，订阅者订阅指定主题后，会收到其他发布者发送到该主题的数据；
（2）payload，具体的载荷
Vue3 中使用以及订阅
没有安装可使用 npm install mqtt --save

引用mqtt库 不要直接引用mqtt 会报错
import mqtt from 'mqtt/dist/mqtt'
// 连接选项
      controlOptions: {
        clean: true, // true: 清除会话, false: 保留会话
        connectTimeout: 5000, // 超时时间
        // 认证信息 最好使用不同的
        clientId: `mqtt_${Math.random().toString(16).slice(3)}`,
        username: '账号',
        password: '密码'
      }
// 初始化
createSocketConnect() {
      this.controlWsUrl = `${import.meta.env.VITE_APP_BASE_WS_URL}/mqtt`
      // 创建实例 传入地址和参数对象
const client = mqtt.connect(this.controlWsUrl, this.options)
      // 保存实例
this.clientInstance = client

      client.on('reconnect', (error) => {
        console.log('正在重连:', error)
      })

     client.on('connect', (con) => {
        console.log('连接成功', con)
// 订阅主题
        this.doSubscribe(this.notificationSubscription)
      })

      client.on('error', (error) => {
        console.log('连接失败:', error)
      })

   	  client.on('message', (topic, message) => {
        console.log('收到消息：', topic, message)
// 处理消息方法
        this.handleTopicMsgBox(topic, message)
      })
},
// 订阅主题
    doSubscribe(subscribe) {
      const { topic, qos } = subscribe
      this.clientInstance.subscribe(topic, { qos }, (error, res) => {
        if (error) {
          console.log('订阅主题错误', error)
          return
        }
        this.subscribeSuccess = true
        console.log('订阅主题', res)
      })
    },
    // 取消订阅
    doUnSubscribe(subscribe) {
      const { topic } = subscribe
      this.clientInstance?.unsubscribe(topic, (error) => {
        if (error) {
          console.log('退订错误', error)
        }
      })
    },
    // 发送消息
    doPublish() {
      const topic = '主题名',
        qos = 0,
        payload = '{ "msg": "Hello, 我是发布的消息." }'
      this.clientInstance?.publish(topic, payload, qos, (error) => {
        if (error) {
          console.log('发布错误', error)
        }
      })
    },
    // 断开连接
    destroyConnection() {
      if (this.clientInstance) {
        try {
          this.clientInstance.end()
          this.clientInstance = null
          console.log('成功断开连接!')
        } catch (error) {
          console.log('断开连接失败', error.toString())
        }
      }
}

上面是一些基础使用的方法，我是在pinia中单独创建的文件，可以作为参考 具体的也可以查看官网 MQTT JavaScript 客户端库 | EMQX 4.4 文档

作者：刘云辉