一个现代化的实时聊天应用,支持Docker部署。
- 🚀 实时消息传递
- 👥 多用户聊天室
- 🔐 用户认证系统
- 📱 响应式设计
- 🐳 Docker容器化部署
- 💾 消息持久化存储
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Socket.IO Client
- Node.js
- Express
- Socket.IO
- MongoDB
- JWT认证
- Docker
- Docker Compose
- Docker Desktop (推荐)
- 或者 Node.js 18+ 和 MongoDB (本地开发)
- 双击运行
start.bat文件 - 等待构建完成
- 浏览器会自动打开 http://localhost:3000
# 设置权限
chmod +x *.sh
# 启动应用
./start.sh
# 或使用Makefile
make install
make start双击运行 stop.bat 文件
./stop.sh
# 或
make stop项目提供了多种Docker部署方式:
Dockerfile- 单容器部署(前端+后端)client/Dockerfile- 前端容器(React + Nginx)server/Dockerfile- 后端容器(Node.js + Express)
方式1: 多容器部署(推荐)
# 自动部署脚本
./deploy.sh
# 手动部署
docker-compose up --build -d
# 使用Makefile
make start方式2: 单容器部署
# 单容器版本(前端+后端在一个容器中)
docker-compose -f docker-compose.single.yml up --build -d
# 使用Makefile
make single方式3: 开发环境
# 开发环境(支持热重载)
./start-dev.sh
# 或
make dev# 交互式构建脚本
./build-docker.sh
# 使用Makefile构建
make build
# 手动构建
docker build -t chatapp-frontend ./client
docker build -t chatapp-backend ./server
docker build -t chatapp . # 单容器版本- 🌐 前端: http://localhost:3000
- 🔧 后端API: http://localhost:5000
- 📊 MongoDB: localhost:27017
# 使用Makefile(推荐)
make help # 查看所有命令
make start # 启动生产环境
make dev # 启动开发环境
make logs # 查看日志
make health # 检查服务状态
make backup # 备份数据库
make clean # 清理资源
# 或使用Docker Compose
docker-compose ps # 查看服务状态
docker-compose logs -f # 查看日志
docker-compose restart # 重启服务
docker-compose down # 停止服务- 安装依赖
# 后端
cd server
npm install
# 前端
cd ../client
npm install- 启动开发服务器
# 启动后端(终端1)
cd server
npm run dev
# 启动前端(终端2)
cd client
npm run devchat-app/
├── client/ # React前端应用
├── server/ # Node.js后端应用
├── docker-compose.yml
└── README.md
服务器端 (server/.env):
MONGODB_URI=mongodb://mongo:27017/chatapp
JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
PORT=5000
CLIENT_URL=http://localhost:3000客户端 (client/.env):
VITE_API_URL=http://localhost:5000默认MongoDB配置:
- 用户名: admin
- 密码: password123
- 数据库: chatapp
- 端口: 27017
- 前端: 3000
- 后端: 5000
- MongoDB: 27017
- 用户注册: 创建新账号
- 用户登录: 使用邮箱和密码登录
- 实时聊天: 发送和接收消息
- 在线用户: 查看当前在线用户
- 消息历史: 自动加载历史消息
- 响应式设计: 支持桌面和移动设备
如果你想在本地开发而不使用Docker:
- 安装MongoDB并启动服务
- 安装Node.js 18+
后端开发:
cd server
npm install
npm run dev前端开发:
cd client
npm install
npm run devchat-app/
├── 📁 client/ # React前端应用
│ ├── 📁 src/
│ │ ├── 📁 components/ # React组件
│ │ │ ├── Chat.tsx # 主聊天界面
│ │ │ ├── Login.tsx # 登录组件
│ │ │ └── Register.tsx # 注册组件
│ │ ├── 📁 types/ # TypeScript类型定义
│ │ ├── 📁 utils/ # 工具函数
│ │ │ ├── api.ts # API调用
│ │ │ └── socket.ts # Socket.IO客户端
│ │ ├── App.tsx # 主应用组件
│ │ ├── main.tsx # 应用入口
│ │ └── index.css # 全局样式
│ ├── 📁 public/ # 静态资源
│ ├── Dockerfile # 前端Docker配置
│ ├── nginx.conf # Nginx配置
│ └── package.json # 前端依赖
├── 📁 server/ # Node.js后端应用
│ ├── index.js # 主服务器文件
│ ├── package.json # 后端依赖
│ ├── Dockerfile # 后端Docker配置
│ └── .env # 环境变量
├── 🐳 docker-compose.yml # 生产环境配置
├── 🐳 docker-compose.dev.yml # 开发环境配置
├── 📜 mongo-init.js # MongoDB初始化脚本
├── 🔧 Makefile # 管理命令
├── 🚀 部署脚本/
│ ├── start.sh # Linux启动脚本
│ ├── start.bat # Windows启动脚本
│ ├── stop.sh # Linux停止脚本
│ ├── stop.bat # Windows停止脚本
│ ├── deploy.sh # 生产环境部署脚本
│ ├── start-dev.sh # 开发环境启动脚本
│ └── monitor.sh # 监控脚本
├── 🔒 SSL配置/
│ ├── setup-ssl.sh # SSL证书安装脚本
│ └── nginx-proxy.conf # Nginx反向代理配置
└── 📚 README.md # 项目文档
- JWT身份验证
- 密码加密存储
- CORS保护
- 输入验证
- XSS防护
- 安全HTTP头
# 一键部署脚本
sudo ./deploy.sh这个脚本会自动:
- 安装Docker和Docker Compose
- 生成安全的JWT密钥和数据库密码
- 构建并启动所有服务
- 进行健康检查
# 1. 设置权限
chmod +x *.sh
# 2. 启动服务
./start.sh
# 3. 查看状态
make health# 自动配置SSL证书和nginx反向代理
sudo ./setup-ssl.sh# 查看监控面板
./monitor.sh
# 实时监控(每30秒刷新)
watch -n 30 ./monitor.sh
# 备份数据库
make backup
# 恢复数据库
make restore FILE=backups/backup-file.gz
# 查看日志
make logs
# 更新应用
make update# 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创建systemd服务以实现开机自启:
# 创建服务文件
sudo tee /etc/systemd/system/chatapp.service > /dev/null <<EOF
[Unit]
Description=Chat Application
Requires=docker.service
After=docker.service
[Service]
Type=oneshot
RemainAfterExit=yes
WorkingDirectory=/path/to/your/chatapp
ExecStart=/usr/local/bin/docker-compose up -d
ExecStop=/usr/local/bin/docker-compose down
TimeoutStartSec=0
[Install]
WantedBy=multi-user.target
EOF
# 启用服务
sudo systemctl enable chatapp.service
sudo systemctl start chatapp.service欢迎提交Issue和Pull Request!
MIT License