# chat

**Repository Path**: yuter/chat

## Basic Information

- **Project Name**: chat
- **Description**: 该聊天系统已经实现了类似微信的核心功能，包括实时消息传递、用户在线状态显示和消息历史记录等。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-15
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Chat - 实时聊天应用

一个基于 React 前端和 Node.js 后端的实时聊天应用，支持用户注册登录、实时消息收发和在线用户管理。

## 功能特性

- **用户认证**：注册、登录功能，使用 JWT 和 bcrypt 进行安全认证
- **实时通信**：基于 Socket.IO 的实时消息推送
- **在线状态**：实时显示在线用户列表
- **消息管理**：消息历史记录存储
- **响应式设计**：适配不同设备的界面

## 技术栈

### 前端
- React 18
- Vite 6
- Socket.IO Client

### 后端
- Node.js
- Express 4
- Socket.IO 4
- MongoDB (Mongoose)
- JWT 认证
- bcryptjs 加密

## 项目结构

```
chat/
├── client/                 # React 前端项目
│   ├── public/            # 静态资源
│   ├── src/               # 源代码
│   │   ├── components/    # React 组件
│   │   │   ├── Chat.jsx       # 聊天界面
│   │   │   ├── Login.jsx      # 登录页面
│   │   │   ├── Register.jsx   # 注册页面
│   │   │   └── UserList.jsx   # 在线用户列表
│   │   ├── services/      # 服务层
│   │   │   ├── api.js         # HTTP API 服务
│   │   │   └── socket.js      # Socket.IO 服务
│   │   ├── App.jsx        # 主应用组件
│   │   └── main.jsx       # 应用入口
│   └── package.json
│
├── server/                # Node.js 后端项目
│   ├── index.js          # 服务入口文件
│   ├── .env              # 环境变量配置
│   └── node_modules/     # 依赖包
│
└── README.md
```

## 快速开始

### 环境要求
- Node.js >= 14
- MongoDB >= 4.4

### 安装步骤

1. **克隆项目**
```bash
git clone <项目地址>
cd chat
```

2. **安装后端依赖**
```bash
cd server
npm install
```

3. **配置环境变量**
编辑 `server/.env` 文件：
```env
PORT=3001
MONGODB_URI=mongodb://localhost:27017/chat
JWT_SECRET=your_jwt_secret_key
```

4. **启动后端服务**
```bash
npm start
```

5. **安装前端依赖**
```bash
cd ../client
npm install
```

6. **启动前端开发服务器**
```bash
npm run dev
```

7. **访问应用**
打开浏览器访问 `http://localhost:5173`

## API 接口

### 认证接口
| 方法 | 路径 | 说明 |
|------|------|------|
| POST | /api/auth/register | 用户注册 |
| POST | /api/auth/login | 用户登录 |

### 消息接口
| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /api/messages | 获取消息历史 |
| POST | /api/messages | 发送消息 |

## Socket.IO 事件

### 客户端发送
| 事件 | 数据 | 说明 |
|------|------|------|
| login | { userId } | 用户登录 |
| logout | { userId } | 用户登出 |
| sendMessage | { content, to } | 发送消息 |

### 客户端接收
| 事件 | 数据 | 说明 |
|------|------|------|
| newMessage | { from, content, timestamp } | 新消息 |
| userOnline | { userId, username } | 用户上线 |
| userOffline | { userId } | 用户下线 |
| onlineUsers | { users } | 在线用户列表 |

## 环境变量说明

| 变量名 | 说明 | 默认值 |
|--------|------|--------|
| PORT | 服务器端口 | 3001 |
| MONGODB_URI | MongoDB 连接字符串 | mongodb://localhost:27017/chat |
| JWT_SECRET | JWT 密钥 | - |

## 开发说明

### 前端开发
```bash
cd client
npm run dev      # 启动开发服务器
npm run build    # 构建生产版本
npm run preview  # 预览生产版本
```

### 后端开发
```bash
cd server
npm start        # 启动生产服务
# 使用 nodemon 自动重启
npx nodemon index.js
```

## 许可证

MIT License