# 聊天室

**Repository Path**: Java-ZhangYi/chat-room

## Basic Information

- **Project Name**: 聊天室
- **Description**: 聊天室
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-07-22
- **Last Updated**: 2025-07-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 聊天室, WebSocket, Java, vue2

## README

# Chat-Demo 聊天室应用

一个基于 Spring Boot 和 Vue.js 构建的实时聊天应用，支持私聊和群聊功能。

## 技术栈

### 前端技术栈
- 框架: Vue.js 2.x
- UI 组件库: Element UI
- HTTP 客户端: Axios
- WebSocket 客户端: 原生 WebSocket API
- 构建工具: Vue CLI / Webpack

### 后端技术栈
- 框架: Spring Boot 2.x
- WebSocket: Spring WebSocket
- ORM 框架: MyBatis-Plus
- 数据库: MySQL
- 安全: Spring Security
- 文件存储: 本地文件系统

## 功能特点

### 用户管理
- 用户注册
    - 用户名和密码注册
    - 用户名唯一性验证
![img_2.png](img_2.png)
- 用户登录
    - 基于用户名和密码的身份验证
    - 会话保持
![img_1.png](img_1.png)
- 个人资料管理
    - 上传/更新用户头像
    - 查看其他用户的头像
![img_3.png](img_3.png)
### 私聊功能
- 一对一聊天
- 实时消息发送和接收
- 在线/离线状态显示
- 未读消息计数
- 消息类型
    - 文本消息
    - 文件传输
    - 表情符号支持
- 消息管理
    - 消息历史记录查看
    - 已读/未读状态显示
![img_4.png](img_4.png)
![img_5.png](img_5.png)
![img_6.png](img_6.png)
### 群聊功能
- 群组管理
    - 创建新群组
    - 群主解散群组
    - 群成员退出群组
    - 邀请新成员加入群组
- 群聊消息
    - 群组实时消息发送和接收
    - 发送者信息显示
    - 群消息历史记录
    - 群消息未读计数
![img_7.png](img_7.png)
![img_8.png](img_8.png)
![img_9.png](img_9.png)
![img_10.png](img_10.png)
### 文件管理
- 文件传输
    - 支持在聊天中发送文件
    - 文件预览和下载
    - 支持多种文件类型
- 头像管理
    - 上传个人头像
    - 预览和更改头像

### 用户界面
- 主题切换
    - 亮色/暗色主题支持
    - 主题设置保存
- 响应式设计
    - 适配桌面端和移动端
    - 针对不同屏幕尺寸优化
- 搜索功能
    - 搜索用户和群组
![img_11.png](img_11.png)
### 实时通知
- 消息通知
    - 未读消息计数显示
    - 新消息提醒

## 系统架构

### 前端架构
前端采用 Vue.js 单页应用架构，主要组件包括：
```aiignore
- App.vue: 应用主组件，管理全局状态和视图切换
- Login.vue/Register.vue: 用户认证组件
- UserList.vue: 联系人和群组列表组件
- ChatRoom.vue: 聊天主界面组件
- CreateGroupDialog.vue: 创建群组对话框组件
- InviteMembersDialog.vue: 邀请群成员对话框组件
```

### 后端架构
后端采用 Spring Boot 分层架构，主要包括：
```aiignore
- **Controller 层**: 处理 HTTP 和 WebSocket 请求
    - UserController: 用户相关接口
    - ChatController: 聊天历史和状态接口
    - GroupController: 群组管理接口
    - ChatEndpoint: WebSocket 消息处理
    - FileController: 文件上传和下载
- **Service 层**: 业务逻辑处理
    - UserService: 用户管理服务
    - ChatService: 消息处理服务
    - GroupService: 群组管理服务
    - FileService: 文件管理服务
- **Mapper 层**: 数据访问层
    - UserMapper: 用户数据操作
    - ChatMessageMapper: 消息数据操作
    - ChatGroupMapper: 群组数据操作
    - GroupMemberMapper: 群组成员数据操作
    - FileInfoMapper: 文件信息数据操作
- **Domain 层**: 数据模型
    - User/UserVO: 用户模型
    - ChatMessage: 消息模型
    - ChatGroup/ChatGroupVO: 群组模型
    - GroupMember: 群组成员模型
    - FileInfo: 文件信息模型

```
## 数据库设计

### 主要表结构
```aiignore
- **user 表**: 存储用户信息
    - id: 用户ID (主键)
    - username: 用户名 (唯一)
    - password: 密码 (加密存储)
    - avatar_id: 头像文件ID

- **chat_message 表**: 存储聊天消息
    - id: 消息ID (主键)
    - sender_id: 发送者ID
    - recipient_id: 接收者ID (私聊为用户ID，群聊为0)
    - group_id: 群组ID (私聊为NULL)
    - text: 消息内容
    - timestamp: 发送时间
    - is_read: 是否已读
    - file_id: 文件ID (如果是文件消息)
    - file_name: 文件名称
    - file_type: 文件类型
    - file_size: 文件大小

- **chat_group 表**: 存储群组信息
    - id: 群组ID (主键)
    - name: 群组名称
    - creator_id: 创建者ID
    - create_time: 创建时间
    - update_time: 更新时间

- **group_member 表**: 存储群组成员关系
    - id: 记录ID (主键)
    - group_id: 群组ID
    - user_id: 用户ID
    - join_time: 加入时间
    - nickname: 群内昵称

- **file_info 表**: 存储文件信息
    - id: 记录ID (主键)
    - file_id: 文件唯一标识
    - file_name: 文件名称
    - file_type: 文件类型
    - file_size: 文件大小
    - uploader_id: 上传者ID
    - upload_time: 上传时间
    - original_filename: 原始文件名
```

## 安装和部署

### 前端部署
1. 进入前端目录
2. 安装依赖
```bash
# 安装依赖
npm install

# 开发模式
npm run serve

# 生产构建
npm run build
```

### 前端部署后端运行
```bash
# 编译项目
mvn clean package

# 启动应用
java -jar target/chat-demo-0.0.1.jar
```


## 项目结构
``` 
chat-demo/
├── frontend/    # 前端代码
│   ├── public/
│   └── src/
│       ├── assets/
│       ├── components/
│       └── views/
└── backend/     # 后端代码
├── src/
│   ├── main/
│   │   ├── java/com/chat/
│   │   └── resources/
└── pom.xml
```



##  扩展计划
  ```
  🔹 移动端适配
  🔹 消息加密功能
  🔹 音视频通话集成
  🔹 聊天记录搜索
  🔹 多语言支持
  ```


##  贡献指南
```aiignore
欢迎提交PR！ 
```