Realtime Chat 实时自毁聊天应用

本项目是基于 joschan21/nextjs16_realtime_chat 的复刻版本，感谢原作者的开源贡献。

✨ 功能特性

• 🔒 私密聊天 - 创建安全的聊天房间，保护用户隐私

• ⏰ 自动过期 - 房间默认 10 分钟后自动销毁，所有消息永久删除

• 📡 实时通信 - 基于 WebSocket 的实时消息推送

• 👤 匿名身份 - 自动生成匿名用户名，无需注册

• 📱 响应式设计 - 完美适配桌面和移动设备

• 🎨 现代 UI - 使用 Tailwind CSS 构建的深色主题界面

• 🗑️ 手动销毁 - 支持随时手动销毁房间

🛠️ 技术栈

前端

• Next.js 16 - React 框架

• React 19 - UI 库

• TypeScript - 类型安全

• Tailwind CSS 4 - 样式框架

• @tanstack/react-query - 数据获取和状态管理

• @upstash/realtime - 实时通信客户端

后端

• Elysia - 高性能 API 框架

• @upstash/redis - Redis 数据库客户端

• @upstash/realtime - 实时通信服务

• Zod - 数据验证

开发工具

• ESLint - 代码检查

• PostCSS - CSS 处理

• Babel React Compiler - React 编译器优化

📦 安装

前置要求

• Node.js 18+

• npm / yarn / pnpm / bun

• Upstash Redis 账号

环境变量配置

1. 访问 Upstash Console

2. 创建新的 Redis 数据库

3. 复制 REST URL 和 Token 到 .env.local

安装依赖

🚀 使用

开发模式

生产构建

代码检查

📁 项目结构

🎯 核心功能说明

房间管理

• 创建房间: 生成唯一的房间 ID

• 房间过期: 默认 10 分钟后自动销毁

• 手动销毁: 用户可随时销毁房间

• TTL 查询: 实时显示剩余时间

消息功能

• 发送消息: 支持文本消息（最多 1000 字符）

• 实时接收: 基于 WebSocket 的实时推送

• 消息历史: 自动保存和加载消息记录

• 时间戳: 显示消息发送时间

用户身份

• 匿名用户: 自动生成匿名用户名

• 本地存储: 用户名保存在 localStorage

• 身份标识: 每个用户有唯一的身份 ID

🔌 API 接口

房间相关

创建房间

获取房间剩余时间

销毁房间

消息相关

发送消息

获取消息历史

实时通信

WebSocket 连接

• chat.message - 新消息

• chat.destroy - 房间销毁

🔒 安全特性

• Token 认证: 每个房间连接需要有效的 token

• 房间隔离: 不同房间的消息完全隔离

• 自动清理: 过期数据自动删除

• 输入验证: 使用 Zod 进行严格的数据验证

🎨 UI 特性

• 深色主题: 护眼的深色界面

• 响应式布局: 自适应各种屏幕尺寸

• 实时倒计时: 显示房间剩余时间

• 消息区分: 区分自己和他人消息

• 复制链接: 一键复制房间链接

📝 配置说明

修改房间过期时间

修改消息限制

🚀 部署

Vercel 部署

1. 将代码推送到 GitHub

2. 在 Vercel 导入项目

3. 配置环境变量

4. 部署完成

其他平台

• Vercel

• Netlify

• Railway

• Render

• 自托管服务器

🤝 贡献

📄 许可证

🔗 相关链接

• Next.js 文档

• Upstash 文档

• Elysia 文档

• Tailwind CSS 文档

• React Query 文档

💡 使用提示

1. 房间链接: 创建房间后，复制链接分享给其他用户

2. 时间限制: 注意房间剩余时间，及时保存重要信息

3. 多设备: 同一用户可在多个设备同时登录

4. 隐私保护: 房间销毁后，所有数据无法恢复

🐛 已知问题

• 房间过期后，用户需要手动刷新页面

• 网络断开后，需要重新连接房间

📧 联系方式

🙏 致谢