# 在线聊天室

**Repository Path**: qq-angular/online-chat-room

## Basic Information

- **Project Name**: 在线聊天室
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-12
- **Last Updated**: 2025-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线聊天室

## 📖 项目介绍
在线聊天室是一个基于Node.js和Vue 3开发的实时通信应用，支持多用户同时在线聊天、图片分享、消息引用和表情包等功能。本项目采用前后端分离架构，使用Socket.io实现实时通信，提供了简洁友好的用户界面和稳定可靠的服务端支持。

## 🚀 功能特性

### 核心功能
- **实时聊天**：支持多用户同时在线实时通信
- **用户管理**：用户加入/离开通知、在线用户列表显示
- **消息类型**：支持发送文本消息和图片消息
- **消息引用**：支持引用回复其他用户的消息
- **@提及功能**：支持@特定用户
- **用户昵称**：支持自定义和修改用户昵称

### 媒体功能
- **图片上传**：支持上传JPG、PNG、GIF和WebP格式的图片
- **动态表情**：内置多种动态表情供用户选择
- **表情包**：支持分类查看和使用表情包

### 系统管理
- **CDN目录监控**：自动监控图片存储目录大小，超过阈值时自动清理旧文件
- **服务重启清理**：服务重启时自动清理CDN图片目录，释放存储空间
- **聊天历史**：自动保存最近100条聊天记录

## 🛠 技术栈

### 后端
- **Node.js**：JavaScript运行环境
- **Express**：Web应用框架
- **Socket.io**：实时通信库
- **Multer**：文件上传中间件

### 前端
- **Vue 3**：JavaScript框架
- **Vite**：构建工具
- **Element Plus**：UI组件库
- **Socket.io-client**：Socket.io客户端

## 📦 安装教程

### 环境要求
- Node.js 14.x 或更高版本
- npm 6.x 或更高版本

### 安装步骤

1. **克隆项目**
```bash
# 克隆项目代码
git clone [项目地址]
cd chat-on-web
```

2. **安装后端依赖**
```bash
# 在项目根目录执行
npm install
```

3. **安装前端依赖**
```bash
# 进入前端目录
cd frontend
npm install
# 返回根目录
cd ..
```

## 🚀 使用说明

### 开发环境

1. **启动后端服务（开发模式）**
```bash
# 在项目根目录执行
npm run dev
# 这将使用nodemon启动服务器，支持热重载
```

2. **启动前端开发服务器**
```bash
# 打开新终端，进入前端目录
cd frontend
npm run dev
```

3. **访问应用**
打开浏览器，访问 `http://localhost:5173`（或前端控制台显示的地址）

### 生产环境

1. **构建前端应用**
```bash
# 在项目根目录执行
npm run build
# 这将自动安装前端依赖并构建前端应用
```

2. **启动后端服务**
```bash
# 在项目根目录执行
npm start
# 或使用PM2等进程管理工具
```

3. **访问应用**
打开浏览器，访问 `http://localhost:3000`（或服务器的IP地址）

### 环境变量配置

- **PORT**：服务器端口，默认3000
- **BIND_ADDRESS**：绑定地址，默认0.0.0.0
- **CDN_SIZE_LIMIT_MB**：CDN图片目录大小限制（MB），默认500MB

## 📁 项目结构

```
online-chat-room/
├── public/              # 静态资源目录
│   ├── cdn-images/      # CDN图片存储目录
│   └── temp-uploads/    # 临时上传目录
├── frontend/            # 前端项目目录
│   ├── src/             # 前端源码
│   │   ├── components/  # Vue组件
│   │   ├── styles/      # 样式文件
│   │   ├── utils/       # 工具函数
│   │   ├── App.vue      # 根组件
│   │   ├── Chart.vue    # 聊天室主组件
│   │   └── main.js      # 入口文件
│   ├── package.json     # 前端依赖配置
│   └── vite.config.js   # Vite配置文件
├── server.js            # 后端主文件
├── package.json         # 后端依赖配置
├── README.md            # 项目说明文档（中文）
└── README.en.md         # 项目说明文档（英文）
```

## 🔧 功能详解

### 用户系统
- **用户加入**：输入用户名即可加入聊天室
- **用户列表**：实时显示当前在线用户
- **昵称修改**：支持修改用户昵称，所有历史消息也会同步更新

### 聊天功能
- **发送消息**：输入文本后按Enter发送消息
- **引用回复**：右键点击消息可选择引用回复
- **@用户**：右键点击用户头像可选择@该用户
- **图片发送**：支持粘贴图片或拖拽上传图片

### 媒体管理
- **图片存储**：上传的图片存储在public/cdn-images目录
- **自动清理**：当图片目录大小超过限制时，系统会自动删除最旧的文件
- **服务重启清理**：服务重启时会自动清理所有CDN图片，确保资源释放

## 🤝 参与贡献

1. Fork 本仓库
2. 新建 Feature 分支（`git checkout -b feature/AmazingFeature`）
3. 提交代码（`git commit -m 'Add some AmazingFeature'`）
4. 推送到分支（`git push origin feature/AmazingFeature`）
5. 开启 Pull Request

## 📝 注意事项

1. 确保在项目根目录和frontend目录都安装了依赖
2. 首次启动时会自动创建必要的目录
3. 如需修改CDN目录大小限制，可通过环境变量CDN_SIZE_LIMIT_MB设置
4. 生产环境建议使用进程管理工具如PM2来管理Node.js进程

## 📄 许可证
本项目使用 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情