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

在uniapp中如何使用MQTT实现实时通信？需要引入哪些库或插件？有没有推荐的MQTT客户端实现方案？具体的连接配置和订阅/发布消息的代码示例是怎样的？如何确保在不同平台（H5/小程序/App）上的兼容性？

2 回复

在uni-app中使用MQTT实现实时通信，步骤如下：

  1. 安装MQTT.js库：npm install mqtt
  2. 引入并连接MQTT：
    import mqtt from 'mqtt/dist/mqtt'
const client = mqtt.connect('mqtt://broker地址')
  3. 订阅主题：client.subscribe('主题')
  4. 接收消息：client.on('message', 回调函数)
  5. 发布消息：client.publish('主题', '消息内容')

注意：H5端可直接使用，App端需配置网络权限。


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

1. 安装 MQTT 客户端库

UniApp 支持使用 WebSocket 连接 MQTT 服务，推荐使用 mqtt.js 库。通过 npm 安装：

npm install mqtt

2. 引入并初始化 MQTT

在需要使用 MQTT 的页面或组件中引入库：

import mqtt from 'mqtt/dist/mqtt';

3. 连接 MQTT 服务器

使用 WebSocket 协议连接 MQTT 代理服务器（例如 EMQX 或 Mosquitto）：

const client = mqtt.connect('ws://your-mqtt-broker-url:8083/mqtt', {
  clientId: 'uniap-client-' + Math.random().toString(16).substr(2, 8),
  username: 'your-username', // 如果需要认证
  password: 'your-password'
});

client.on('connect', () => {
  console.log('MQTT 连接成功');
  // 订阅主题
  client.subscribe('test/topic', (err) => {
    if (!err) console.log('订阅成功');
  });
});

client.on('message', (topic, message) => {
  console.log(`收到主题 ${topic} 的消息: ${message.toString()}`);
  // 处理接收到的消息，例如更新页面数据
});

4. 发布消息

向指定主题发送消息：

client.publish('test/topic', 'Hello from UniApp!');

5. 断开连接

在页面卸载或不需要时断开连接：

client.end();

注意事项：

  • 跨平台兼容性：确保 MQTT 代理服务器支持 WebSocket，并配置正确的端口（如 8083 或 8084）。
  • 安全连接：生产环境建议使用 wss://（WebSocket Secure）。
  • 客户端 ID：确保唯一性，避免冲突。
  • 网络权限：在 manifest.json 中配置网络请求权限：
    "networkTimeout": {
  "request": 10000
}

示例场景：

适用于聊天应用、实时数据监控、IoT 设备控制等。通过订阅/发布模式，实现多端实时消息同步。

以上步骤可帮助你在 UniApp 中快速集成 MQTT 实时通信功能。

回到顶部