README.md · jiaminChen/chat_app

# Chat Application

这是一个基于 React 和 Node.js 的实时聊天应用程序，使用 Material-UI 进行前端设计。

## 功能

- 实时消息传递
- 用户登录和注册
- 支持表情符号
- 消息历史记录
- 用户在线状态显示

## 技术栈

- 前端：React, Material-UI
- 后端：Node.js, Express
- 数据库：MongoDB
- 实时通信：Socket.IO

## 安装

### 前端

1. 克隆仓库

```bash
   git clone https://github.com/yourusername/chat-app.git
   cd chat-app
   ```

2. 安装依赖

```bash
   cd public
   npm install
   ```

3. 启动前端

```bash
   npm start
   ```

### 后端

1. 进入服务器目录

```bash
   cd server
   ```

2. 安装依赖

```bash
   npm install
   ```

3. 启动后端

```bash
   npm start
   ```

## 使用

1. 打开浏览器并访问 `http://localhost:3000`。
2. 注册一个新用户或使用现有账户登录。
3. 开始与其他用户聊天。

## 目录结构

chat-app/
│
├── public/ # 前端代码
│ ├── src/
│ │ ├── components/ # React 组件
│ │ ├── assets/ # 静态资源
│ │ └── utils/ # 工具函数
│ └── ...
│
└── server/ # 后端代码
├── models/ # 数据库模型
├── routes/ # API 路由
├── utils/ # 工具函数
└── ...

## 应用截屏
![输入图片说明](public/src/assets/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-20%20234928.png)
![输入图片说明](public/src/assets/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-20%20234932.png)
![输入图片说明](public/src/assets/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-20%20234949.png)
![输入图片说明](public/src/assets/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202025-03-20%20234942.png)

jiaminChen/chat_app

简介

发行版

贡献者

语言

近期动态

jiaminChen/chat_app .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

jiaminChen/chat_app