uniapp小程序接入Mqtt
前要
文章说明:
本文用于介绍MQTT相关概念,并且教你如何在uniapp小程序项目中使用MQTT,以及使用过程中的一些坑的解决方法。
在uniapp小程序中使用MQTT
在微信小程序中使用 MQTT,一般可以通过引入 MQTT 客户端库来实现。这个库可以在小程序中使用 WebSocket 协议连接 MQTT 服务器,并支持订阅和发布消息。
微信小程序相关配置
- 在 微信公众平台-小程序–开发管理 里面配置socket合法域名
tips: 由于微信小程序安全要求比较高,在与后台服务器之间的通讯必须使用 https/wss 协议。 - 下载对应版本的MQTT库
原生微信小程序 MQTT.js 可用版本有 v4.2.1、v4.2.0、v4.1.0 和 v2.18.8
使用 uniapp 框架搭建微信小程序 MQTT.js 可用版本有 v4.1.0 和 v2.18.8
MQTT v4.2.0下载链接 - 在项目根目录下新建 utils 文件夹,将下载好的对应版本的 mqtt.min.js 文件放入该文件夹中,在 index.js 中通过如下方式引入 mqtt
import mqtt from "../../utils/mqtt.min.js";
使用MQTT
说明:
clientId为MQTT连接客户端id,尽量不要重复,不然会出现后一个连接顶掉前一个连接的情况
topic表示主题,使用client.subscribe(topic, callback)
client.connected是客户端连接是否成功的状态
- 何时能收到消息?
当你连接到服务器,订阅完topic01主题,此时如果有设备发布消息到MQTT服务器,那么服务器就会推送消息到每个订阅了topic01主题的客户端,在onmessage的回掉函数中获取- 如何发送消息?
使用client.publish()来发送消息
1 | import mqtt from "../../utils/mqtt.min.js"; |
使用过程中遇到的一些坑
版本问题
建议使用4.2.0版本
小程序模拟器能建立MQTT连接,但是真机调试无法连接
这个问题当时前端进行了各种手段尝试都存在这个问题,而且这个问题的诡异之处在于,同样的手机型号,同样的微信版本,其中一台能正常连接,另一台连接异常,且没有任何报错
于是就尝试切换网络环境,更换更低或更高的mqttjs协议版本等。发现还是存在这个问题,测试了6台手机,其中三台能正常连接
然后公司的后端大佬终于是在网上找到了一篇相关文章修复了这个问题,连接如下:连接
推荐
- 标题: uniapp小程序接入Mqtt
- 作者: DansRoh
- 创建于 : 2023-07-21 00:00:00
- 更新于 : 2024-01-03 10:42:01
- 链接: https://blog.shinri.me/2023/07/21/05_uniapp小程序接入Mqtt/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论