MQTT.js uniapp

### uniapp 中集成和使用 MQTT.js 的实现方法 在 UniApp 开发环境中，可以借助 `MQTT.js` 来完成消息的订阅与发布功能。以下是具体实现方式： #### 1. 安装依赖库 首先，在项目根目录下通过 npm 或 yarn 安装 `mqtt` 库： ```bash npm install mqtt --save ``` 安装完成后，确保该模块已正确引入到项目的构建流程中。 --- #### 2. 封装 MQTT 工具类 为了便于管理 MQTT 连接状态以及简化操作逻辑，建议创建一个独立的工具文件来封装 MQTT 功能。例如，在 `/utils/sendMqtt.js` 文件中定义如下内容： ```javascript import mqtt from 'mqtt'; let client = null; // 创建 MQTT 客户端实例并连接服务器 function createMqtt(options) { const url = options.url || 'wss://test.mosquitto.org/ws'; const clientId = `uniapp-client-${Math.random().toString(16).substr(2, 8)}`; client = mqtt.connect(url, { clientId, clean: true, reconnectPeriod: 1000, connectTimeout: 30 * 1000, username: options.username || '', password: options.password || '' }); // 处理连接成功事件 client.on('connect', () => { console.log('[MQTT] Connected'); }); // 处理断开连接事件 client.on('close', () => { console.warn('[MQTT] Disconnected'); }); // 处理错误事件 client.on('error', (err) => { console.error(`[MQTT Error]: ${err.message}`); }); } // 发布消息 function publish(topic, message) { if (!client || !client.connected) { console.error('[MQTT Publish Failed] Client not connected.'); return; } client.publish(topic, JSON.stringify(message), { qos: 0, retain: false }, (err) => { if (err) { console.error(`[MQTT Publish Error]: ${err.message}`); } else { console.log(`[MQTT Published to Topic "${topic}"]:`, message); } }); } // 订阅主题 function subscribe(topic, callback) { if (!client || !client.connected) { console.error('[MQTT Subscribe Failed] Client not connected.'); return; } client.subscribe(topic, { qos: 0 }, (err) => { if (err) { console.error(`[MQTT Subscribe Error]: ${err.message}`); } else { console.log(`[MQTT Subscribed to Topic "${topic}"]`); } }); // 设置接收消息回调函数 client.on('message', (receivedTopic, payload) => { try { const data = JSON.parse(payload.toString()); callback && callback(receivedTopic, data); } catch (e) { console.error(`[MQTT Parse Message Error]: ${e.message}`); } }); } export default { createMqtt, publish, subscribe }; ``` 上述代码实现了基本的消息发布与订阅功能[^2]。 --- #### 3. 初始化 MQTT 客户端 在全局生命周期钩子（如 App.vue）中调用 `createMqtt()` 方法以初始化客户端连接： ```javascript <template> </template> <script> import { createMqtt } from '@/utils/sendMqtt.js'; export default { onLaunch() { createMqtt({ url: 'ws://broker.hivemq.com:8000/mqtt', username: '', // 可选参数 password: '' // 可选参数 }); }, } </script> ``` 此部分负责建立初始连接[^1]。 --- #### 4. 页面中的数据处理 在具体的页面组件中，可以通过调用工具类的方法完成订阅与消息接收的操作。例如： ```javascript <template> <view>{{ receivedMessage }}</view> </template> <script> import { subscribe } from '@/utils/sendMqtt.js'; export default { data() { return { receivedMessage: '' }; }, onLoad() { subscribe('$SYS/brokers/+/clients/#', this.receiveCallback); // 替换为目标 topic }, methods: { receiveCallback(topic, message) { console.log(`Received message on topic "${topic}":`, message); this.receivedMessage = `${topic}: ${JSON.stringify(message)}`; } } }; </script> ``` 当有新消息到达时，会触发指定的回调函数并将数据显示在界面上[^3]。 --- #### 5. 测试与调试 测试过程中需注意以下几点： - 确认 WebSocket URL 是否可用； - 验证用户名密码配置是否匹配目标 Broker 要求； - 使用 Mosquitto CLI 或其他工具模拟发送消息至同一主题验证收发效果。 --- ### 总结 以上即是在 UniApp 中基于 `MQTT.js` 实现消息通信的核心步骤。通过合理封装工具类可有效提升代码复用性和维护效率。