Upload 49 files

.dockerignore

@@ -0,0 +1,83 @@
+# Git相关
+.git
+.gitignore
+
+# 依赖目录
+node_modules
+*/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 构建输出
+dist
+build
+*/dist
+*/build
+
+# 环境变量文件
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*/.env
+
+# 日志文件
+logs
+*.log
+
+# 运行时数据
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# 覆盖率目录
+coverage
+.nyc_output
+
+# IDE和编辑器
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# 操作系统
+.DS_Store
+Thumbs.db
+
+# Docker相关
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# 脚本文件（不需要在容器中）
+*.sh
+*.bat
+Makefile
+
+# 文档
+README.md
+DEPLOYMENT.md
+*.md
+
+# 备份文件
+backups/
+*.backup
+*.bak
+
+# 临时文件
+tmp/
+temp/
+.tmp/
+
+# 测试文件
+test/
+tests/
+__tests__/
+*.test.js
+*.test.ts
+*.spec.js
+*.spec.ts

.gitignore

@@ -0,0 +1,46 @@
+# 依赖
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 环境变量
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# 构建输出
+dist/
+build/
+
+# 日志
+logs
+*.log
+
+# 运行时数据
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# 覆盖率目录
+coverage/
+.nyc_output
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# 操作系统
+.DS_Store
+Thumbs.db
+
+# Docker
+.dockerignore
+
+# MongoDB数据
+data/

DEPLOYMENT.md

@@ -0,0 +1,205 @@
+# 🚀 Linux部署指南
+
+这是一个完整的聊天应用Linux部署指南，包含所有必要的脚本和配置文件。
+
+## 📋 部署清单
+
+### 🔧 必需软件
+- [ ] Docker Engine
+- [ ] Docker Compose
+- [ ] Git (可选，用于版本控制)
+- [ ] Nginx (用于反向代理，可选)
+- [ ] Certbot (用于SSL证书，可选)
+
+### 📁 文件清单
+- [ ] `docker-compose.yml` - 生产环境配置
+- [ ] `docker-compose.dev.yml` - 开发环境配置
+- [ ] `Dockerfile` (client & server) - 容器构建文件
+- [ ] `start.sh` - Linux启动脚本
+- [ ] `stop.sh` - Linux停止脚本
+- [ ] `deploy.sh` - 自动部署脚本
+- [ ] `monitor.sh` - 监控脚本
+- [ ] `test.sh` - 功能测试脚本
+- [ ] `Makefile` - 管理命令
+
+## 🚀 快速部署
+
+### 方法1: 一键部署（推荐）
+```bash
+# 下载项目
+git clone <your-repo-url>
+cd chat-app
+
+# 设置权限
+chmod +x *.sh
+
+# 一键部署
+sudo ./deploy.sh
+```
+
+### 方法2: 手动部署
+```bash
+# 1. 安装Docker
+curl -fsSL https://get.docker.com -o get-docker.sh
+sudo sh get-docker.sh
+
+# 2. 启动应用
+./start.sh
+
+# 3. 验证部署
+./test.sh
+```
+
+### 方法3: 使用Makefile
+```bash
+make install  # 设置权限
+make start    # 启动应用
+make health   # 检查状态
+```
+
+## 🔒 SSL配置（生产环境推荐）
+
+```bash
+# 自动配置SSL和nginx反向代理
+sudo ./setup-ssl.sh
+```
+
+## 📊 监控和维护
+
+```bash
+# 查看实时监控
+./monitor.sh
+
+# 自动刷新监控（每30秒）
+watch -n 30 ./monitor.sh
+
+# 查看日志
+make logs
+
+# 备份数据库
+make backup
+
+# 测试功能
+./test.sh
+```
+
+## 🔧 故障排除
+
+### 常见问题
+
+1. **端口被占用**
+   ```bash
+   # 检查端口使用情况
+   sudo netstat -tulpn | grep :3000
+   sudo netstat -tulpn | grep :5000
+   sudo netstat -tulpn | grep :27017
+   ```
+
+2. **Docker权限问题**
+   ```bash
+   # 将用户添加到docker组
+   sudo usermod -aG docker $USER
+   # 重新登录或执行
+   newgrp docker
+   ```
+
+3. **服务启动失败**
+   ```bash
+   # 查看详细日志
+   docker-compose logs -f
+   
+   # 检查容器状态
+   docker-compose ps
+   ```
+
+4. **内存不足**
+   ```bash
+   # 检查系统资源
+   free -h
+   df -h
+   
+   # 清理Docker资源
+   make clean
+   ```
+
+## 🔐 安全配置
+
+### 防火墙设置
+```bash
+# Ubuntu/Debian
+sudo ufw allow 22    # SSH
+sudo ufw allow 80    # HTTP
+sudo ufw allow 443   # HTTPS
+sudo ufw enable
+
+# CentOS/RHEL
+sudo firewall-cmd --permanent --add-service=ssh
+sudo firewall-cmd --permanent --add-service=http
+sudo firewall-cmd --permanent --add-service=https
+sudo firewall-cmd --reload
+```
+
+### 环境变量安全
+1. 修改 `server/.env` 中的JWT密钥
+2. 更改MongoDB默认密码
+3. 设置强密码策略
+
+### 定期维护
+```bash
+# 每日备份（添加到crontab）
+0 2 * * * /path/to/chat-app/make backup
+
+# 每周更新
+0 3 * * 0 /path/to/chat-app/make update
+
+# 监控磁盘空间
+0 */6 * * * df -h | mail -s "Disk Usage Report" [email protected]
+```
+
+## 📈 性能优化
+
+### 系统级优化
+```bash
+# 增加文件描述符限制
+echo "* soft nofile 65536" >> /etc/security/limits.conf
+echo "* hard nofile 65536" >> /etc/security/limits.conf
+
+# 优化网络参数
+echo "net.core.somaxconn = 65536" >> /etc/sysctl.conf
+sysctl -p
+```
+
+### Docker优化
+```bash
+# 限制日志大小
+echo '{
+  "log-driver": "json-file",
+  "log-opts": {
+    "max-size": "10m",
+    "max-file": "3"
+  }
+}' > /etc/docker/daemon.json
+
+systemctl restart docker
+```
+
+## 🆘 紧急恢复
+
+### 快速恢复步骤
+1. 停止所有服务: `make stop`
+2. 恢复数据库备份: `make restore FILE=backup.gz`
+3. 重启服务: `make start`
+4. 验证功能: `./test.sh`
+
+### 数据备份策略
+- 每日自动备份数据库
+- 保留最近30天的备份
+- 异地备份重要数据
+
+## 📞 支持联系
+
+如果遇到问题，请：
+1. 查看日志: `make logs`
+2. 运行测试: `./test.sh`
+3. 检查监控: `./monitor.sh`
+4. 提交Issue到项目仓库

DOCKER.md

@@ -0,0 +1,339 @@
+# 🐳 Docker部署完整指南
+
+本项目提供了多种Docker部署方案，适应不同的使用场景和需求。
+
+## 📦 Dockerfile文件说明
+
+### 主要Dockerfile文件
+
+| 文件 | 用途 | 特点 |
+|------|------|------|
+| `Dockerfile` | 单容器部署 | 前端+后端在一个容器中，简化部署 |
+| `Dockerfile.optimized` | 优化单容器 | 多阶段构建，镜像更小，性能更好 |
+| `client/Dockerfile` | 前端容器 | React应用 + Nginx，支持多容器架构 |
+| `server/Dockerfile` | 后端容器 | Node.js应用，支持多容器架构 |
+
+### Docker Compose配置
+
+| 文件 | 用途 | 特点 |
+|------|------|------|
+| `docker-compose.yml` | 生产环境 | 多容器，包含健康检查和依赖管理 |
+| `docker-compose.dev.yml` | 开发环境 | 支持热重载，便于开发调试 |
+| `docker-compose.single.yml` | 单容器部署 | 简化的单容器 + MongoDB |
+
+## 🚀 部署方案选择
+
+### 方案1: 多容器部署（推荐生产环境）
+
+**优点:**
+- 服务分离，便于扩展
+- 独立更新前端或后端
+- 更好的资源管理
+- 符合微服务架构
+
+**部署命令:**
+```bash
+# 自动部署
+./deploy.sh
+
+# 手动部署
+docker-compose up --build -d
+
+# 使用Makefile
+make start
+```
+
+### 方案2: 单容器部署（推荐小型部署）
+
+**优点:**
+- 部署简单
+- 资源占用少
+- 管理方便
+- 适合小型应用
+
+**部署命令:**
+```bash
+# 使用标准版本
+docker-compose -f docker-compose.single.yml up -d
+
+# 使用优化版本
+docker build -t chatapp:optimized -f Dockerfile.optimized .
+docker run -d -p 80:80 --name chatapp chatapp:optimized
+
+# 使用Makefile
+make single
+```
+
+### 方案3: 开发环境
+
+**特点:**
+- 支持热重载
+- 实时代码同步
+- 便于调试
+- 快速迭代
+
+**部署命令:**
+```bash
+./start-dev.sh
+# 或
+make dev
+```
+
+## 🔨 构建Docker镜像
+
+### 交互式构建
+```bash
+# 使用构建脚本（推荐）
+./build-docker.sh
+
+# 选择构建类型：
+# 1) 多容器构建
+# 2) 单容器构建  
+# 3) 仅构建前端
+# 4) 仅构建后端
+```
+
+### 手动构建
+```bash
+# 构建所有镜像
+make build
+
+# 构建单个镜像
+docker build -t chatapp-frontend ./client
+docker build -t chatapp-backend ./server
+docker build -t chatapp .
+
+# 构建优化版本
+docker build -t chatapp:optimized -f Dockerfile.optimized .
+```
+
+### 镜像比较
+```bash
+# 比较不同版本的镜像大小和性能
+./docker-compare.sh
+```
+
+## 📊 镜像优化特性
+
+### 多阶段构建
+- 分离构建环境和运行环境
+- 减少最终镜像大小
+- 提高安全性
+
+### 安全特性
+- 非root用户运行
+- 最小权限原则
+- 安全的基础镜像
+- 定期安全更新
+
+### 性能优化
+- Alpine Linux基础镜像
+- 优化的nginx配置
+- Gzip压缩
+- 静态资源缓存
+- 健康检查
+
+## 🔧 配置说明
+
+### 环境变量
+
+**后端环境变量:**
+```env
+NODE_ENV=production
+MONGODB_URI=mongodb://mongo:27017/chatapp
+JWT_SECRET=your-secret-key
+PORT=5000
+CLIENT_URL=http://localhost:3000
+```
+
+**前端环境变量:**
+```env
+VITE_API_URL=http://localhost:5000
+```
+
+### 端口映射
+
+| 服务 | 容器端口 | 主机端口 | 说明 |
+|------|----------|----------|------|
+| 前端 | 80 | 3000 | React应用 |
+| 后端 | 5000 | 5000 | API服务 |
+| MongoDB | 27017 | 27017 | 数据库 |
+
+### 数据卷
+
+| 卷名 | 挂载点 | 用途 |
+|------|--------|------|
+| `mongo_data` | `/data/db` | MongoDB数据持久化 |
+| `./server` | `/app` | 开发环境代码同步 |
+| `./client` | `/app` | 开发环境代码同步 |
+
+## 🧪 测试和验证
+
+### 功能测试
+```bash
+# 运行完整测试套件
+./test.sh
+
+# 使用Makefile
+make test
+```
+
+### 健康检查
+```bash
+# 检查服务状态
+make health
+
+# 查看容器状态
+docker-compose ps
+
+# 查看健康检查日志
+docker inspect <container_name> | jq '.[0].State.Health'
+```
+
+### 性能测试
+```bash
+# 监控资源使用
+docker stats
+
+# 查看镜像大小
+docker images | grep chatapp
+
+# 网络性能测试
+curl -w "@curl-format.txt" -o /dev/null -s http://localhost:3000
+```
+
+## 🔍 故障排除
+
+### 常见问题
+
+**1. 容器启动失败**
+```bash
+# 查看日志
+docker-compose logs -f
+
+# 检查容器状态
+docker-compose ps
+
+# 进入容器调试
+docker exec -it <container_name> sh
+```
+
+**2. 端口冲突**
+```bash
+# 检查端口占用
+netstat -tulpn | grep :3000
+netstat -tulpn | grep :5000
+
+# 修改端口映射
+# 编辑 docker-compose.yml 中的 ports 配置
+```
+
+**3. 镜像构建失败**
+```bash
+# 清理构建缓存
+docker builder prune -f
+
+# 重新构建
+docker-compose build --no-cache
+
+# 查看构建日志
+docker build --progress=plain .
+```
+
+**4. 数据持久化问题**
+```bash
+# 检查数据卷
+docker volume ls
+
+# 备份数据
+make backup
+
+# 恢复数据
+make restore FILE=backup.gz
+```
+
+## 🚀 生产环境最佳实践
+
+### 1. 使用优化镜像
+```bash
+# 使用多阶段构建的优化版本
+docker build -t chatapp:optimized -f Dockerfile.optimized .
+```
+
+### 2. 配置资源限制
+```yaml
+# 在docker-compose.yml中添加
+services:
+  server:
+    deploy:
+      resources:
+        limits:
+          cpus: '0.5'
+          memory: 512M
+        reservations:
+          cpus: '0.25'
+          memory: 256M
+```
+
+### 3. 设置重启策略
+```yaml
+services:
+  server:
+    restart: unless-stopped
+```
+
+### 4. 配置日志管理
+```yaml
+services:
+  server:
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"
+        max-file: "3"
+```
+
+### 5. 使用健康检查
+```yaml
+services:
+  server:
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:5000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+```
+
+## 📈 监控和维护
+
+### 日志管理
+```bash
+# 查看日志
+make logs
+
+# 实时日志
+docker-compose logs -f
+
+# 特定服务日志
+docker-compose logs -f server
+```
+
+### 备份策略
+```bash
+# 自动备份脚本
+make backup
+
+# 定时备份（crontab）
+0 2 * * * /path/to/chatapp/make backup
+```
+
+### 更新部署
+```bash
+# 更新应用
+make update
+
+# 滚动更新
+docker-compose up -d --no-deps server
+```
+
+这个Docker部署指南提供了完整的容器化解决方案，适合各种部署场景和需求。

