随心陪玩游戏全栈系统

随心陪玩是一套面向游戏陪玩、语音开黑和玩家社交场景的多端演示项目。用户可以浏览陪玩大神、下单支付、进入语音房间、组队开黑、发布动态和实时聊天；管理员可以通过 PC 管理后台维护用户、大神、订单、内容、举报和平台配置。

项目由 Spring Boot 后端、H5、微信小程序、Flutter App 和 PC 管理后台组成，各端共用同一套 REST API 与 Netty WebSocket 即时通讯服务。

说明：项目中的短信验证码、JWT 密钥、数据库账号、文件上传和支付流程均为演示实现，生产环境需要重新配置。

01陪玩平台的业务链路

一个陪玩平台，不只是"展示大神"或"发布动态"。它通常需要解决这些问题：

• 用户如何找到陪玩：首页推荐、游戏专区、搜索、榜单和滑卡匹配。

• 用户如何完成交易：选择服务、优惠券、余额支付、订单状态和评价。

• 用户如何互动：关注、收藏、私聊、房间公屏、组队和社区动态。

• 用户如何进入语音场景：创建房间、加入房间、上下麦、闭麦和房主管理。

• 用户如何管理资产：钱包、充值、提现、优惠券和流水。

• 运营如何管理：用户、大神、订单、内容、举报、房间和平台配置。

• 多端如何保持一致：H5、App、小程序共用接口和 IM 服务。

随心陪玩把这些能力串成了一条完整链路：H5、Flutter App 和微信小程序负责用户端，管理后台负责运营，Spring Boot 提供 REST API 和 Netty WebSocket IM，MySQL 保存统一业务数据。

02项目亮点

• 多端单仓库

  ：H5、Flutter App、微信小程序和 PC 管理后台共用一套后端。

• 完整陪玩交易链路

  ：大神浏览、服务项目、优惠券、余额支付、订单状态和评价。

• 语音房间与组队

  ：房间列表、创建、加入、上下麦、闭麦、公屏、组队大厅和娱乐互动。

• 社区动态与互动

  ：推荐/关注/最新 Feed、点赞、收藏、评论、分享、举报和屏蔽。

• 实时 IM

  ：基于 Netty WebSocket 实现私聊、房间公屏、通知、已读和在线状态。

• 配置化后台

  ：管理后台覆盖用户、大神、订单、内容、举报、房间和平台配置。

03界面预览

H5 面向移动浏览器，覆盖首页、发现、游戏专区、大神详情、房间、消息、订单、钱包、动态发布和个人中心等页面。

图：H5 / 管理后台界面示例（一）

图：H5 / 管理后台界面示例（二）

图：H5 / 管理后台界面示例（三）

图：H5 / 管理后台界面示例（四）

管理后台面向运营人员，提供数据看板、用户、大神、订单、动态、举报、房间、游戏、FAQ、通知和反馈管理。

微信小程序使用原生 TypeScript 实现，使用 lucide-static 生成图标，覆盖首页、发现、游戏专区、大神详情、语音房间、私信、钱包、订单和个人中心。

图：微信小程序界面示例（一）

图：微信小程序界面示例（二）

图：微信小程序界面示例（三）

04双通道架构：REST + Netty IM

H5（React + Vite） 微信小程序（原生 TypeScript） Flutter App（Dio + WebSocket） 管理后台（React + Ant Design）               │               ├── HTTP / JSON ──> Spring Boot :8080 /api               │               └── WebSocket ────> Netty IM :8878 /im                                       │                                       ▼                                    MySQL 8

接口与鉴权：

• REST API：http://localhost:8080/api

• Swagger：http://localhost:8080/swagger-ui.html

• IM 调试页：http://localhost:8080/im-demo.html

• WebSocket IM：ws://localhost:8878/im

• 登录后请求头：Authorization: Bearer <token>

• JWT 默认有效期为 168 小时（7 天）

• 统一响应：{ code, msg, data }，code = 0 表示成功

• 图片上传返回 /uploads/... 相对路径，客户端展示时拼接后端域名

快速验证登录：

curl -X POST http://localhost:8080/api/auth/login \   -H "Content-Type: application/json" \   -d '{"account":"demo","password":"123456"}'

05技术栈

后端：

• Java 17+、Spring Boot 3.4.5

• MyBatis-Plus 3.5.9、MySQL 8

• JJWT 0.12.6、Spring Security Crypto

