首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >基于MQTT小程序5.0发布 完全开源!

基于MQTT小程序5.0发布 完全开源!

作者头像
逍遥子大表哥
发布2025-11-17 16:51:35
发布2025-11-17 16:51:35
1380
举报
文章被收录于专栏:kali blogkali blog

在MQTT4.0版本发布以来,受到很多小伙伴的喜爱。当然,在使用过程中也提到了很多建议。

MQTT4.0目前问题:

因为在设计之初,主要目的是配合HomeAssistant方便地控制MQTT设备。数据都是临时存放在手机缓存中。因此,无法长时间保持数据,具体表现为:

  • 无法保存用户配置数据,设备数据。用户清理微信缓存或者重新进入小程序,数据会丢失。
  • 设备数据不同步,手机端添加设备后,电脑端无法同步。

项目地址:https://github.com/Priess0503/WxMQTT 5.0版本在Main-mysql分支中。

MQTT5.0

针对上述问题,MQTT5.0版本来了!通过用户微信ID进行存放数据和同步数据。能够保证用户配置数据不会丢失。

如果你想更加轻量化,建议仍然使用4.0版本。

功能演示:

授权登录
授权登录

授权登录

授权登录后,自动同步用户配置和设备。

部署指南

为了让部署更简单,这里我以宝塔环境为例。

01 部署数据库

在宝塔环境或者其他环境部署MySQL数据库。将database\init.sql数据库文件导入。 或者,执行下面命令

代码语言:javascript
复制
mysql -u root -p < database/init.sql
一个是设备表,一个是用户表
一个是设备表,一个是用户表

一个是设备表,一个是用户表

相关表结构说明如下:

📧userinfo 表(用户信息表)

字段名

类型

说明

id

INT

自增主键

wx_id

VARCHAR(100)

微信openid(唯一)

nickname

VARCHAR(100)

微信昵称

avatar_url

VARCHAR(255)

微信头像

ip

VARCHAR(255)

MQTT服务器地址

username

VARCHAR(100)

MQTT用户名

password

VARCHAR(255)

MQTT密码

create_time

TIMESTAMP

创建时间

update_time

TIMESTAMP

更新时间

😘device_info 表(设备信息表)

字段名

类型

说明

id

INT

自增主键

device_id

VARCHAR(50)

设备ID

wx_id

VARCHAR(100)

微信用户ID

name

VARCHAR(100)

设备名称

type

VARCHAR(50)

设备类型

topic

VARCHAR(255)

订阅主题

publish_topic

VARCHAR(255)

发布主题

on_command

VARCHAR(255)

开启命令

off_command

VARCHAR(255)

关闭命令

create_time

TIMESTAMP

创建时间

update_time

TIMESTAMP

更新时间

部署后端

这里为了容易上手,以宝塔环境为例。点击网站-新建Node项目。完成后,将server文件夹内容上传站点目录。

01 配置运行环境

server 目录下执行:

代码语言:javascript
复制
cd server
npm install

02配置数据库

修改 server/config/db.js 文件中的数据库配置:

代码语言:javascript
复制
const dbConfig = {
    host: 'localhost',           // 数据库地址
    user: 'root',                // 数据库用户名
    password: 'your_password',   // 修改为您的数据库密码
    database: 'iot_miniapp',     // 数据库名
};

修改server\controllersuserController.js中的公众号APPIDSECRET(务必配置正确,负责无法保存数据到数据库。)

宝塔中,项目启动配置如下

注意启动文件配置
注意启动文件配置

注意启动文件配置

启动成功后,会看到如下提示:

代码语言:javascript
复制
========================================
  智慧物联网监控小程序后端服务
========================================
🚀 服务器已启动: http://localhost:3000
📝 API文档: http://localhost:3000
💚 健康检查: http://localhost:3000/health
========================================

接下来,我们需要为后端项目配置域名和HTTPS

03配置伪静态

代码语言:javascript
复制
location /api/ {
        proxy_pass http://localhost:3000/api/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

04 后端状态检查

访问https://你的域名.cn/health效果如下

到此,后端配置成功!

配置小程序

修改API地址编辑 utils/config.js:

代码语言:javascript
复制
// 根据实际情况修改后端服务器地址
const API_BASE_URL = 'https://yourdomain.com/api';

注意事项

  • 域名需要备案,并在小程序后台配置request合法域名socket合法域名
  • 在后端配置正确的APPID和SECRET

在使用过程中遇到问题,或者有新的建议,欢迎评论区留下宝贵的意见!

MQTT5.0版本 github文档:https://github.com/Priess0503/WxMQTT/tree/main-mysql

更多精彩文章 欢迎关注我们

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-11-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 kali笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • MQTT5.0
  • 部署指南
  • 部署后端
  • 配置小程序
  • 注意事项
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档