在 Vue3 中使用 MQTT 实现通信

一、安装 MQTT 客户端库

我们使用 mqtt.js，它是一个支持浏览器环境的 MQTT 客户端库。通过以下命令安装：

bash复制

npm install mqtt --save
# 或
yarn add mqtt

二、创建 MQTT 连接工具类（可选）

为了方便管理和复用 MQTT 客户端，我们创建一个工具类 mqttClient.js，放在 src/utils 目录下：

JavaScript复制

import mqtt from 'mqtt'

// MQTT 配置
const options = {
  clean: true,
  connectTimeout: 4000,
  clientId: 'vue3-client-' + Math.random().toString(16).substr(2, 8),
  username: 'your_username', // 如果需要认证
  password: 'your_password'
}

// MQTT 代理地址（示例使用公共测试服务器）
const brokerUrl = 'ws://test.mosquitto.org:8080/mqtt'

class MQTTClient {
  constructor() {
    this.client = null
  }

  connect() {
    this.client = mqtt.connect(brokerUrl, options)

    // 连接成功
    this.client.on('connect', () => {
      console.log('MQTT Connected')
      this.subscribe('your/topic')
    })

    // 错误处理
    this.client.on('error', (error) => {
      console.error('MQTT Error:', error)
    })
  }

  subscribe(topic) {
    this.client.subscribe(topic, { qos: 0 }, (err) => {
      if (!err) console.log(`Subscribed to ${topic}`)
    })
  }

  // 接收消息处理
  onMessage(callback) {
    this.client.on('message', (topic, message) => {
      callback(topic, message.toString())
    })
  }

  // 发送消息
  publish(topic, message) {
    this.client.publish(topic, message, { qos: 0 })
  }

  disconnect() {
    this.client?.end()
  }
}

export const mqttClient = new MQTTClient()

三、在 Vue 组件中使用

接下来，我们创建一个 Vue 组件来使用 MQTT 客户端。以下是组件代码：

vue复制

<template>
  <div>
    <h1>MQTT Data</h1>
    <button @click="connect">Connect</button>
    <button @click="disconnect">Disconnect</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
    <input v-model="inputMessage" placeholder="Type message...">
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { mqttClient } from '@/utils/mqttClient'

const messages = ref([])
const inputMessage = ref('')

// 初始化连接
const connect = () => {
  mqttClient.connect()
  mqttClient.onMessage((topic, message) => {
    messages.value.push(`[${topic}]: ${message}`)
    // 如果是 JSON 数据：
    // const data = JSON.parse(message)
    // 处理数据...
  })
}

// 发送消息
const sendMessage = () => {
  if (inputMessage.value.trim()) {
    mqttClient.publish('your/topic', inputMessage.value)
    inputMessage.value = ''
  }
}

// 断开连接
const disconnect = () => {
  mqttClient.disconnect()
  messages.value = []
}

// 组件卸载时自动断开
onBeforeUnmount(() => {
  disconnect()
})
</script>

四、关键点说明

1. 连接配置

• 使用 ws:// 或 wss://（WebSocket 安全协议）。
• 公共测试服务器（如 test.mosquitto.org 和 broker.emqx.io）仅用于开发，生产环境需自建服务（如 EMQX、Mosquitto）。

2. 消息处理

• 使用 onMessage 回调处理实时数据。
• 如果数据是 JSON 格式，使用 JSON.parse(message)。

3. 生命周期管理

• 在 onMounted 中连接。
• 在 onBeforeUnmount 中断开连接，防止内存泄漏。

4. QoS 级别

根据需求设置 QoS（0：最多一次，1：至少一次，2：精确一次）。

五、安全建议

1. 使用 wss:// 加密通信。
2. 启用身份验证（用户名/密码或 Token）。
3. 限制客户端权限（通过 ACL）。

六、测试服务器推荐

• Mosquitto：ws://test.mosquitto.org:8080/mqtt
• EMQX：ws://broker.emqx.io:8083/mqtt

总结

通过以上步骤，我们可以在 Vue3 项目中轻松实现 MQTT 通信。如果需要处理更复杂的场景（如自动重连），可以进一步扩展 mqttClient 类的功能。希望本文对你有所帮助！

你可以将以上内容保存为 .md 文件，然后发布到掘金或其他支持 Markdown 的平台。