• Netty WebSocket、springdoc OpenAPI

H5：

• React 19、TypeScript、Vite 8

• React Router 7、Lucide React

微信小程序：

• 微信原生小程序、TypeScript

• 微信开发者工具、lucide-static

Flutter App：

• Flutter、Dart 3.13+

• Dio、GoRouter、shared_preferences

• web_socket_channel、image_picker、lucide_icons_flutter

PC 管理后台：

• React 19、TypeScript、Vite 8

• React Router 7、Ant Design 6

06功能地图

用户端：

模块	说明
账号体系	密码登录、短信登录、注册、JWT、改密、实名、绑定和登录记录
首页与搜索	首页聚合、游戏分类、热门搜索、搜索历史和大神推荐
陪玩大神	列表、详情、相册、服务项目、评价、关注、收藏、排行榜、滑卡匹配
订单与钱包	优惠券下单、余额支付、退款、完成、评价、充值、提现和流水
语音房间	房间列表、创建、加入、上下麦、闭麦、收藏、公告、公屏和关闭
组队与互动	组队大厅、发布/加入/退出队伍、娱乐互动和心动速配
社区动态	推荐/关注/最新 Feed、发布、图片、点赞、收藏、评论、分享、举报
消息与 IM	系统通知、互动通知、私聊、图片、已读、房间事件和在线状态
个人中心	订单、收藏、房间、关注粉丝、黑名单、帮助反馈和设置

管理后台：

• 数据看板

• 用户启用/禁用

• 大神新增、编辑、资料、相册和服务项目

• 订单查询、取消退款和确认完成

• 动态下架/恢复/删除

• 举报处理、房间开启/关闭

• 游戏分类、FAQ、系统通知和意见反馈

端能力对照：

能力	H5	Flutter App	微信小程序	管理后台
首页 / 搜索 / 游戏专区	支持	支持	支持	游戏配置
大神列表 / 详情 / 下单	支持	支持	支持	大神与订单管理
语音房间 / 组队	支持	支持	支持	房间管理
社区动态 / 互动	支持	支持	支持	内容运营
钱包 / 优惠券 / 订单	支持	支持	支持	订单与流水
私信 / 通知 / 在线状态	支持	支持	支持	系统通知
举报 / 屏蔽 / 黑名单	支持	支持	支持	举报处理
平台配置	不涉及	不涉及	不涉及	支持

07数据库设计

建表与演示数据脚本位于：

springboot-play-buddy/src/main/resources/db/schema.sql springboot-play-buddy/src/main/resources/db/data.sql

当前约 31 张业务表，可以分成六组：

用户与设置：

• app_user

  ：用户账号与资料。

• user_setting

  、login_log、user_block：设置、登录记录与黑名单。

陪玩与订单：

• playmate

  、playmate_service、playmate_review：大神、服务项目和评价。

• match_record

  ：滑卡匹配记录。

• play_order

  ：陪玩订单。

房间、组队与娱乐：

• room

  、room_member、room_message：房间、成员与公屏消息。

• team_up

  、team_up_member：组队与成员。

• fun_game

  ：娱乐互动。

社区内容与互动：

• post

  、post_comment、post_hide、report：动态、评论、隐藏和举报。

• user_follow

  、user_favorite、user_like：关注、收藏和点赞。

钱包、优惠券与消息：

• wallet_tx

  、user_coupon：钱包流水与用户优惠券。

• chat_message

  ：私聊消息。

• notice

  ：系统通知。

首页、搜索与帮助：

• game

  、home_entry、search_history：游戏、首页入口和搜索历史。

• faq

  、feedback：常见问题与意见反馈。

08快速启动

环境要求：

• JDK 17+

• Maven 3.8+

• MySQL 8

• Node.js 20.19+ 或 22.12+

• 微信开发者工具

• Flutter SDK（Dart 3.13+）

第一步，启动后端：

cd springboot-play-buddy mvn spring-boot:run

默认服务：

• REST API：http://localhost:8080/api

• Swagger：http://localhost:8080/swagger-ui.html

• IM 调试页：http://localhost:8080/im-demo.html

• WebSocket IM：ws://localhost:8878/im

第二步，启动 H5：

cd play-buddy-h5 npm install npm run dev

默认访问 http://localhost:5173。

第三步，启动管理后台：

cd play-buddy-web-manager npm install npm run dev

默认访问 http://localhost:5174。

第四步，运行微信小程序：

