SoulChat 是一款基于 UniApp 和腾讯云开发（CloudBase）构建的匿名随机聊天应用，让用户能够随机匹配在线用户进行实时聊天，享受真实而安全的匿名交流体验。应用支持多平台部署，包括 H5、微信小程序、支付宝小程序、抖音小程序 以及 App (iOS/Android)。
本项目基于 CloudBase AI ToolKit 开发，通过AI提示词和 MCP 协议+云开发，让开发更智能、更高效，支持AI生成全栈代码、一键部署至腾讯云开发（免服务器）、智能日志修复。
- H5 体验：点击访问
多端实时匹配 + 聊天演示：
一套代码，六端运行，实时通信无缝切换！ ✨
- 🎯 随机匹配：智能匹配在线用户，每次都是新的惊喜
- 💫 完全匿名：保护用户隐私，无需透露真实身份
- ⚡ 实时聊天：基于云开发实现的高性能实时消息传输
- 🛡️ 安全可靠：基于腾讯云开发的安全架构，数据传输加密
- 📱 多端同步：一套代码适配多个平台，体验一致
- 随机匹配：随机匹配在线用户，支持匹配状态实时显示
- 匹配计时器：显示匹配等待时间，可随时取消匹配
- 连接状态监控：实时显示连接状态和用户在线情况
- 实时消息传输：基于云开发实现的高性能实时聊天
- 消息状态显示：显示消息发送、已读等状态
- 消息时间戳：准确显示消息发送时间
- 退出确认机制：防误操作的退出确认对话框
本项目已配置 VS Code 预览功能，支持自动打开浏览器预览：
- 在 VS Code 中打开项目
- 项目会自动加载
.vscode/preview.yml配置 - 启动开发服务器后会自动打开浏览器预览页面
- 默认端口：5173
配置文件位置：.vscode/preview.yml
-
安装依赖
npm install
-
配置云开发环境
编辑
src/utils/cloudbase.ts文件：// 将环境ID替换为您的云开发环境ID const ENV_ID: string = 'your-cloudbase-env-id';
-
云开发控制台配置
在 云开发控制台 完成以下配置：
- 身份认证：开启短信验证码登录
- 数据库：创建聊天相关的数据集合
- 云函数：部署匹配和消息处理相关的云函数
-
启动开发服务
# H5 开发 npm run dev:h5 # 微信小程序开发 npm run dev:mp-weixin # 支付宝小程序开发 npm run dev:mp-alipay # App 开发（需要在 HBuilderX 中进行） # 打开 HBuilderX，导入项目后点击运行到手机或模拟器
在云开发控制台的【环境配置】->【安全来源】->【安全域名】中添加：
- 开发域名：
http://localhost:5173（本地开发） - 生产域名：您的实际部署域名
在云开发控制台的【环境配置】->【安全来源】->【安全域名】中添加域名：
- 抖音小程序开发域名：
tmaservice.developer.toutiao.com - 支付宝开发域名：
devappid.hybrid.alipay-eco.com
在微信小程序管理后台的【开发】->【开发管理】->【开发设置】->【服务器域名】中配置：
request 合法域名：
https://tcb-api.tencentcloudapi.com
https://your-env-id.service.tcloudbase.com
uploadFile 合法域名：
https://cos.ap-shanghai.myqcloud.com
downloadFile 合法域名：
https://your-env-id.tcb.qcloud.la
https://cos.ap-shanghai.myqcloud.com
注意：请将
your-env-id替换为您的实际环境 ID，地域根据您的云开发环境所在地域调整。
在云开发控制台的【环境配置】->【安全来源】->【移动应用安全来源】中添加应用：
- 应用标识：
your-appSign - 应用凭证：
your-appAccessKey
在 src/utils/cloudbase.ts 文件中，找到 appConfig 对象，填入您获取到的凭证信息：
const appConfig = {
env: config.env || ENV_ID,
timeout: config.timeout || 15000,
appSign: 'your-appSign', // 应用标识
appSecret: {
appAccessKeyId: 1, // 凭证版本
appAccessKey: 'your-appAccessKey' // 凭证
}
}- UniApp：基于 Vue 3 Composition API 的跨平台框架
- TypeScript：提供完整的类型支持和更好的开发体验
- Vite：现代化的构建工具，支持热更新和快速编译
- uni-ui：官方UI组件库，确保各平台体验一致
- 身份认证：多种登录方式，安全的用户身份验证
- 云数据库：存储用户信息、聊天记录、匹配关系等数据
- 云函数：处理匹配逻辑、消息推送等业务逻辑
- 实时数据库：支持实时消息传输和状态同步
- 云存储：存储用户上传的文件和媒体资源
- ✅ H5：移动端浏览器和桌面端浏览器
- ✅ 微信小程序：微信生态内的完整体验
- ✅ 支付宝小程序：支付宝平台适配
- ✅ 抖音小程序：字节跳动生态支持
- ✅ App (iOS/Android)：原生应用体验
- 🔄 其他平台：更多平台适配开发中
soulChat/
├── src/
│ ├── components/
│ │ └── show-captcha.vue # 验证码弹窗组件
│ ├── pages/
│ │ ├── index/ # 应用首页
│ │ │ └── index.vue # 欢迎页面，品牌展示
│ │ ├── login/ # 登录模块
│ │ │ ├── index.vue # 登录方式选择页
│ │ │ ├── phone-login.vue # 手机验证码登录
│ │ │ ├── email-login.vue # 邮箱验证码登录
│ │ │ └── password-login.vue # 密码登录
│ │ ├── chat/ # 聊天功能核心
│ │ │ ├── home.vue # 聊天主页，匹配功能
│ │ │ └── room.vue # 聊天房间，实时消息
│ │ ├── profile/ # 用户中心
│ │ │ └── profile.vue # 用户信息管理
│ │ └── demo/ # 云开发功能演示
│ │ └── demo.vue # CloudBase API 演示
│ ├── utils/
│ │ ├── cloudbase.ts # 云开发 SDK 配置
│ │ └── index.ts # 通用工具函数
│ ├── static/ # 静态资源
│ ├── App.vue # 应用入口组件
│ ├── main.ts # 应用启动文件
│ ├── pages.json # 页面路由配置
│ └── manifest.json # 应用配置文件
├── package.json # 项目依赖配置
├── vite.config.ts # Vite 构建配置
├── tsconfig.json # TypeScript 配置
└── README.md # 项目说明文档
AI辅助的结构化开发流程：
📋 开发流程三个阶段：
将初始想法转化为具体的功能需求：
基于当前 CloudBase-UniApp 模板开发一个匿名聊天社交应用 SoulChat，功能要求：
1. 提供手机号验证码登录
2. 用户点击匹配按钮时，系统开始寻找也在匹配中的在线用户
3. 匹配成功后，用户能够与对方进行实时文字聊天，双方消息能够即时收发
4. 当任意一方退出房间时聊天结束
AI会自动生成详细的用户故事和验收标准：
基于需求文档，AI协助完成：
- 🏗️ 整体技术架构设计
- 🗄️ 数据库结构规划
- 🔌 接口定义和设计
- ☁️ 云函数模块划分
例如在实时聊天系统中，AI 会生成房间管理函数和聊天信息表设计等。
⚠️ 注意事项： 我在开发过程中发现 AI 在迭代生成代码过程中，有时会偏离原始的设计文档，这时可指定要求它进行修正，严格遵守系统设计
生成具有依赖关系的详细开发任务：
📱 页面功能实现
通过AI辅助快速生成页面代码：
根据需求文档和基础架构设计，生成 SoulChat 应用的前端页面代码。页面应包括以下功能模块：
1. 首页：展示应用介绍、手机号验证码登录功能。
2. 匹配页面：展示当前在线用户、匹配进度、开始匹配按钮。
3. 聊天房间页面：显示聊天消息、输入框、发送按钮、消息状态（发送中、已发送、失败）。
4. UI 样式：简洁清晰的设计风格。
请确保组件的模块化和代码的可维护性，页面设计兼容多端平台，优化响应式布局。页面实现效果：
- 品牌展示和产品介绍
- 功能特色说明
- 进入聊天的入口
- 用户信息展示和头像生成
- 智能匹配系统（开始匹配、匹配状态、取消匹配）
- 匹配计时器和状态动画
- 用户在线状态管理
- 实时消息收发
- 消息状态显示（发送中、已发送、已读）
- 消息时间戳格式化
- 连接状态监控
- 退出确认机制
import cloudbase from '@cloudbase/js-sdk'
import adapter from '@cloudbase/adapter-uni-app'
// 使用 UniApp 适配器
cloudbase.useAdapters(adapter,{uni: uni});
// 统一的CloudBase初始化
const app = cloudbase.init({
env: 'your-env-id'
})// 使用CloudBase实时数据库监听查找等待中的其他用户
const waitingUsers = await db.collection('match_queue')
.where({
uid: _.neq(uid),
status: 'waiting',
createTime: _.gte(new Date(Date.now() - 30000)) // 30秒内的队列记录
})
.orderBy('createTime', 'asc')
.limit(1)
.get()try {
const db = app.database()
messageWatcher = db.collection('messages')
.where({
roomId: roomId
})
.orderBy('sendTime', 'asc')
.watch({
onChange: (snapshot: any) => {
//处理逻辑
}
})
}
},
onError: (error) => {
console.error('消息监听失败:', error)
}
})
} catch (error) {
console.error('启动消息监听失败:', error)
}基于业务需求，设计了4个核心数据集合：
| 集合名称 | 功能用途 | 主要字段 |
|---|---|---|
users |
用户基础信息 | uid, nickname, status等 |
match_queue |
匹配队列管理 | userInfo, status, createTime等 |
chat_rooms |
聊天室信息 | roomId, participants, status等 |
messages |
消息记录存储 | roomId, senderId, content等 |
⚠️ 配置要点： 需要为数据库集合设置适当的读写权限，确保实时监听功能正常工作
| 平台 | 状态 | 功能完整度 | 备注 |
|---|---|---|---|
| H5 | ✅ 已完成 | 100% | 支持所有功能，推荐部署平台 |
| 微信小程序 | ✅ 已完成 | 100% | 完整支持，包含微信授权登录 |
| 支付宝小程序 | ✅ 已完成 | 100% | 全功能支持 |
| 抖音小程序 | ✅ 已完成 | 100% | 适配完成，体验良好 |
| App (iOS/Android) | ✅ 已完成 | 100% | 原生应用体验 |
-
多媒体消息
- 图片、语音、视频消息支持
- 表情包和贴纸功能
-
用户系统增强
- 用户等级和积分系统
- 兴趣标签和智能匹配
-
社交功能
- 好友系统和聊天记录
- 群聊和话题讨论
-
管理功能
- 内容审核和违规处理
- 用户举报和封禁机制
-
性能优化
- 消息分页加载
- 图片懒加载和压缩
- 缓存策略优化
-
用户体验
- 离线消息处理
- 消息推送通知
- 网络状态监控
-
安全性增强
- 内容过滤和敏感词检测
- 防骚扰和垃圾信息机制
- 数据加密传输
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
SoulChat - 让心灵自由交流 💬
由 腾讯云开发 强力驱动