uniapp 引入mqtt
时间: 2025-01-09 17:52:01 浏览: 5
### 如何在 UniApp 中引入并配置 MQTT 实现消息订阅与发布
#### 安装依赖包
为了能够在 UniApp 项目中使用 MQTT 进行消息通信,首先需要安装 `mqtt` 和 `uuid` 库。这两个库可以通过 npm 来安装。
```bash
npm install mqtt@3.0.0 uuid
```
此命令将会把指定版本的 `mqtt` 及 `uuid` 添加到项目的依赖列表中[^3]。
#### 创建全局 MQTT 接口实例
创建一个新的文件夹来存放所有的 MQTT 相关逻辑代码,比如命名为 `utils/mqtt.js`。在这个文件里定义一个函数用来初始化 MQTT 客户端:
```javascript
import { v4 as uuidv4 } from 'uuid';
import mqtt from 'mqtt';
let client;
export function initMqtt(mqttUrl, options) {
const clientId = `mqtt_${uuidv4()}`;
if (!options.clientId) {
Object.assign(options, {clientId});
}
client = mqtt.connect(mqttUrl, options);
}
```
这段代码实现了客户端唯一 ID 的生成以及连接至给定 URL 的 MQTT 经纪人的操作。
#### 订阅和发布消息的方法
继续在同一文件内扩展功能,加入两个方法分别处理消息的订阅和发布:
```javascript
// utils/mqtt.js 文件续写...
export function subscribe(topic, callback) {
if (client && typeof topic === "string") {
client.on('message', (receivedTopic, message) => {
console.log(`Received Message on ${receivedTopic}:`, message.toString());
if(callback){
callback(receivedTopic, message.toString())
}
});
client.subscribe(topic, err => {
if(err){
console.error("Failed to Subscribe:",err);
}else{
console.info(`Subscribed successfully to topic "${topic}"`);
}
})
}
}
export function publish(topic,message,options={}){
if(client&&typeof topic==="string"){
try{
client.publish(topic,message,options,(error)=>{
if(error){
console.error("Publish Error", error);
} else {
console.info(`Published message '${message}' to topic '${topic}'`)
}
});
}catch(e){
console.error("Exception during publishing:",e.message);
}
}
}
```
上述代码片段展示了如何设置回调监听接收到的消息,并提供了简单的错误处理机制;同时也包含了向特定主题发送新消息的功能。
#### 使用条件编译适配不同平台
考虑到 UniApp 支持多个终端环境,在某些情况下可能无法直接调用 WebSocket 或者其他 API。因此建议利用条件编译特性来区分不同的运行环境:
```javascript
// utils/mqtt.js 文件续写...
if(process.env.VUE_APP_PLATFORM!=='h5'){
// 非 H5 平台下采用 ws:// 方案
export default function connectToBroker(MQTT_IP,MQTT_OPTIONS={}) {
//#ifndef H5
initMqtt('ws://' + MQTT_IP, MQTT_OPTIONS);
//#endif
return {
subscribe,
publish
};
}
} else {
// 对于H5平台则按照标准方式加载脚本
importScripts('//cdn.bootcss.com/mqtt/3.0.0/mqtt.min.js');
...
}
```
这里通过判断当前构建的目标平台 (`process.env.VUE_APP_PLATFORM`) 是否为 HTML5 页面 ('h5') 来决定是否要调整使用的协议前缀或是导入外部资源的方式[^1]。
---
阅读全文