cd play-buddy-wechat npm install npm run typecheck

用微信开发者工具导入项目，关闭合法域名校验；真机调试时修改 miniprogram/config.ts 中的 API_BASE 和 IM_URL。

第五步，运行 Flutter App：

cd play-buddy-app flutter pub get flutter run

真机调试可以覆盖接口地址：

flutter run \   --dart-define=API_BASE=http://192.168.1.10:8080 \   --dart-define=IM_URL=ws://192.168.1.10:8878/im

09测试账号

角色	账号	手机号	密码	说明
普通用户	demo	13800138000	123456	有余额、订单、收藏和消息
陪玩大神	xiaolu	13800000001	123456	可用于 IM 双账号聊天测试
管理员	admin	13900000000	123456	仅可登录 PC 管理后台
测试用户	lemon	13800138001	123456	初始余额 200 元
测试用户	haoge	13800138002	123456	初始余额 200 元
测试用户	xiaoyu	13800138003	123456	初始余额 200 元

演示短信验证码固定为 123456，未注册手机号使用验证码登录时会自动注册。

10IM 指令与实时消息

WebSocket IM 使用独立端口 8878，路径 /im，JSON 帧格式为：

{"cmd": 3, "data": {}}

连接流程：

1. HTTP 登录拿到 Token。

2. 调用 /api/im/config 获取 wsUrl 和心跳间隔。

3. 建立 WebSocket 连接。

4. 发送 {cmd:0, data:{token, terminal, deviceId}} 登录。

5. 按心跳间隔发送 {cmd:1}，超过 60 秒无帧会被断开。

核心指令：

cmd	名称	说明
0	登录	token、terminal、deviceId
1	心跳	服务端原样回应
2	强制下线	Token 失效、异地登录或账号被禁用
3	私聊	发送消息、图片，并同步到其他终端
4	房间公屏	房间聊天与系统消息
5	通知	订单、点赞、评论、关注和公告
6	已读	标记对方消息已读
7 / 8	进入 / 离开房间	订阅或取消房间实时消息
9	房间事件	成员、麦位、闭麦和关闭事件

HTTP 接口与 WebSocket 共用同一套业务：HTTP 写入成功后，再推送给在线客户端。用户有 IM 连接即显示在线，开启隐身则对外始终显示离线。

11快速验收与构建

检查项	预期结果
后端 REST	http://localhost:8080/api 可访问
Swagger	http://localhost:8080/swagger-ui.html 可打开
IM WebSocket	ws://localhost:8878/im 可连接
H5	http://localhost:5173 可登录并浏览内容
管理后台	使用 admin / 123456 可登录
微信小程序	开发者工具可编译并请求接口
Flutter App	可运行并完成密码或短信登录

常用构建与检查命令：

# 后端 cd springboot-play-buddy && mvn test  # H5 cd play-buddy-h5 && npm run build  # 管理后台 cd play-buddy-web-manager && npm run build  # 微信小程序 cd play-buddy-wechat && npm run typecheck  # Flutter App cd play-buddy-app && flutter analyze

12生产化建议与结语

当前项目更适合作为学习与演示系统，投产前需要补齐这些能力：

• 将 JWT 密钥、数据库密码、短信配置和管理员密码改为环境变量或密钥管理服务。

• 将固定短信验证码替换为真实短信服务，并增加频率限制与防刷策略。

• 使用 Flyway 或 Liquibase 管理数据库迁移，避免依赖手工 SQL。

• 将 CORS 限制为实际前端域名，并启用 HTTPS 与 WSS。

• 为下单、退款、提现、账号禁用和内容审核增加审计日志。

• 增加限流、异常监控、链路追踪和告警。

• 将本地上传目录迁移到对象存储，并增加文件类型、大小和安全校验。

• 接入真实支付、实名认证和第三方账号绑定能力，并补充幂等与对账逻辑。

• 为后端接口、H5、小程序、Flutter App 和管理后台补充自动化测试。

这个项目的价值在于把陪玩平台拆成了几条完整链路：大神与匹配、订单与钱包、语音房间与组队、社区动态与互动、消息与 IM，再到后台的用户、内容、举报和平台配置。

如果你正在寻找一个 Spring Boot + React + Flutter + 微信小程序的多端综合项目，或者想研究实时 IM、订单钱包和内容社区的协同设计，这个项目提供了一个结构清晰、可以直接跑起来的基础版本。