在线聊天应用

一个功能完整的实时在线聊天应用，支持用户注册登录、一对一聊天、群聊、实时消息推送等功能。

✨ 功能特性

用户功能

• ✅ 邮箱注册登录
• ✅ 设置昵称和头像
• ✅ 查看在线状态（在线/离开/离线）
• ✅ 个人资料管理

聊天功能

• ✅ 一对一私聊
• ✅ 群聊房间
• ✅ 实时消息推送（WebSocket）
• ✅ 发送文本消息
• ✅ 发送表情符号
• ✅ 消息时间显示
• ✅ 未读消息提示
• ✅ 消息历史记录（最近50条）
• ✅ 会话列表按时间排序

技术特性

• ✅ Docker 容器化部署
• ✅ PostgreSQL 数据库
• ✅ Redis 缓存
• ✅ WebSocket 实时通信
• ✅ JWT 身份认证
• ✅ 现代化 UI 设计（TailwindCSS）

🛠️ 技术栈

后端

• Node.js - 运行时环境
• Express - Web 框架
• WebSocket (ws) - 实时通信
• PostgreSQL - 关系型数据库
• Redis - 缓存和会话管理
• JWT - 身份认证
• bcryptjs - 密码加密

前端

• React 18 - UI 框架
• React Router - 路由管理
• Axios - HTTP 客户端
• TailwindCSS - CSS 框架
• Lucide React - 图标库
• date-fns - 日期处理

基础设施

• Docker - 容器化
• Docker Compose - 多容器编排

📦 快速开始

前置要求

• Docker 20.10+
• Docker Compose 2.0+

安装步骤

1. 克隆项目（如果从 Git 仓库）

cd /root/club

2. 启动所有服务

docker-compose up -d

这将启动以下服务：

• PostgreSQL 数据库（端口 5432）
• Redis 缓存（端口 6379）
• 后端 API 服务器（端口 8000）
• 前端 Web 应用（端口 3000）

3. 查看服务状态

docker-compose ps

4. 查看日志

# 查看所有服务日志
docker-compose logs -f

# 查看特定服务日志
docker-compose logs -f backend
docker-compose logs -f frontend

5. 访问应用

打开浏览器访问：http://localhost:3000

🎯 使用指南

注册账户

1. 访问 http://localhost:3000
2. 点击"立即注册"
3. 填写邮箱、密码和昵称
4. 点击"注册"按钮

开始聊天

1. 登录后进入主界面
2. 点击"新建会话"按钮
3. 搜索用户（通过邮箱或昵称）
4. 选择用户开始聊天

发送消息

• 在输入框中输入文本消息
• 按 Enter 发送，Shift+Enter 换行
• 点击表情按钮发送表情符号

个人设置

1. 点击左上角的设置图标
2. 修改昵称或头像
3. 点击"保存"

🔧 开发模式

后端开发

cd backend
npm install
npm run dev

后端 API 将在 http://localhost:8000 运行

前端开发

cd frontend
npm install
npm start

前端应用将在 http://localhost:3000 运行

📁 项目结构

/root/club/
├── docker-compose.yml          # Docker Compose 配置
├── backend/                    # 后端服务
│   ├── src/
│   │   ├── server.js          # 服务器入口
│   │   ├── config/            # 配置文件
│   │   ├── middleware/        # 中间件
│   │   ├── routes/            # API 路由
│   │   ├── websocket/         # WebSocket 处理
│   │   └── scripts/           # 脚本文件
│   ├── Dockerfile
│   └── package.json
├── frontend/                   # 前端应用
│   ├── src/
│   │   ├── App.js             # 应用入口
│   │   ├── context/           # React Context
│   │   ├── pages/             # 页面组件
│   │   └── components/        # UI 组件
│   ├── public/
│   ├── Dockerfile
│   └── package.json
└── README.md

🔐 环境变量

后端环境变量（backend/.env）

DATABASE_URL=postgresql://chatuser:chatpass@postgres:5432/chatdb
REDIS_URL=redis://redis:6379
JWT_SECRET=your-secret-key-change-in-production
CORS_ORIGINS=http://localhost:3000
PORT=8000

前端环境变量（frontend/.env）

REACT_APP_API_URL=http://localhost:8000
REACT_APP_WS_URL=ws://localhost:8000

🗄️ 数据库结构

users 表

• 用户基本信息
• 邮箱、密码、昵称、头像
• 在线状态

conversations 表

• 会话信息
• 类型（一对一/群聊）
• 群聊名称和头像

conversation_participants 表

• 会话参与者关系
• 最后阅读时间

messages 表

• 消息内容
• 发送者、会话ID
• 消息类型（文本/表情）
• 创建时间

🚀 部署到生产环境

修改配置

1. 修改 JWT 密钥

# 在 docker-compose.yml 中修改
JWT_SECRET=your-production-secret-key

2. 修改数据库密码

# 在 docker-compose.yml 中修改
POSTGRES_PASSWORD=your-production-password

3. 配置域名

# 修改 CORS_ORIGINS 为你的域名
CORS_ORIGINS=https://yourdomain.com

启动生产环境

docker-compose -f docker-compose.yml up -d

🛠️ 常用命令

# 启动所有服务
docker-compose up -d

# 停止所有服务
docker-compose down

# 重启服务
docker-compose restart

# 查看日志
docker-compose logs -f

# 进入容器
docker-compose exec backend sh
docker-compose exec frontend sh

# 重新构建镜像
docker-compose build

# 清理所有数据（包括数据库）
docker-compose down -v

📝 API 文档

认证接口

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录

用户接口

• GET /api/users/me - 获取当前用户信息
• PUT /api/users/me - 更新用户信息
• PUT /api/users/status - 更新在线状态
• GET /api/users/search - 搜索用户

会话接口

• GET /api/conversations - 获取会话列表
• POST /api/conversations/direct - 创建一对一会话
• POST /api/conversations/group - 创建群聊
• GET /api/conversations/:id - 获取会话详情
• GET /api/conversations/:id/messages - 获取消息历史

WebSocket 消息类型

• send_message - 发送消息
• typing - 输入状态
• read_message - 标记已读
• new_message - 新消息通知
• user_status_change - 用户状态变化

🐛 故障排除

数据库连接失败

# 检查 PostgreSQL 是否运行
docker-compose ps postgres

# 查看数据库日志
docker-compose logs postgres

WebSocket 连接失败

# 检查后端服务
docker-compose logs backend

# 确保防火墙允许 8000 端口

前端无法访问

# 检查前端服务
docker-compose logs frontend

# 确保 3000 端口未被占用

📄 许可证

MIT License

👥 贡献

欢迎提交 Issue 和 Pull Request！

📧 联系方式

如有问题，请提交 Issue。