uniapp前端从零开始搭建一套mqtt服务

搭建mqtt服务器

参考:【MQTT】| 搭建——在云服务器上搭建MQTT服务器_mqtt服务器搭建-CSDN博客

如果服务器执行命令出现“Error: Failed to synchronize cache for repo ‘AppStream‘”的问题

解决方法:https://www.jianshu.com/p/a95e9d6d22e9

uniapp 使用MQTT连接服务器

npm install mqtt@3.0.0
npm install uuid

使用npm引入3.0.0版本的,最新版会有点小问题,uuid用来生成clientId唯一标识,用同一个标识的话会把其他相同标识的客户端踢下线

uniapp demo,直接拿来就能用

u-popup是uview-ui的弹窗组件uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

mqtt的js文件mqtt (v5.0.5) - A library for the MQTT protocol | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 创建一个mqtt.js文件复制进去就好

真机调试mqtt5会报错,改用mqtt3