Dockerfile

@@ -0,0 +1,115 @@
+# 多阶段构建 - 完整聊天应用Dockerfile
+# 这个Dockerfile将前端和后端打包到一个容器中（可选方案）
+
+# 阶段1: 构建前端
+FROM node:18-alpine as frontend-build
+
+WORKDIR /app/client
+
+# 复制前端package.json
+COPY client/package*.json ./
+
+# 安装前端依赖
+RUN npm ci
+
+# 复制前端源代码
+COPY client/ ./
+
+# 构建前端
+RUN npm run build
+
+# 阶段2: 构建后端
+FROM node:18-alpine as backend-build
+
+WORKDIR /app/server
+
+# 复制后端package.json
+COPY server/package*.json ./
+
+# 安装后端依赖
+RUN npm ci --only=production
+
+# 复制后端源代码
+COPY server/ ./
+
+# 阶段3: 生产环境
+FROM node:18-alpine
+
+# 安装必要的系统依赖
+RUN apk add --no-cache \
+    nginx \
+    wget \
+    curl \
+    supervisor \
+    && rm -rf /var/cache/apk/*
+
+# 创建应用用户
+RUN addgroup -g 1001 -S appuser && \
+    adduser -S appuser -u 1001
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制后端文件
+COPY --from=backend-build --chown=appuser:appuser /app/server ./server
+
+# 复制前端构建文件
+COPY --from=frontend-build --chown=appuser:appuser /app/client/dist ./client/dist
+
+# 创建nginx配置
+RUN mkdir -p /etc/nginx/conf.d
+COPY --chown=appuser:appuser client/nginx.conf /etc/nginx/conf.d/default.conf
+
+# 创建supervisor配置
+RUN mkdir -p /etc/supervisor/conf.d
+COPY --chown=appuser:appuser <<EOF /etc/supervisor/conf.d/supervisord.conf
+[supervisord]
+nodaemon=true
+user=root
+logfile=/var/log/supervisor/supervisord.log
+pidfile=/var/run/supervisord.pid
+
+[program:nginx]
+command=nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stderr_logfile=/var/log/nginx/error.log
+stdout_logfile=/var/log/nginx/access.log
+user=appuser
+
+[program:node]
+command=node server/index.js
+directory=/app
+autostart=true
+autorestart=true
+stderr_logfile=/var/log/node/error.log
+stdout_logfile=/var/log/node/access.log
+user=appuser
+environment=NODE_ENV=production
+EOF
+
+# 创建日志目录
+RUN mkdir -p /var/log/nginx /var/log/node /var/log/supervisor && \
+    chown -R appuser:appuser /var/log/nginx /var/log/node /var/log/supervisor
+
+# 修改nginx配置以适应单容器部署
+RUN sed -i 's/proxy_pass http:\/\/localhost:5000/proxy_pass http:\/\/127.0.0.1:5000/g' /etc/nginx/conf.d/default.conf
+
+# 暴露端口
+EXPOSE 80 5000
+
+# 环境变量
+ENV NODE_ENV=production
+ENV PORT=5000
+ENV MONGODB_URI=mongodb://mongo:27017/chatapp
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80 && \
+        wget --no-verbose --tries=1 --spider http://localhost:5000/api/health || exit 1
+
+# 切换到应用用户
+USER appuser
+
+# 启动supervisor
+CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

Dockerfile.optimized

@@ -0,0 +1,205 @@
+# 优化版多阶段构建Dockerfile
+# 这个版本针对生产环境进行了优化，镜像更小，安全性更高
+
+# ================================
+# 阶段1: 前端构建
+# ================================
+FROM node:18-alpine as frontend-builder
+
+# 设置工作目录
+WORKDIR /app
+
+# 只复制package文件，利用Docker缓存
+COPY client/package*.json ./
+
+# 安装依赖
+RUN npm ci --only=production && \
+    npm cache clean --force
+
+# 复制源代码
+COPY client/ ./
+
+# 构建前端
+RUN npm run build
+
+# ================================
+# 阶段2: 后端构建
+# ================================
+FROM node:18-alpine as backend-builder
+
+WORKDIR /app
+
+# 复制package文件
+COPY server/package*.json ./
+
+# 安装依赖
+RUN npm ci --only=production && \
+    npm cache clean --force
+
+# 复制源代码
+COPY server/ ./
+
+# ================================
+# 阶段3: 最终生产镜像
+# ================================
+FROM node:18-alpine
+
+# 安装运行时依赖
+RUN apk add --no-cache \
+    nginx \
+    supervisor \
+    wget \
+    curl \
+    dumb-init \
+    && rm -rf /var/cache/apk/*
+
+# 创建应用用户
+RUN addgroup -g 1001 -S appuser && \
+    adduser -S appuser -u 1001 -G appuser
+
+# 创建必要的目录
+RUN mkdir -p /app /var/log/nginx /var/log/supervisor /run/nginx && \
+    chown -R appuser:appuser /app /var/log/nginx /var/log/supervisor /run/nginx
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制后端文件
+COPY --from=backend-builder --chown=appuser:appuser /app ./
+
+# 复制前端构建文件
+COPY --from=frontend-builder --chown=appuser:appuser /app/dist ./public
+
+# 创建nginx配置
+COPY --chown=appuser:appuser <<EOF /etc/nginx/nginx.conf
+user appuser;
+worker_processes auto;
+pid /run/nginx/nginx.pid;
+
+events {
+    worker_connections 1024;
+    use epoll;
+    multi_accept on;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+    
+    # 日志格式
+    log_format main '\$remote_addr - \$remote_user [\$time_local] "\$request" '
+                    '\$status \$body_bytes_sent "\$http_referer" '
+                    '"\$http_user_agent" "\$http_x_forwarded_for"';
+    
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log warn;
+    
+    # 性能优化
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    
+    # Gzip压缩
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_comp_level 6;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    
+    server {
+        listen 80;
+        server_name localhost;
+        root /app/public;
+        index index.html;
+        
+        # 前端路由
+        location / {
+            try_files \$uri \$uri/ /index.html;
+        }
+        
+        # API代理
+        location /api/ {
+            proxy_pass http://127.0.0.1:5000;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade \$http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            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;
+            proxy_cache_bypass \$http_upgrade;
+        }
+        
+        # Socket.IO代理
+        location /socket.io/ {
+            proxy_pass http://127.0.0.1:5000;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade \$http_upgrade;
+            proxy_set_header Connection "upgrade";
+            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;
+        }
+        
+        # 静态资源缓存
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)\$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+    }
+}
+EOF
+
+# 创建supervisor配置
+COPY --chown=appuser:appuser <<EOF /etc/supervisor/conf.d/supervisord.conf
+[supervisord]
+nodaemon=true
+user=appuser
+logfile=/var/log/supervisor/supervisord.log
+pidfile=/run/supervisord.pid
+childlogdir=/var/log/supervisor
+
+[program:nginx]
+command=nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stderr_logfile=/var/log/supervisor/nginx_error.log
+stdout_logfile=/var/log/supervisor/nginx_access.log
+user=appuser
+
+[program:node]
+command=node index.js
+directory=/app
+autostart=true
+autorestart=true
+stderr_logfile=/var/log/supervisor/node_error.log
+stdout_logfile=/var/log/supervisor/node_access.log
+user=appuser
+environment=NODE_ENV=production,PORT=5000
+EOF
+
+# 设置权限
+RUN chown -R appuser:appuser /etc/nginx /etc/supervisor
+
+# 切换到应用用户
+USER appuser
+
+# 暴露端口
+EXPOSE 80
+
+# 环境变量
+ENV NODE_ENV=production
+ENV PORT=5000
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80/api/health || exit 1
+
+# 使用dumb-init作为PID 1
+ENTRYPOINT ["/usr/bin/dumb-init", "--"]
+
+# 启动supervisor
+CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

Makefile

@@ -0,0 +1,152 @@
+# 聊天应用 Makefile
+
+.PHONY: help install start stop restart logs clean dev deploy health backup restore build single test
+
+# 默认目标
+help:
+	@echo "聊天应用管理命令:"
+	@echo ""
+	@echo "🚀 部署命令:"
+	@echo "  make install    - 安装依赖和设置权限"
+	@echo "  make start      - 启动生产环境（多容器）"
+	@echo "  make single     - 启动单容器版本"
+	@echo "  make dev        - 启动开发环境"
+	@echo "  make deploy     - 部署到生产环境"
+	@echo ""
+	@echo "🔧 管理命令:"
+	@echo "  make stop       - 停止所有服务"
+	@echo "  make restart    - 重启所有服务"
+	@echo "  make logs       - 查看服务日志"
+	@echo "  make health     - 检查服务健康状态"
+	@echo "  make test       - 运行功能测试"
+	@echo ""
+	@echo "🐳 Docker命令:"
+	@echo "  make build      - 构建Docker镜像"
+	@echo "  make clean      - 清理Docker资源"
+	@echo ""
+	@echo "💾 数据命令:"
+	@echo "  make backup     - 备份数据库"
+	@echo "  make restore    - 恢复数据库"
+	@echo ""
+
+# 安装和设置
+install:
+	@echo "🔧 设置脚本权限..."
+	chmod +x *.sh
+	@echo "✅ 安装完成"
+
+# 启动生产环境
+start:
+	@echo "🚀 启动生产环境..."
+	./start.sh
+
+# 启动开发环境
+dev:
+	@echo "🚀 启动开发环境..."
+	./start-dev.sh
+
+# 启动单容器版本
+single:
+	@echo "🚀 启动单容器版本..."
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose -f docker-compose.single.yml up --build -d; \
+	else \
+		docker compose -f docker-compose.single.yml up --build -d; \
+	fi
+	@echo "✅ 单容器版本启动完成"
+	@echo "🌐 访问地址: http://localhost"
+
+# 构建Docker镜像
+build:
+	@echo "🐳 构建Docker镜像..."
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose build --no-cache; \
+	else \
+		docker compose build --no-cache; \
+	fi
+	@echo "✅ 镜像构建完成"
+
+# 运行测试
+test:
+	@echo "🧪 运行功能测试..."
+	./test.sh
+
+# 停止服务
+stop:
+	@echo "🛑 停止服务..."
+	./stop.sh
+
+# 重启服务
+restart: stop start
+
+# 查看日志
+logs:
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose logs -f; \
+	else \
+		docker compose logs -f; \
+	fi
+
+# 检查健康状态
+health:
+	@echo "🔍 检查服务状态..."
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose ps; \
+	else \
+		docker compose ps; \
+	fi
+	@echo ""
+	@echo "🧪 测试服务连接..."
+	@curl -f http://localhost:5000/api/health 2>/dev/null && echo "✅ 后端服务正常" || echo "❌ 后端服务异常"
+	@curl -f http://localhost:3000 2>/dev/null && echo "✅ 前端服务正常" || echo "❌ 前端服务异常"
+
+# 清理Docker资源
+clean:
+	@echo "🧹 清理Docker资源..."
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose down -v --rmi all --remove-orphans; \
+	else \
+		docker compose down -v --rmi all --remove-orphans; \
+	fi
+	docker system prune -f
+	@echo "✅ 清理完成"
+
+# 部署到生产环境
+deploy:
+	@echo "🚀 部署到生产环境..."
+	./deploy.sh
+
+# 备份数据库
+backup:
+	@echo "💾 备份数据库..."
+	@mkdir -p backups
+	@BACKUP_FILE="backups/chatapp-backup-$$(date +%Y%m%d-%H%M%S).gz"; \
+	docker exec chat-mongo mongodump --authenticationDatabase admin -u admin -p password123 --db chatapp --gzip --archive=$$BACKUP_FILE; \
+	echo "✅ 数据库已备份到: $$BACKUP_FILE"
+
+# 恢复数据库
+restore:
+	@echo "📥 恢复数据库..."
+	@if [ -z "$(FILE)" ]; then \
+		echo "❌ 请指定备份文件: make restore FILE=backups/backup-file.gz"; \
+		exit 1; \
+	fi
+	@if [ ! -f "$(FILE)" ]; then \
+		echo "❌ 备份文件不存在: $(FILE)"; \
+		exit 1; \
+	fi
+	docker exec chat-mongo mongorestore --authenticationDatabase admin -u admin -p password123 --db chatapp --gzip --archive=$(FILE) --drop
+	@echo "✅ 数据库恢复完成"
+
+# 更新应用
+update:
+	@echo "🔄 更新应用..."
+	git pull
+	@if command -v docker-compose >/dev/null 2>&1; then \
+		docker-compose pull; \
+		docker-compose up --build -d; \
+	else \
+		docker compose pull; \
+		docker compose up --build -d; \
+	fi
+	@echo "✅ 更新完成"

build-docker.sh

@@ -0,0 +1,165 @@
+#!/bin/bash
+
+# Docker镜像构建脚本
+
+set -e
+
+echo "🐳 Docker镜像构建脚本"
+echo "===================="
+echo
+
+# 检查Docker是否安装
+if ! command -v docker &> /dev/null; then
+    echo "❌ 错误: Docker未安装"
+    echo "请先安装Docker: https://docs.docker.com/engine/install/"
+    exit 1
+fi
+
+# 检查Docker服务是否运行
+if ! docker info &> /dev/null; then
+    echo "❌ 错误: Docker服务未运行"
+    echo "请启动Docker服务: sudo systemctl start docker"
+    exit 1
+fi
+
+echo "✅ Docker环境检查通过"
+echo
+
+# 设置镜像标签
+IMAGE_TAG=${1:-latest}
+REGISTRY=${2:-""}
+
+if [ -n "$REGISTRY" ]; then
+    FULL_TAG="$REGISTRY/chatapp:$IMAGE_TAG"
+else
+    FULL_TAG="chatapp:$IMAGE_TAG"
+fi
+
+echo "📦 构建配置:"
+echo "  镜像标签: $FULL_TAG"
+echo "  构建上下文: $(pwd)"
+echo
+
+# 选择构建方式
+echo "请选择构建方式:"
+echo "1) 多容器构建 (推荐)"
+echo "2) 单容器构建"
+echo "3) 仅构建前端"
+echo "4) 仅构建后端"
+echo
+
+read -p "请输入选择 (1-4): " choice
+
+case $choice in
+    1)
+        echo "🔨 构建多容器版本..."
+        
+        # 构建前端镜像
+        echo "📦 构建前端镜像..."
+        docker build -t "${FULL_TAG}-frontend" ./client
+        
+        # 构建后端镜像
+        echo "📦 构建后端镜像..."
+        docker build -t "${FULL_TAG}-backend" ./server
+        
+        echo "✅ 多容器镜像构建完成"
+        echo "  前端镜像: ${FULL_TAG}-frontend"
+        echo "  后端镜像: ${FULL_TAG}-backend"
+        ;;
+        
+    2)
+        echo "🔨 构建单容器版本..."
+        docker build -t "$FULL_TAG" .
+        echo "✅ 单容器镜像构建完成: $FULL_TAG"
+        ;;
+        
+    3)
+        echo "🔨 构建前端镜像..."
+        docker build -t "${FULL_TAG}-frontend" ./client
+        echo "✅ 前端镜像构建完成: ${FULL_TAG}-frontend"
+        ;;
+        
+    4)
+        echo "🔨 构建后端镜像..."
+        docker build -t "${FULL_TAG}-backend" ./server
+        echo "✅ 后端镜像构建完成: ${FULL_TAG}-backend"
+        ;;
+        
+    *)
+        echo "❌ 无效选择"
+        exit 1
+        ;;
+esac
+
+echo
+
+# 显示构建的镜像
+echo "📋 构建的镜像:"
+docker images | grep chatapp
+
+echo
+
+# 询问是否推送到仓库
+if [ -n "$REGISTRY" ]; then
+    read -p "是否推送镜像到仓库? (y/N): " push_choice
+    if [[ $push_choice =~ ^[Yy]$ ]]; then
+        echo "📤 推送镜像到仓库..."
+        
+        case $choice in
+            1)
+                docker push "${FULL_TAG}-frontend"
+                docker push "${FULL_TAG}-backend"
+                ;;
+            2)
+                docker push "$FULL_TAG"
+                ;;
+            3)
+                docker push "${FULL_TAG}-frontend"
+                ;;
+            4)
+                docker push "${FULL_TAG}-backend"
+                ;;
+        esac
+        
+        echo "✅ 镜像推送完成"
+    fi
+fi
+
+# 询问是否运行测试
+read -p "是否运行容器测试? (y/N): " test_choice
+if [[ $test_choice =~ ^[Yy]$ ]]; then
+    echo "🧪 运行容器测试..."
+    
+    case $choice in
+        1)
+            echo "启动多容器测试环境..."
+            docker-compose up -d
+            sleep 30
+            ./test.sh
+            docker-compose down
+            ;;
+        2)
+            echo "启动单容器测试环境..."
+            docker-compose -f docker-compose.single.yml up -d
+            sleep 30
+            ./test.sh
+            docker-compose -f docker-compose.single.yml down
+            ;;
+        3|4)
+            echo "⚠️  单独的前端或后端镜像需要完整环境才能测试"
+            ;;
+    esac
+fi
+
+echo
+echo "🎉 构建完成！"
+echo
+echo "💡 使用提示:"
+echo "  - 查看镜像: docker images | grep chatapp"
+echo "  - 运行容器: docker run -p 3000:80 $FULL_TAG"
+echo "  - 清理镜像: docker rmi $FULL_TAG"
+echo
+echo "📚 更多命令:"
+echo "  - make build    # 使用Makefile构建"
+echo "  - make start    # 启动应用"
+echo "  - make test     # 运行测试"

client/.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+npm-debug.log
+.env
+.git
+.gitignore
+README.md
+Dockerfile
+.dockerignore
+dist

client/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5000

client/Dockerfile

@@ -0,0 +1,57 @@
+# 构建阶段
+FROM node:18-alpine as build
+
+# 安装构建依赖
+RUN apk add --no-cache git
+
+WORKDIR /app
+
+# 创建非root用户
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# 复制package.json和package-lock.json
+COPY --chown=nodejs:nodejs package*.json ./
+
+# 切换到nodejs用户
+USER nodejs
+
+# 安装依赖
+RUN npm ci && npm cache clean --force
+
+# 复制源代码
+COPY --chown=nodejs:nodejs . .
+
+# 构建应用
+RUN npm run build
+
+# 生产阶段
+FROM nginx:alpine
+
+# 安装wget用于健康检查
+RUN apk add --no-cache wget
+
+# 创建nginx用户目录
+RUN mkdir -p /var/cache/nginx && \
+    chown -R nginx:nginx /var/cache/nginx && \
+    chown -R nginx:nginx /var/log/nginx && \
+    chown -R nginx:nginx /etc/nginx/conf.d
+
+# 复制构建的文件到nginx
+COPY --from=build --chown=nginx:nginx /app/dist /usr/share/nginx/html
+
+# 复制nginx配置
+COPY --chown=nginx:nginx nginx.conf /etc/nginx/conf.d/default.conf
+
+# 切换到nginx用户
+USER nginx
+
+# 暴露端口
+EXPOSE 80
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80 || exit 1
+
+# 启动nginx
+CMD ["nginx", "-g", "daemon off;"]

client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>完美聊天网站</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/nginx.conf

@@ -0,0 +1,35 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # 处理React Router的路由
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # 安全头
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Gzip压缩
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/xml+rss
+        application/json;
+}

client/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "chat-client",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "socket.io-client": "^4.7.4",
+    "axios": "^1.6.2",
+    "react-router-dom": "^6.20.1",
+    "lucide-react": "^0.294.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/App.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './components/Login';
+import Register from './components/Register';
+import Chat from './components/Chat';
+import { User } from './types';
+
+function App() {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // 检查本地存储中的用户信息
+    const token = localStorage.getItem('token');
+    const userData = localStorage.getItem('user');
+    
+    if (token && userData) {
+      try {
+        const parsedUser = JSON.parse(userData);
+        setUser(parsedUser);
+      } catch (error) {
+        console.error('解析用户数据失败:', error);
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+      }
+    }
+    
+    setLoading(false);
+  }, []);
+
+  const handleLogin = (userData: User, token: string) => {
+    setUser(userData);
+    localStorage.setItem('token', token);
+    localStorage.setItem('user', JSON.stringify(userData));
+  };
+
+  const handleLogout = () => {
+    setUser(null);
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50">
+        <Routes>
+          <Route
+            path="/login"
+            element={
+              user ? (
+                <Navigate to="/chat" replace />
+              ) : (
+                <Login onLogin={handleLogin} />
+              )
+            }
+          />
+          <Route
+            path="/register"
+            element={
+              user ? (
+                <Navigate to="/chat" replace />
+              ) : (
+                <Register onRegister={handleLogin} />
+              )
+            }
+          />
+          <Route
+            path="/chat"
+            element={
+              user ? (
+                <Chat user={user} onLogout={handleLogout} />
+              ) : (
+                <Navigate to="/login" replace />
+              )
+            }
+          />
+          <Route
+            path="/"
+            element={
+              <Navigate to={user ? "/chat" : "/login"} replace />
+            }
+          />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

client/src/components/Chat.tsx

@@ -0,0 +1,225 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Send, LogOut, Users, MessageCircle } from 'lucide-react';
+import { User, Message, OnlineUser } from '../types';
+import { messageAPI } from '../utils/api';
+import { socketService } from '../utils/socket';
+
+interface ChatProps {
+  user: User;
+  onLogout: () => void;
+}
+
+const Chat: React.FC<ChatProps> = ({ user, onLogout }) => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [newMessage, setNewMessage] = useState('');
+  const [onlineUsers, setOnlineUsers] = useState<OnlineUser[]>([]);
+  const [loading, setLoading] = useState(true);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    const initializeChat = async () => {
+      try {
+        // 获取历史消息
+        const historyMessages = await messageAPI.getMessages();
+        setMessages(historyMessages);
+
+        // 连接Socket
+        const token = localStorage.getItem('token');
+        if (token) {
+          const socket = socketService.connect(token);
+
+          // 监听新消息
+          socketService.onNewMessage((message: Message) => {
+            setMessages(prev => [...prev, message]);
+          });
+
+          // 监听用户上线
+          socketService.onUserJoined((userData) => {
+            console.log(`${userData.username} 加入了聊天室`);
+          });
+
+          // 监听用户下线
+          socketService.onUserLeft((userData) => {
+            console.log(`${userData.username} 离开了聊天室`);
+          });
+
+          // 监听在线用户列表
+          socketService.onOnlineUsers((users: OnlineUser[]) => {
+            setOnlineUsers(users);
+          });
+        }
+      } catch (error) {
+        console.error('初始化聊天失败:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initializeChat();
+
+    // 清理函数
+    return () => {
+      socketService.offAllListeners();
+      socketService.disconnect();
+    };
+  }, []);
+
+  const handleSendMessage = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newMessage.trim()) {
+      socketService.sendMessage(newMessage.trim());
+      setNewMessage('');
+    }
+  };
+
+  const handleLogout = () => {
+    socketService.disconnect();
+    onLogout();
+  };
+
+  const formatTime = (timestamp: Date) => {
+    return new Date(timestamp).toLocaleTimeString('zh-CN', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-gray-50">
+      {/* 侧边栏 */}
+      <div className="w-64 bg-white border-r border-gray-200 flex flex-col">
+        {/* 用户信息 */}
+        <div className="p-4 border-b border-gray-200">
+          <div className="flex items-center space-x-3">
+            <div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
+              <span className="text-white font-medium">
+                {user.username.charAt(0).toUpperCase()}
+              </span>
+            </div>
+            <div className="flex-1">
+              <h3 className="font-medium text-gray-900">{user.username}</h3>
+              <p className="text-sm text-gray-500">{user.email}</p>
+            </div>
+            <button
+              onClick={handleLogout}
+              className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100"
+              title="退出登录"
+            >
+              <LogOut className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* 在线用户 */}
+        <div className="flex-1 p-4">
+          <div className="flex items-center space-x-2 mb-4">
+            <Users className="h-5 w-5 text-gray-500" />
+            <h4 className="font-medium text-gray-900">
+              在线用户 ({onlineUsers.length})
+            </h4>
+          </div>
+          <div className="space-y-2">
+            {onlineUsers.map((onlineUser) => (
+              <div key={onlineUser.userId} className="flex items-center space-x-3">
+                <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
+                  <span className="text-white text-sm font-medium">
+                    {onlineUser.username.charAt(0).toUpperCase()}
+                  </span>
+                </div>
+                <span className="text-sm text-gray-700">{onlineUser.username}</span>
+                {onlineUser.userId === user.id && (
+                  <span className="text-xs text-gray-500">(你)</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 主聊天区域 */}
+      <div className="flex-1 flex flex-col">
+        {/* 聊天头部 */}
+        <div className="bg-white border-b border-gray-200 p-4">
+          <div className="flex items-center space-x-2">
+            <MessageCircle className="h-6 w-6 text-primary-600" />
+            <h2 className="text-lg font-semibold text-gray-900">聊天室</h2>
+          </div>
+        </div>
+
+        {/* 消息列表 */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex ${
+                message.sender.id === user.id ? 'justify-end' : 'justify-start'
+              }`}
+            >
+              <div
+                className={`message-bubble ${
+                  message.sender.id === user.id ? 'message-own' : 'message-other'
+                }`}
+              >
+                {message.sender.id !== user.id && (
+                  <div className="text-xs font-medium mb-1 text-gray-600">
+                    {message.sender.username}
+                  </div>
+                )}
+                <div className="text-sm">{message.content}</div>
+                <div
+                  className={`text-xs mt-1 ${
+                    message.sender.id === user.id
+                      ? 'text-primary-200'
+                      : 'text-gray-500'
+                  }`}
+                >
+                  {formatTime(message.timestamp)}
+                </div>
+              </div>
+            </div>
+          ))}
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* 消息输入 */}
+        <div className="bg-white border-t border-gray-200 p-4">
+          <form onSubmit={handleSendMessage} className="flex space-x-4">
+            <input
+              type="text"
+              value={newMessage}
+              onChange={(e) => setNewMessage(e.target.value)}
+              placeholder="输入消息..."
+              className="flex-1 input-field"
+            />
+            <button
+              type="submit"
+              disabled={!newMessage.trim()}
+              className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+            >
+              <Send className="h-4 w-4" />
+              <span>发送</span>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Chat;

client/src/components/Login.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { LogIn, Mail, Lock, AlertCircle } from 'lucide-react';
+import { authAPI } from '../utils/api';
+import { User } from '../types';
+
+interface LoginProps {
+  onLogin: (user: User, token: string) => void;
+}
+
+const Login: React.FC<LoginProps> = ({ onLogin }) => {
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+    setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await authAPI.login(formData);
+      onLogin(response.user, response.token);
+    } catch (error: any) {
+      setError(error.response?.data?.message || '登录失败，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <div className="mx-auto h-12 w-12 bg-primary-600 rounded-full flex items-center justify-center">
+            <LogIn className="h-6 w-6 text-white" />
+          </div>
+          <h2 className="mt-6 text-3xl font-bold text-gray-900">
+            登录到聊天室
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            还没有账号？{' '}
+            <Link
+              to="/register"
+              className="font-medium text-primary-600 hover:text-primary-500"
+            >
+              立即注册
+            </Link>
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center space-x-2">
+              <AlertCircle className="h-5 w-5 text-red-500" />
+              <span className="text-red-700 text-sm">{error}</span>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                邮箱地址
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  required
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请输入邮箱地址"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                密码
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  value={formData.password}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请输入密码"
+                />
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <div className="flex items-center justify-center">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                登录中...
+              </div>
+            ) : (
+              '登录'
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

client/src/components/Register.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { UserPlus, Mail, Lock, User as UserIcon, AlertCircle } from 'lucide-react';
+import { authAPI } from '../utils/api';
+import { User } from '../types';
+
+interface RegisterProps {
+  onRegister: (user: User, token: string) => void;
+}
+
+const Register: React.FC<RegisterProps> = ({ onRegister }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+    setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('两次输入的密码不一致');
+      setLoading(false);
+      return;
+    }
+
+    if (formData.password.length < 6) {
+      setError('密码长度至少为6位');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const { confirmPassword, ...registerData } = formData;
+      const response = await authAPI.register(registerData);
+      onRegister(response.user, response.token);
+    } catch (error: any) {
+      setError(error.response?.data?.message || '注册失败，请重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <div className="mx-auto h-12 w-12 bg-primary-600 rounded-full flex items-center justify-center">
+            <UserPlus className="h-6 w-6 text-white" />
+          </div>
+          <h2 className="mt-6 text-3xl font-bold text-gray-900">
+            创建新账号
+          </h2>
+          <p className="mt-2 text-sm text-gray-600">
+            已有账号？{' '}
+            <Link
+              to="/login"
+              className="font-medium text-primary-600 hover:text-primary-500"
+            >
+              立即登录
+            </Link>
+          </p>
+        </div>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center space-x-2">
+              <AlertCircle className="h-5 w-5 text-red-500" />
+              <span className="text-red-700 text-sm">{error}</span>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+                用户名
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <UserIcon className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  value={formData.username}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请输入用户名"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                邮箱地址
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Mail className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  required
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请输入邮箱地址"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                密码
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  value={formData.password}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请输入密码（至少6位）"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                确认密码
+              </label>
+              <div className="mt-1 relative">
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <Lock className="h-5 w-5 text-gray-400" />
+                </div>
+                <input
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  type="password"
+                  required
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  className="input-field pl-10"
+                  placeholder="请再次输入密码"
+                />
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? (
+              <div className="flex items-center justify-center">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                注册中...
+              </div>
+            ) : (
+              '注册'
+            )}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Register;

client/src/index.css

@@ -0,0 +1,58 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+  
+  body {
+    @apply bg-gray-50 text-gray-900;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .input-field {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
+  }
+  
+  .message-bubble {
+    @apply max-w-xs lg:max-w-md px-4 py-2 rounded-lg break-words;
+  }
+  
+  .message-own {
+    @apply bg-primary-600 text-white ml-auto;
+  }
+  
+  .message-other {
+    @apply bg-white text-gray-800 border border-gray-200;
+  }
+}
+
+/* 自定义滚动条 */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}

client/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

client/src/types/index.ts

@@ -0,0 +1,41 @@
+export interface User {
+  id: string;
+  username: string;
+  email: string;
+  avatar?: string;
+}
+
+export interface Message {
+  id: string;
+  content: string;
+  sender: {
+    id: string;
+    username: string;
+    avatar?: string;
+  };
+  timestamp: Date;
+  room: string;
+}
+
+export interface AuthResponse {
+  message: string;
+  token: string;
+  user: User;
+}
+
+export interface LoginData {
+  email: string;
+  password: string;
+}
+
+export interface RegisterData {
+  username: string;
+  email: string;
+  password: string;
+}
+
+export interface OnlineUser {
+  userId: string;
+  username: string;
+  avatar?: string;
+}

client/src/utils/api.ts

@@ -0,0 +1,56 @@
+import axios from 'axios';
+import { AuthResponse, LoginData, RegisterData, Message } from '../types';
+
+const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000';
+
+const api = axios.create({
+  baseURL: `${API_BASE_URL}/api`,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// 请求拦截器 - 添加认证token
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// 响应拦截器 - 处理认证错误
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      window.location.href = '/login';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export const authAPI = {
+  login: async (data: LoginData): Promise<AuthResponse> => {
+    const response = await api.post('/login', data);
+    return response.data;
+  },
+
+  register: async (data: RegisterData): Promise<AuthResponse> => {
+    const response = await api.post('/register', data);
+    return response.data;
+  },
+};
+
+export const messageAPI = {
+  getMessages: async (room: string = 'general', limit: number = 50): Promise<Message[]> => {
+    const response = await api.get('/messages', {
+      params: { room, limit }
+    });
+    return response.data;
+  },
+};
+
+export default api;

client/src/utils/socket.ts

@@ -0,0 +1,75 @@
+import { io, Socket } from 'socket.io-client';
+
+const SOCKET_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000';
+
+class SocketService {
+  private socket: Socket | null = null;
+
+  connect(token: string): Socket {
+    if (this.socket?.connected) {
+      return this.socket;
+    }
+
+    this.socket = io(SOCKET_URL, {
+      autoConnect: false,
+    });
+
+    this.socket.connect();
+
+    // 连接成功后发送认证信息
+    this.socket.on('connect', () => {
+      console.log('Socket连接成功');
+      this.socket?.emit('join', { token });
+    });
+
+    this.socket.on('disconnect', () => {
+      console.log('Socket连接断开');
+    });
+
+    this.socket.on('error', (error) => {
+      console.error('Socket错误:', error);
+    });
+
+    return this.socket;
+  }
+
+  disconnect(): void {
+    if (this.socket) {
+      this.socket.disconnect();
+      this.socket = null;
+    }
+  }
+
+  getSocket(): Socket | null {
+    return this.socket;
+  }
+
+  sendMessage(content: string, room: string = 'general'): void {
+    if (this.socket?.connected) {
+      this.socket.emit('sendMessage', { content, room });
+    }
+  }
+
+  onNewMessage(callback: (message: any) => void): void {
+    this.socket?.on('newMessage', callback);
+  }
+
+  onUserJoined(callback: (user: any) => void): void {
+    this.socket?.on('userJoined', callback);
+  }
+
+  onUserLeft(callback: (user: any) => void): void {
+    this.socket?.on('userLeft', callback);
+  }
+
+  onOnlineUsers(callback: (users: any[]) => void): void {
+    this.socket?.on('onlineUsers', callback);
+  }
+
+  offAllListeners(): void {
+    this.socket?.removeAllListeners();
+  }
+}
+
+export const socketService = new SocketService();
+export default socketService;

client/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        }
+      }
+    },
+  },
+  plugins: [],
+}

client/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

client/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

client/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+  },
+  build: {
+    outDir: 'dist',
+  },
+})

deploy.sh

@@ -0,0 +1,130 @@
+#!/bin/bash
+
+# 聊天应用生产环境部署脚本 - Linux版本
+
+set -e  # 遇到错误立即退出
+
+echo "🚀 部署聊天应用到生产环境..."
+echo
+
+# 检查是否为root用户
+if [ "$EUID" -ne 0 ]; then
+    echo "⚠️  建议使用sudo运行此脚本以确保权限充足"
+fi
+
+# 检查Docker是否安装
+if ! command -v docker &> /dev/null; then
+    echo "❌ 错误: Docker未安装"
+    echo "正在安装Docker..."
+    curl -fsSL https://get.docker.com -o get-docker.sh
+    sh get-docker.sh
+    rm get-docker.sh
+    systemctl enable docker
+    systemctl start docker
+    echo "✅ Docker安装完成"
+fi
+
+# 检查Docker Compose是否安装
+if ! command -v docker-compose &> /dev/null && ! docker compose version &> /dev/null; then
+    echo "❌ 错误: Docker Compose未安装"
+    echo "正在安装Docker Compose..."
+    curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+    chmod +x /usr/local/bin/docker-compose
+    echo "✅ Docker Compose安装完成"
+fi
+
+# 检查Docker服务是否运行
+if ! docker info &> /dev/null; then
+    echo "🔄 启动Docker服务..."
+    systemctl start docker
+fi
+
+echo "✅ Docker环境准备完成"
+echo
+
+# 设置脚本权限
+chmod +x start.sh stop.sh start-dev.sh
+
+# 创建生产环境配置
+echo "⚙️  配置生产环境..."
+
+# 生成随机JWT密钥
+JWT_SECRET=$(openssl rand -base64 32)
+
+# 创建生产环境配置文件
+cat > .env.production << EOF
+# 生产环境配置
+NODE_ENV=production
+MONGODB_URI=mongodb://admin:$(openssl rand -base64 12)@mongo:27017/chatapp?authSource=admin
+JWT_SECRET=${JWT_SECRET}
+PORT=5000
+CLIENT_URL=http://localhost:3000
+EOF
+
+echo "✅ 生产环境配置完成"
+echo
+
+# 停止现有服务
+echo "🛑 停止现有服务..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose down 2>/dev/null || true
+else
+    docker compose down 2>/dev/null || true
+fi
+
+# 清理旧镜像
+echo "🧹 清理旧镜像..."
+docker system prune -f
+
+# 构建并启动服务
+echo "📦 构建并启动生产服务..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose up --build -d
+else
+    docker compose up --build -d
+fi
+
+# 等待服务启动
+echo "⏳ 等待服务启动..."
+sleep 30
+
+# 检查服务状态
+echo "🔍 检查服务状态..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose ps
+else
+    docker compose ps
+fi
+
+# 测试服务
+echo "🧪 测试服务..."
+if curl -f http://localhost:5000/api/health > /dev/null 2>&1; then
+    echo "✅ 后端服务正常"
+else
+    echo "❌ 后端服务异常"
+fi
+
+if curl -f http://localhost:3000 > /dev/null 2>&1; then
+    echo "✅ 前端服务正常"
+else
+    echo "❌ 前端服务异常"
+fi
+
+echo
+echo "🎉 部署完成！"
+echo
+echo "🌐 前端地址: http://localhost:3000"
+echo "🔧 后端API: http://localhost:5000"
+echo "📊 MongoDB: localhost:27017"
+echo
+echo "📋 常用命令:"
+echo "  - 查看日志: docker-compose logs -f"
+echo "  - 重启服务: docker-compose restart"
+echo "  - 停止服务: ./stop.sh"
+echo "  - 更新应用: ./deploy.sh"
+echo
+echo "🔒 安全提醒:"
+echo "  - 请修改默认密码"
+echo "  - 配置防火墙规则"
+echo "  - 启用HTTPS (推荐使用nginx反向代理)"
+echo "  - 定期备份数据库"

docker-compare.sh

@@ -0,0 +1,109 @@
+#!/bin/bash
+
+# Docker镜像大小比较脚本
+
+echo "🐳 Docker镜像构建和大小比较"
+echo "=========================="
+echo
+
+# 检查Docker是否可用
+if ! command -v docker &> /dev/null; then
+    echo "❌ Docker未安装"
+    exit 1
+fi
+
+echo "📦 构建不同版本的Docker镜像..."
+echo
+
+# 构建标准版本
+echo "🔨 构建标准单容器版本..."
+docker build -t chatapp:standard -f Dockerfile . --no-cache
+echo
+
+# 构建优化版本
+echo "🔨 构建优化版本..."
+docker build -t chatapp:optimized -f Dockerfile.optimized . --no-cache
+echo
+
+# 构建多容器版本
+echo "🔨 构建前端容器..."
+docker build -t chatapp:frontend ./client --no-cache
+
+echo "🔨 构建后端容器..."
+docker build -t chatapp:backend ./server --no-cache
+echo
+
+# 显示镜像大小比较
+echo "📊 镜像大小比较:"
+echo "=================="
+echo
+
+# 获取镜像信息
+STANDARD_SIZE=$(docker images chatapp:standard --format "{{.Size}}")
+OPTIMIZED_SIZE=$(docker images chatapp:optimized --format "{{.Size}}")
+FRONTEND_SIZE=$(docker images chatapp:frontend --format "{{.Size}}")
+BACKEND_SIZE=$(docker images chatapp:backend --format "{{.Size}}")
+
+echo "📦 单容器版本:"
+echo "  标准版本:     $STANDARD_SIZE"
+echo "  优化版本:     $OPTIMIZED_SIZE"
+echo
+
+echo "📦 多容器版本:"
+echo "  前端容器:     $FRONTEND_SIZE"
+echo "  后端容器:     $BACKEND_SIZE"
+echo
+
+# 详细镜像信息
+echo "📋 详细镜像信息:"
+echo "=================="
+docker images | grep chatapp | sort -k2
+
+echo
+echo "🔍 镜像层分析:"
+echo "=============="
+
+echo
+echo "📊 标准版本镜像层:"
+docker history chatapp:standard --format "table {{.CreatedBy}}\t{{.Size}}" | head -10
+
+echo
+echo "📊 优化版本镜像层:"
+docker history chatapp:optimized --format "table {{.CreatedBy}}\t{{.Size}}" | head -10
+
+echo
+echo "💡 建议:"
+echo "========"
+echo "✅ 生产环境推荐使用优化版本 (chatapp:optimized)"
+echo "✅ 开发环境可以使用多容器版本便于调试"
+echo "✅ 如需最小镜像，考虑使用多阶段构建进一步优化"
+
+echo
+echo "🧪 性能测试建议:"
+echo "================"
+echo "1. 启动时间测试:"
+echo "   time docker run --rm chatapp:standard"
+echo "   time docker run --rm chatapp:optimized"
+echo
+echo "2. 内存使用测试:"
+echo "   docker stats --no-stream"
+echo
+echo "3. 网络性能测试:"
+echo "   使用 ab 或 wrk 工具测试HTTP性能"
+
+echo
+echo "🧹 清理命令:"
+echo "============"
+echo "# 删除测试镜像"
+echo "docker rmi chatapp:standard chatapp:optimized chatapp:frontend chatapp:backend"
+echo
+echo "# 清理构建缓存"
+echo "docker builder prune -f"
+
+# 询问是否清理
+read -p "是否现在清理测试镜像? (y/N): " cleanup
+if [[ $cleanup =~ ^[Yy]$ ]]; then
+    echo "🧹 清理镜像..."
+    docker rmi chatapp:standard chatapp:optimized chatapp:frontend chatapp:backend 2>/dev/null || true
+    echo "✅ 清理完成"
+fi

docker-compose.dev.yml

@@ -0,0 +1,68 @@
+version: '3.8'
+
+services:
+  # MongoDB数据库
+  mongo:
+    image: mongo:7.0
+    container_name: chat-mongo-dev
+    restart: unless-stopped
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: admin
+      MONGO_INITDB_ROOT_PASSWORD: password123
+      MONGO_INITDB_DATABASE: chatapp
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data_dev:/data/db
+      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
+    networks:
+      - chat-network-dev
+
+  # 后端开发服务
+  server-dev:
+    image: node:18-alpine
+    container_name: chat-server-dev
+    restart: unless-stopped
+    working_dir: /app
+    environment:
+      - NODE_ENV=development
+      - MONGODB_URI=mongodb://admin:password123@mongo:27017/chatapp?authSource=admin
+      - JWT_SECRET=dev-secret-key
+      - PORT=5000
+      - CLIENT_URL=http://localhost:3000
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+    networks:
+      - chat-network-dev
+    volumes:
+      - ./server:/app
+      - /app/node_modules
+    command: sh -c "npm install && npm run dev"
+
+  # 前端开发服务
+  client-dev:
+    image: node:18-alpine
+    container_name: chat-client-dev
+    restart: unless-stopped
+    working_dir: /app
+    environment:
+      - VITE_API_URL=http://localhost:5000
+    ports:
+      - "3000:3000"
+    depends_on:
+      - server-dev
+    networks:
+      - chat-network-dev
+    volumes:
+      - ./client:/app
+      - /app/node_modules
+    command: sh -c "npm install && npm run dev"
+
+volumes:
+  mongo_data_dev:
+
+networks:
+  chat-network-dev:
+    driver: bridge

docker-compose.single.yml

@@ -0,0 +1,61 @@
+version: '3.8'
+
+# 单容器部署配置 - 前后端在同一个容器中
+services:
+  # MongoDB数据库
+  mongo:
+    image: mongo:7.0
+    container_name: chat-mongo-single
+    restart: unless-stopped
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: admin
+      MONGO_INITDB_ROOT_PASSWORD: password123
+      MONGO_INITDB_DATABASE: chatapp
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data_single:/data/db
+      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
+    networks:
+      - chat-network-single
+    healthcheck:
+      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # 聊天应用（前端+后端）
+  chat-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: chat-app-single
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+      - MONGODB_URI=mongodb://admin:password123@mongo:27017/chatapp?authSource=admin
+      - JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
+      - PORT=5000
+      - CLIENT_URL=http://localhost
+    ports:
+      - "80:80"      # 前端 (nginx)
+      - "5000:5000"  # 后端API
+    depends_on:
+      mongo:
+        condition: service_healthy
+    networks:
+      - chat-network-single
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 60s
+
+volumes:
+  mongo_data_single:
+
+networks:
+  chat-network-single:
+    driver: bridge

docker-compose.yml

@@ -0,0 +1,82 @@
+version: '3.8'
+
+services:
+  # MongoDB数据库
+  mongo:
+    image: mongo:7.0
+    container_name: chat-mongo
+    restart: unless-stopped
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: admin
+      MONGO_INITDB_ROOT_PASSWORD: password123
+      MONGO_INITDB_DATABASE: chatapp
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo_data:/data/db
+      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
+    networks:
+      - chat-network
+    healthcheck:
+      test: ["CMD", "mongosh", "--eval", "db.adminCommand('ping')"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # 后端服务
+  server:
+    build:
+      context: ./server
+      dockerfile: Dockerfile
+    container_name: chat-server
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+      - MONGODB_URI=mongodb://admin:password123@mongo:27017/chatapp?authSource=admin
+      - JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
+      - PORT=5000
+      - CLIENT_URL=http://localhost:3000
+    ports:
+      - "5000:5000"
+    depends_on:
+      mongo:
+        condition: service_healthy
+    networks:
+      - chat-network
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:5000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # 前端服务
+  client:
+    build:
+      context: ./client
+      dockerfile: Dockerfile
+    container_name: chat-client
+    restart: unless-stopped
+    ports:
+      - "3000:80"
+    depends_on:
+      server:
+        condition: service_healthy
+    networks:
+      - chat-network
+    environment:
+      - VITE_API_URL=http://localhost:5000
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+volumes:
+  mongo_data:
+
+networks:
+  chat-network:
+    driver: bridge

mongo-init.js

@@ -0,0 +1,12 @@
+// MongoDB初始化脚本
+db = db.getSiblingDB('chatapp');
+
+// 创建用户集合索引
+db.users.createIndex({ "email": 1 }, { unique: true });
+db.users.createIndex({ "username": 1 }, { unique: true });
+
+// 创建消息集合索引
+db.messages.createIndex({ "timestamp": -1 });
+db.messages.createIndex({ "room": 1, "timestamp": -1 });
+
+print('数据库初始化完成');

monitor.sh

@@ -0,0 +1,98 @@
+#!/bin/bash
+
+# 聊天应用监控脚本
+
+echo "📊 聊天应用监控面板"
+echo "===================="
+echo
+
+# 检查Docker服务
+echo "🐳 Docker服务状态:"
+if systemctl is-active --quiet docker; then
+    echo "  ✅ Docker服务运行中"
+else
+    echo "  ❌ Docker服务未运行"
+fi
+echo
+
+# 检查容器状态
+echo "📦 容器状态:"
+if command -v docker-compose >/dev/null 2>&1; then
+    docker-compose ps
+else
+    docker compose ps
+fi
+echo
+
+# 检查服务健康状态
+echo "🏥 服务健康检查:"
+
+# 检查后端API
+if curl -f -s http://localhost:5000/api/health > /dev/null; then
+    echo "  ✅ 后端API (http://localhost:5000)"
+    # 获取健康信息
+    HEALTH_INFO=$(curl -s http://localhost:5000/api/health)
+    echo "     $(echo $HEALTH_INFO | jq -r '.status // "N/A"') - 运行时间: $(echo $HEALTH_INFO | jq -r '.uptime // "N/A"')秒"
+    echo "     MongoDB: $(echo $HEALTH_INFO | jq -r '.mongodb // "N/A"')"
+else
+    echo "  ❌ 后端API (http://localhost:5000)"
+fi
+
+# 检查前端
+if curl -f -s http://localhost:3000 > /dev/null; then
+    echo "  ✅ 前端服务 (http://localhost:3000)"
+else
+    echo "  ❌ 前端服务 (http://localhost:3000)"
+fi
+
+# 检查MongoDB
+if docker exec chat-mongo mongosh --eval "db.adminCommand('ping')" > /dev/null 2>&1; then
+    echo "  ✅ MongoDB数据库"
+else
+    echo "  ❌ MongoDB数据库"
+fi
+echo
+
+# 系统资源使用情况
+echo "💻 系统资源使用:"
+echo "  CPU使用率: $(top -bn1 | grep "Cpu(s)" | awk '{print $2}' | awk -F'%' '{print $1}')%"
+echo "  内存使用: $(free -h | awk 'NR==2{printf "%.1f%%", $3*100/$2 }')"
+echo "  磁盘使用: $(df -h / | awk 'NR==2{print $5}')"
+echo
+
+# Docker资源使用
+echo "🐳 Docker资源使用:"
+docker stats --no-stream --format "table {{.Container}}\t{{.CPUPerc}}\t{{.MemUsage}}\t{{.NetIO}}"
+echo
+
+# 最近的日志
+echo "📋 最近的日志 (最后10行):"
+if command -v docker-compose >/dev/null 2>&1; then
+    docker-compose logs --tail=10
+else
+    docker compose logs --tail=10
+fi
+echo
+
+# 网络连接
+echo "🌐 网络连接:"
+echo "  端口3000状态: $(netstat -tuln | grep :3000 > /dev/null && echo "✅ 监听中" || echo "❌ 未监听")"
+echo "  端口5000状态: $(netstat -tuln | grep :5000 > /dev/null && echo "✅ 监听中" || echo "❌ 未监听")"
+echo "  端口27017状态: $(netstat -tuln | grep :27017 > /dev/null && echo "✅ 监听中" || echo "❌ 未监听")"
+echo
+
+# 数据库统计
+echo "📊 数据库统计:"
+if docker exec chat-mongo mongosh chatapp --eval "
+    print('用户数量: ' + db.users.countDocuments());
+    print('消息数量: ' + db.messages.countDocuments());
+    print('今日消息: ' + db.messages.countDocuments({timestamp: {\$gte: new Date(new Date().setHours(0,0,0,0))}}));
+" 2>/dev/null; then
+    echo "  ✅ 数据库统计获取成功"
+else
+    echo "  ❌ 无法获取数据库统计"
+fi
+echo
+
+echo "🔄 监控完成 - $(date)"
+echo "💡 提示: 使用 'watch -n 30 ./monitor.sh' 可以每30秒自动刷新监控信息"

nginx-proxy.conf

@@ -0,0 +1,135 @@
+# Nginx反向代理配置 - 用于生产环境
+# 将此文件复制到 /etc/nginx/sites-available/chatapp
+# 然后创建软链接: sudo ln -s /etc/nginx/sites-available/chatapp /etc/nginx/sites-enabled/
+
+upstream backend {
+    server localhost:5000;
+    keepalive 32;
+}
+
+upstream frontend {
+    server localhost:3000;
+    keepalive 32;
+}
+
+# HTTP重定向到HTTPS
+server {
+    listen 80;
+    server_name your-domain.com www.your-domain.com;
+    
+    # Let's Encrypt验证
+    location /.well-known/acme-challenge/ {
+        root /var/www/html;
+    }
+    
+    # 重定向到HTTPS
+    location / {
+        return 301 https://$server_name$request_uri;
+    }
+}
+
+# HTTPS配置
+server {
+    listen 443 ssl http2;
+    server_name your-domain.com www.your-domain.com;
+    
+    # SSL证书配置
+    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
+    
+    # SSL安全配置
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
+    ssl_prefer_server_ciphers off;
+    ssl_session_cache shared:SSL:10m;
+    ssl_session_timeout 10m;
+    
+    # 安全头
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    
+    # 日志配置
+    access_log /var/log/nginx/chatapp_access.log;
+    error_log /var/log/nginx/chatapp_error.log;
+    
+    # 客户端配置
+    client_max_body_size 10M;
+    client_body_timeout 60s;
+    client_header_timeout 60s;
+    
+    # API代理
+    location /api/ {
+        proxy_pass http://backend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        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;
+        proxy_cache_bypass $http_upgrade;
+        proxy_connect_timeout 30s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 30s;
+    }
+    
+    # Socket.IO代理
+    location /socket.io/ {
+        proxy_pass http://backend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        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;
+        proxy_cache_bypass $http_upgrade;
+        proxy_connect_timeout 30s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 86400s;  # 24小时，用于长连接
+    }
+    
+    # 前端代理
+    location / {
+        proxy_pass http://frontend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        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;
+        proxy_cache_bypass $http_upgrade;
+        proxy_connect_timeout 30s;
+        proxy_send_timeout 30s;
+        proxy_read_timeout 30s;
+    }
+    
+    # 静态资源缓存
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        proxy_pass http://frontend;
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        add_header Vary "Accept-Encoding";
+    }
+    
+    # Gzip压缩
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/javascript
+        application/xml+rss
+        application/json
+        application/xml
+        image/svg+xml;
+}

server/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+npm-debug.log
+.env
+.git
+.gitignore
+README.md
+Dockerfile
+.dockerignore

server/.env

@@ -0,0 +1,4 @@
+MONGODB_URI=mongodb://mongo:27017/chatapp
+JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
+PORT=5000
+CLIENT_URL=http://localhost:3000

server/Dockerfile

@@ -0,0 +1,35 @@
+# 使用官方Node.js运行时作为基础镜像
+FROM node:18-alpine
+
+# 安装必要的系统依赖
+RUN apk add --no-cache \
+    wget \
+    curl \
+    && rm -rf /var/cache/apk/*
+
+# 设置工作目录
+WORKDIR /app
+
+# 创建非root用户
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S nodejs -u 1001
+
+# 复制package.json和package-lock.json（如果存在）
+COPY --chown=nodejs:nodejs package*.json ./
+
+# 切换到nodejs用户安装依赖
+USER nodejs
+RUN npm ci --only=production && npm cache clean --force
+
+# 复制应用源代码
+COPY --chown=nodejs:nodejs . .
+
+# 暴露端口
+EXPOSE 5000
+
+# 健康检查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:5000/api/health || exit 1
+
+# 启动应用
+CMD ["npm", "start"]

server/index.js

@@ -0,0 +1,280 @@
+const express = require('express');
+const http = require('http');
+const socketIo = require('socket.io');
+const cors = require('cors');
+const mongoose = require('mongoose');
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+require('dotenv').config();
+
+const app = express();
+const server = http.createServer(app);
+const io = socketIo(server, {
+  cors: {
+    origin: process.env.CLIENT_URL || "http://localhost:3000",
+    methods: ["GET", "POST"]
+  }
+});
+
+// 中间件
+app.use(cors());
+app.use(express.json());
+
+// MongoDB连接
+const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://mongo:27017/chatapp';
+mongoose.connect(MONGODB_URI)
+  .then(() => console.log('MongoDB连接成功'))
+  .catch(err => console.error('MongoDB连接失败:', err));
+
+// 用户模型
+const userSchema = new mongoose.Schema({
+  username: { type: String, required: true, unique: true },
+  email: { type: String, required: true, unique: true },
+  password: { type: String, required: true },
+  avatar: { type: String, default: '' },
+  createdAt: { type: Date, default: Date.now }
+});
+
+const User = mongoose.model('User', userSchema);
+
+// 消息模型
+const messageSchema = new mongoose.Schema({
+  content: { type: String, required: true },
+  sender: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
+  room: { type: String, default: 'general' },
+  timestamp: { type: Date, default: Date.now }
+});
+
+const Message = mongoose.model('Message', messageSchema);
+
+// JWT验证中间件
+const authenticateToken = (req, res, next) => {
+  const authHeader = req.headers['authorization'];
+  const token = authHeader && authHeader.split(' ')[1];
+
+  if (!token) {
+    return res.sendStatus(401);
+  }
+
+  jwt.verify(token, process.env.JWT_SECRET || 'fallback-secret', (err, user) => {
+    if (err) return res.sendStatus(403);
+    req.user = user;
+    next();
+  });
+};
+
+// API路由
+// 健康检查端点
+app.get('/api/health', (req, res) => {
+  res.status(200).json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    uptime: process.uptime(),
+    mongodb: mongoose.connection.readyState === 1 ? 'connected' : 'disconnected'
+  });
+});
+
+// 用户注册
+app.post('/api/register', async (req, res) => {
+  try {
+    const { username, email, password } = req.body;
+    
+    // 检查用户是否已存在
+    const existingUser = await User.findOne({ 
+      $or: [{ email }, { username }] 
+    });
+    
+    if (existingUser) {
+      return res.status(400).json({ message: '用户名或邮箱已存在' });
+    }
+
+    // 加密密码
+    const hashedPassword = await bcrypt.hash(password, 10);
+    
+    // 创建新用户
+    const user = new User({
+      username,
+      email,
+      password: hashedPassword
+    });
+    
+    await user.save();
+    
+    // 生成JWT token
+    const token = jwt.sign(
+      { userId: user._id, username: user.username },
+      process.env.JWT_SECRET || 'fallback-secret',
+      { expiresIn: '24h' }
+    );
+    
+    res.status(201).json({
+      message: '注册成功',
+      token,
+      user: {
+        id: user._id,
+        username: user.username,
+        email: user.email,
+        avatar: user.avatar
+      }
+    });
+  } catch (error) {
+    console.error('注册错误:', error);
+    res.status(500).json({ message: '服务器错误' });
+  }
+});
+
+// 用户登录
+app.post('/api/login', async (req, res) => {
+  try {
+    const { email, password } = req.body;
+    
+    // 查找用户
+    const user = await User.findOne({ email });
+    if (!user) {
+      return res.status(400).json({ message: '邮箱或密码错误' });
+    }
+    
+    // 验证密码
+    const isValidPassword = await bcrypt.compare(password, user.password);
+    if (!isValidPassword) {
+      return res.status(400).json({ message: '邮箱或密码错误' });
+    }
+    
+    // 生成JWT token
+    const token = jwt.sign(
+      { userId: user._id, username: user.username },
+      process.env.JWT_SECRET || 'fallback-secret',
+      { expiresIn: '24h' }
+    );
+    
+    res.json({
+      message: '登录成功',
+      token,
+      user: {
+        id: user._id,
+        username: user.username,
+        email: user.email,
+        avatar: user.avatar
+      }
+    });
+  } catch (error) {
+    console.error('登录错误:', error);
+    res.status(500).json({ message: '服务器错误' });
+  }
+});
+
+// 获取历史消息
+app.get('/api/messages', authenticateToken, async (req, res) => {
+  try {
+    const { room = 'general', limit = 50 } = req.query;
+    const messages = await Message.find({ room })
+      .populate('sender', 'username avatar')
+      .sort({ timestamp: -1 })
+      .limit(parseInt(limit));
+    
+    res.json(messages.reverse());
+  } catch (error) {
+    console.error('获取消息错误:', error);
+    res.status(500).json({ message: '服务器错误' });
+  }
+});
+
+// Socket.IO连接处理
+const connectedUsers = new Map();
+
+io.on('connection', (socket) => {
+  console.log('用户��接:', socket.id);
+
+  // 用户加入
+  socket.on('join', async (userData) => {
+    try {
+      // 验证token
+      const decoded = jwt.verify(userData.token, process.env.JWT_SECRET || 'fallback-secret');
+      const user = await User.findById(decoded.userId);
+      
+      if (user) {
+        socket.userId = user._id.toString();
+        socket.username = user.username;
+        connectedUsers.set(socket.id, {
+          userId: user._id.toString(),
+          username: user.username,
+          avatar: user.avatar
+        });
+        
+        socket.join('general');
+        
+        // 广播用户上线
+        socket.broadcast.emit('userJoined', {
+          username: user.username,
+          avatar: user.avatar
+        });
+        
+        // 发送在线用户列表
+        const onlineUsers = Array.from(connectedUsers.values());
+        io.emit('onlineUsers', onlineUsers);
+      }
+    } catch (error) {
+      console.error('用户加入错误:', error);
+      socket.emit('error', { message: '认证失败' });
+    }
+  });
+
+  // 发送消息
+  socket.on('sendMessage', async (messageData) => {
+    try {
+      if (!socket.userId) {
+        socket.emit('error', { message: '未认证用户' });
+        return;
+      }
+
+      const message = new Message({
+        content: messageData.content,
+        sender: socket.userId,
+        room: messageData.room || 'general'
+      });
+      
+      await message.save();
+      await message.populate('sender', 'username avatar');
+      
+      // 广播消息到房间
+      io.to(messageData.room || 'general').emit('newMessage', {
+        id: message._id,
+        content: message.content,
+        sender: {
+          id: message.sender._id,
+          username: message.sender.username,
+          avatar: message.sender.avatar
+        },
+        timestamp: message.timestamp,
+        room: message.room
+      });
+    } catch (error) {
+      console.error('发送消息错误:', error);
+      socket.emit('error', { message: '发送消息失败' });
+    }
+  });
+
+  // 用户断开连接
+  socket.on('disconnect', () => {
+    console.log('用户断开连接:', socket.id);
+    
+    const userData = connectedUsers.get(socket.id);
+    if (userData) {
+      connectedUsers.delete(socket.id);
+      
+      // 广播用户下线
+      socket.broadcast.emit('userLeft', {
+        username: userData.username
+      });
+      
+      // 更新在线用户列表
+      const onlineUsers = Array.from(connectedUsers.values());
+      io.emit('onlineUsers', onlineUsers);
+    }
+  });
+});
+
+const PORT = process.env.PORT || 5000;
+server.listen(PORT, () => {
+  console.log(`服务器运行在端口 ${PORT}`);
+});

server/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "chat-server",
+  "version": "1.0.0",
+  "description": "Chat application backend server",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["chat", "socket.io", "express", "mongodb"],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.2",
+    "socket.io": "^4.7.4",
+    "mongoose": "^8.0.3",
+    "cors": "^2.8.5",
+    "jsonwebtoken": "^9.0.2",
+    "bcryptjs": "^2.4.3",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+}

setup-ssl.sh

@@ -0,0 +1,123 @@
+#!/bin/bash
+
+# SSL证书设置脚本 - 使用Let's Encrypt
+
+set -e
+
+echo "🔒 设置SSL证书..."
+echo
+
+# 检查是否为root用户
+if [ "$EUID" -ne 0 ]; then
+    echo "❌ 请使用sudo运行此脚本"
+    exit 1
+fi
+
+# 获取域名
+read -p "请输入您的域名 (例如: example.com): " DOMAIN
+if [ -z "$DOMAIN" ]; then
+    echo "❌ 域名不能为空"
+    exit 1
+fi
+
+read -p "请输入您的邮箱地址: " EMAIL
+if [ -z "$EMAIL" ]; then
+    echo "❌ 邮箱地址不能为空"
+    exit 1
+fi
+
+echo "域名: $DOMAIN"
+echo "邮箱: $EMAIL"
+echo
+
+# 安装nginx
+echo "📦 安装nginx..."
+apt update
+apt install -y nginx
+
+# 安装certbot
+echo "📦 安装certbot..."
+apt install -y certbot python3-certbot-nginx
+
+# 创建基本nginx配置
+echo "⚙️  创建nginx配置..."
+cat > /etc/nginx/sites-available/chatapp << EOF
+server {
+    listen 80;
+    server_name $DOMAIN www.$DOMAIN;
+    
+    location /.well-known/acme-challenge/ {
+        root /var/www/html;
+    }
+    
+    location / {
+        proxy_pass http://localhost:3000;
+        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;
+    }
+    
+    location /api/ {
+        proxy_pass http://localhost:5000;
+        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;
+    }
+    
+    location /socket.io/ {
+        proxy_pass http://localhost:5000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade \$http_upgrade;
+        proxy_set_header Connection "upgrade";
+        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;
+    }
+}
+EOF
+
+# 启用站点
+ln -sf /etc/nginx/sites-available/chatapp /etc/nginx/sites-enabled/
+rm -f /etc/nginx/sites-enabled/default
+
+# 测试nginx配置
+nginx -t
+
+# 重启nginx
+systemctl restart nginx
+systemctl enable nginx
+
+echo "✅ nginx配置完成"
+echo
+
+# 获取SSL证书
+echo "🔒 获取SSL证书..."
+certbot --nginx -d $DOMAIN -d www.$DOMAIN --email $EMAIL --agree-tos --no-eff-email
+
+# 设置自动续期
+echo "⏰ 设置证书自动续期..."
+(crontab -l 2>/dev/null; echo "0 12 * * * /usr/bin/certbot renew --quiet") | crontab -
+
+# 复制完整的nginx配置
+echo "⚙️  应用完整nginx配置..."
+sed "s/your-domain.com/$DOMAIN/g" nginx-proxy.conf > /etc/nginx/sites-available/chatapp
+nginx -t
+systemctl reload nginx
+
+echo
+echo "🎉 SSL设置完成！"
+echo
+echo "🌐 您的网站现在可以通过以下地址访问:"
+echo "  - https://$DOMAIN"
+echo "  - https://www.$DOMAIN"
+echo
+echo "🔒 SSL证书信息:"
+certbot certificates
+echo
+echo "📋 管理命令:"
+echo "  - 续期证书: sudo certbot renew"
+echo "  - 查看证书: sudo certbot certificates"
+echo "  - 测试续期: sudo certbot renew --dry-run"

start-dev.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# 聊天应用开发环境启动脚本 - Linux版本
+
+echo "🚀 启动聊天应用 (开发模式)..."
+echo
+
+# 检查Docker是否安装
+if ! command -v docker &> /dev/null; then
+    echo "❌ 错误: Docker未安装"
+    echo "请先安装Docker: https://docs.docker.com/engine/install/"
+    exit 1
+fi
+
+# 检查Docker Compose是否安装
+if ! command -v docker-compose &> /dev/null && ! docker compose version &> /dev/null; then
+    echo "❌ 错误: Docker Compose未安装"
+    echo "请先安装Docker Compose: https://docs.docker.com/compose/install/"
+    exit 1
+fi
+
+# 检查Docker服务是否运行
+if ! docker info &> /dev/null; then
+    echo "❌ 错误: Docker服务未运行"
+    echo "请启动Docker服务: sudo systemctl start docker"
+    exit 1
+fi
+
+echo "✅ Docker环境检查通过"
+echo
+
+# 构建并启动开发环境
+echo "📦 构建并启动开发环境..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose -f docker-compose.dev.yml up --build
+else
+    docker compose -f docker-compose.dev.yml up --build
+fi

start.bat

@@ -0,0 +1,35 @@
+@echo off
+echo 启动聊天应用...
+echo.
+
+echo 检查Docker是否运行...
+docker --version >nul 2>&1
+if %errorlevel% neq 0 (
+    echo 错误: Docker未安装或未运行
+    echo 请先安装Docker Desktop并确保其正在运行
+    pause
+    exit /b 1
+)
+
+echo Docker已就绪
+echo.
+
+echo 构建并启动服务...
+docker-compose up --build -d
+
+if %errorlevel% equ 0 (
+    echo.
+    echo ✅ 聊天应用启动成功！
+    echo.
+    echo 🌐 前端地址: http://localhost:3000
+    echo 🔧 后端API: http://localhost:5000
+    echo 📊 MongoDB: localhost:27017
+    echo.
+    echo 按任意键打开浏览器...
+    pause >nul
+    start http://localhost:3000
+) else (
+    echo.
+    echo ❌ 启动失败，请检查错误信息
+    pause
+)

start.sh

@@ -0,0 +1,74 @@
+#!/bin/bash
+
+# 聊天应用启动脚本 - Linux版本
+
+echo "🚀 启动聊天应用..."
+echo
+
+# 检查Docker是否安装
+if ! command -v docker &> /dev/null; then
+    echo "❌ 错误: Docker未安装"
+    echo "请先安装Docker: https://docs.docker.com/engine/install/"
+    exit 1
+fi
+
+# 检查Docker Compose是否安装
+if ! command -v docker-compose &> /dev/null && ! docker compose version &> /dev/null; then
+    echo "❌ 错误: Docker Compose未安装"
+    echo "请先安装Docker Compose: https://docs.docker.com/compose/install/"
+    exit 1
+fi
+
+# 检查Docker服务是否运行
+if ! docker info &> /dev/null; then
+    echo "❌ 错误: Docker服务未运行"
+    echo "请启动Docker服务: sudo systemctl start docker"
+    exit 1
+fi
+
+echo "✅ Docker环境检查通过"
+echo
+
+# 设置权限
+chmod +x stop.sh
+
+# 构建并启动服务
+echo "📦 构建并启动服务..."
+if command -v docker-compose &> /dev/null; then
+    docker-compose up --build -d
+else
+    docker compose up --build -d
+fi
+
+if [ $? -eq 0 ]; then
+    echo
+    echo "🎉 聊天应用启动成功！"
+    echo
+    echo "🌐 前端地址: http://localhost:3000"
+    echo "🔧 后端API: http://localhost:5000"
+    echo "📊 MongoDB: localhost:27017"
+    echo
+    echo "📋 查看日志: docker-compose logs -f"
+    echo "🛑 停止应用: ./stop.sh"
+    echo
+    
+    # 等待服务启动
+    echo "⏳ 等待服务启动..."
+    sleep 10
+    
+    # 检查服务状态
+    echo "🔍 检查服务状态..."
+    if command -v docker-compose &> /dev/null; then
+        docker-compose ps
+    else
+        docker compose ps
+    fi
+    
+    echo
+    echo "✨ 应用已就绪，请访问 http://localhost:3000"
+else
+    echo
+    echo "❌ 启动失败，请检查错误信息"
+    echo "📋 查看日志: docker-compose logs"
+    exit 1
+fi

stop.bat

@@ -0,0 +1,16 @@
+@echo off
+echo 停止聊天应用...
+echo.
+
+docker-compose down
+
+if %errorlevel% equ 0 (
+    echo.
+    echo ✅ 聊天应用已停止
+) else (
+    echo.
+    echo ❌ 停止失败，请检查错误信息
+)
+
+echo.
+pause

stop.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+# 聊天应用停止脚本 - Linux版本
+
+echo "🛑 停止聊天应用..."
+echo
+
+# 停止服务
+if command -v docker-compose &> /dev/null; then
+    docker-compose down
+else
+    docker compose down
+fi
+
+if [ $? -eq 0 ]; then
+    echo
+    echo "✅ 聊天应用已停止"
+    echo
+    echo "🧹 清理资源 (可选):"
+    echo "  - 删除镜像: docker-compose down --rmi all"
+    echo "  - 删除数据卷: docker-compose down -v"
+    echo "  - 完全清理: docker-compose down -v --rmi all --remove-orphans"
+else
+    echo
+    echo "❌ 停止失败，请检查错误信息"
+    exit 1
+fi

test.sh

@@ -0,0 +1,176 @@
+#!/bin/bash
+
+# 聊天应用测试脚本
+
+echo "🧪 聊天应用功能测试"
+echo "=================="
+echo
+
+# 测试后端API
+echo "🔧 测试后端API..."
+
+# 健康检查
+echo -n "  健康检查: "
+if curl -f -s http://localhost:5000/api/health > /dev/null; then
+    echo "✅ 通过"
+    HEALTH=$(curl -s http://localhost:5000/api/health | jq -r '.status')
+    echo "    状态: $HEALTH"
+else
+    echo "❌ 失败"
+fi
+
+# 测试注册API
+echo -n "  注册API: "
+REGISTER_RESPONSE=$(curl -s -X POST http://localhost:5000/api/register \
+    -H "Content-Type: application/json" \
+    -d '{
+        "username": "testuser",
+        "email": "[email protected]",
+        "password": "testpass123"
+    }')
+
+if echo "$REGISTER_RESPONSE" | jq -e '.token' > /dev/null 2>&1; then
+    echo "✅ 通过"
+    TOKEN=$(echo "$REGISTER_RESPONSE" | jq -r '.token')
+else
+    echo "⚠️  用户可能已存在"
+    # 尝试登录
+    LOGIN_RESPONSE=$(curl -s -X POST http://localhost:5000/api/login \
+        -H "Content-Type: application/json" \
+        -d '{
+            "email": "[email protected]",
+            "password": "testpass123"
+        }')
+    
+    if echo "$LOGIN_RESPONSE" | jq -e '.token' > /dev/null 2>&1; then
+        echo "    登录成功"
+        TOKEN=$(echo "$LOGIN_RESPONSE" | jq -r '.token')
+    else
+        echo "    ❌ 登录失败"
+        TOKEN=""
+    fi
+fi
+
+# 测试获取消息API
+if [ -n "$TOKEN" ]; then
+    echo -n "  消息API: "
+    if curl -f -s -H "Authorization: Bearer $TOKEN" http://localhost:5000/api/messages > /dev/null; then
+        echo "✅ 通过"
+    else
+        echo "❌ 失败"
+    fi
+fi
+
+echo
+
+# 测试前端
+echo "🌐 测试前端服务..."
+echo -n "  前端可访问性: "
+if curl -f -s http://localhost:3000 > /dev/null; then
+    echo "✅ 通过"
+else
+    echo "❌ 失败"
+fi
+
+echo -n "  静态资源: "
+if curl -f -s http://localhost:3000/vite.svg > /dev/null; then
+    echo "✅ 通过"
+else
+    echo "❌ 失败"
+fi
+
+echo
+
+# 测试数据库
+echo "📊 测试数据库..."
+echo -n "  MongoDB连接: "
+if docker exec chat-mongo mongosh --eval "db.adminCommand('ping')" > /dev/null 2>&1; then
+    echo "✅ 通过"
+    
+    # 获取数据库统计
+    echo "  数据库统计:"
+    docker exec chat-mongo mongosh chatapp --eval "
+        print('    用户数量: ' + db.users.countDocuments());
+        print('    消息数量: ' + db.messages.countDocuments());
+    " 2>/dev/null
+else
+    echo "❌ 失败"
+fi
+
+echo
+
+# 测试Socket.IO连接
+echo "🔌 测试Socket.IO..."
+echo -n "  WebSocket连接: "
+
+# 使用Node.js测试Socket.IO连接
+node -e "
+const io = require('socket.io-client');
+const socket = io('http://localhost:5000');
+
+socket.on('connect', () => {
+    console.log('✅ 通过');
+    socket.disconnect();
+    process.exit(0);
+});
+
+socket.on('connect_error', (error) => {
+    console.log('❌ 失败:', error.message);
+    process.exit(1);
+});
+
+setTimeout(() => {
+    console.log('❌ 超时');
+    process.exit(1);
+}, 5000);
+" 2>/dev/null || echo "⚠️  需要安装socket.io-client进行测试"
+
+echo
+
+# 性能测试
+echo "⚡ 性能测试..."
+echo -n "  API响应时间: "
+RESPONSE_TIME=$(curl -o /dev/null -s -w '%{time_total}' http://localhost:5000/api/health)
+echo "${RESPONSE_TIME}s"
+
+echo -n "  前端加载时间: "
+FRONTEND_TIME=$(curl -o /dev/null -s -w '%{time_total}' http://localhost:3000)
+echo "${FRONTEND_TIME}s"
+
+echo
+
+# 安全测试
+echo "🔒 基础安全检查..."
+echo -n "  CORS配置: "
+CORS_HEADER=$(curl -s -I http://localhost:5000/api/health | grep -i "access-control-allow-origin")
+if [ -n "$CORS_HEADER" ]; then
+    echo "✅ 已配置"
+else
+    echo "⚠️  未检测到CORS头"
+fi
+
+echo -n "  JWT验证: "
+UNAUTH_RESPONSE=$(curl -s -o /dev/null -w '%{http_code}' http://localhost:5000/api/messages)
+if [ "$UNAUTH_RESPONSE" = "401" ]; then
+    echo "✅ 正常（未授权访问被拒绝）"
+else
+    echo "⚠️  可能存在安全问题"
+fi
+
+echo
+
+# 总结
+echo "📋 测试总结"
+echo "==========="
+echo "✅ 通过的测试将显示绿色勾号"
+echo "❌ 失败的测试将显示红色叉号"
+echo "⚠️  警告或需要注意的项目将显示黄色感叹号"
+echo
+echo "💡 如果有测试失败，请检查："
+echo "   1. 服务是否正常启动"
+echo "   2. 端口是否被占用"
+echo "   3. 防火墙设置"
+echo "   4. Docker容器状态"
+echo
+echo "🔧 查看详细日志: make logs"
+echo "📊 查看监控信息: ./monitor.sh"