uniapp vue3如何使用mqtt实现实时通信

在uniapp vue3项目中，如何通过mqtt协议实现实时通信？需要引入哪些依赖包？具体的实现步骤是什么？有没有完整的示例代码可以参考？在开发过程中可能会遇到哪些常见问题以及如何解决？

2 回复

在uniapp vue3中使用mqtt，先安装mqtt.js库。通过npm安装：npm install mqtt --save。然后在页面中引入：import mqtt from 'mqtt'。创建连接：const client = mqtt.connect('mqtt://broker地址')。订阅主题：client.subscribe('topic')，监听消息：client.on('message', callback)。发送消息：client.publish('topic', '消息')。注意在onUnload中断开连接。


在 UniApp Vue3 中使用 MQTT 实现实时通信，可以通过以下步骤完成：

1. 安装 MQTT 客户端库

使用 mqtt 库（推荐）或 mqtt.js：

npm install mqtt --save

2. 创建 MQTT 管理模块（推荐）

在 utils/mqtt.js 中封装连接逻辑：

import mqtt from 'mqtt'

class MQTTClient {
  constructor() {
    this.client = null
    this.options = {
      clean: true,
      connectTimeout: 4000,
      clientId: 'uni-app-' + Date.now(),
    }
  }

  connect(url, options = {}) {
    return new Promise((resolve, reject) => {
      this.client = mqtt.connect(url, { ...this.options, ...options })
      
      this.client.on('connect', () => {
        console.log('MQTT Connected')
        resolve(this.client)
      })
      
      this.client.on('error', (error) => {
        console.error('MQTT Error:', error)
        reject(error)
      })
    })
  }

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

  publish(topic, message) {
    if (this.client) {
      this.client.publish(topic, JSON.stringify(message))
    }
  }

  onMessage(callback) {
    if (this.client) {
      this.client.on('message', (topic, payload) => {
        callback(topic, JSON.parse(payload.toString()))
      })
    }
  }

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

export default new MQTTClient()

3. 在 Vue3 组件中使用

<template>
  <view>
    <text>MQTT实时通信示例</text>
    <button @click="connectMQTT">连接</button>
    <button @click="sendMessage">发送消息</button>
  </view>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import mqttClient from '@/utils/mqtt.js'

const message = ref('')

const connectMQTT = async () => {
  try {
    // 使用公共MQTT代理（测试用）
    await mqttClient.connect('wss://test.mosquitto.org:8081')
    
    mqttClient.subscribe('test/topic')
    
    mqttClient.onMessage((topic, payload) => {
      console.log('收到消息:', payload)
      message.value = payload.content
    })
  } catch (error) {
    console.error('连接失败:', error)
  }
}

const sendMessage = () => {
  mqttClient.publish('test/topic', {
    content: 'Hello MQTT',
    timestamp: Date.now()
  })
}

onUnmounted(() => {
  mqttClient.disconnect()
})
</script>

4. 注意事项

  • 平台差异：H5 使用 WebSocket 连接，App 可能需要配置网络权限
  • 连接地址：根据服务端支持使用 ws:// 或 wss://
  • 生命周期：在页面卸载时断开连接
  • 错误处理：添加完整的错误处理和重连机制

5. 服务端配置示例（Node.js）

const mqtt = require('mqtt')
const client = mqtt.connect('mqtt://localhost')

client.on('connect', () => {
  client.subscribe('test/topic')
})

client.on('message', (topic, message) => {
  console.log('收到:', message.toString())
})

这种方式可以实现 UniApp Vue3 中的实时双向通信，适用于聊天、实时数据推送等场景。记得根据实际需求调整主题管理和消息格式。

回到顶部