Thanks to visit codestin.com
Credit goes to github.com

Skip to content

rowjt/cb-

Repository files navigation

完美聊天网站

一个现代化的实时聊天应用,支持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 (本地开发)

🚀 一键启动

Windows

  1. 双击运行 start.bat 文件
  2. 等待构建完成
  3. 浏览器会自动打开 http://localhost:3000

Linux/macOS

# 设置权限
chmod +x *.sh

# 启动应用
./start.sh

# 或使用Makefile
make install
make start

🛑 停止应用

Windows

双击运行 stop.bat 文件

Linux/macOS

./stop.sh
#
make stop

🐳 Docker部署(推荐)

项目提供了多种Docker部署方式:

📦 Dockerfile文件说明

  • 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

🔨 构建Docker镜像

# 交互式构建脚本
./build-docker.sh

# 使用Makefile构建
make build

# 手动构建
docker build -t chatapp-frontend ./client
docker build -t chatapp-backend ./server
docker build -t chatapp .  # 单容器版本

访问应用

常用命令

# 使用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           # 停止服务

本地开发

  1. 安装依赖
# 后端
cd server
npm install

# 前端
cd ../client
npm install
  1. 启动开发服务器
# 启动后端(终端1)
cd server
npm run dev

# 启动前端(终端2)
cd client
npm run dev

项目结构

chat-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

📱 功能演示

  1. 用户注册: 创建新账号
  2. 用户登录: 使用邮箱和密码登录
  3. 实时聊天: 发送和接收消息
  4. 在线用户: 查看当前在线用户
  5. 消息历史: 自动加载历史消息
  6. 响应式设计: 支持桌面和移动设备

🛠️ 开发指南

本地开发环境

如果你想在本地开发而不使用Docker:

  1. 安装MongoDB并启动服务
  2. 安装Node.js 18+

后端开发:

cd server
npm install
npm run dev

前端开发:

cd client
npm install
npm run dev

📁 项目结构

chat-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头

🚀 Linux生产环境部署

自动部署(推荐)

# 一键部署脚本
sudo ./deploy.sh

这个脚本会自动:

  • 安装Docker和Docker Compose
  • 生成安全的JWT密钥和数据库密码
  • 构建并启动所有服务
  • 进行健康检查

手动部署

# 1. 设置权限
chmod +x *.sh

# 2. 启动服务
./start.sh

# 3. 查看状态
make health

SSL证书配置(HTTPS)

# 自动配置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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published