# ChatWave

**Repository Path**: clever_student/chat-wave

## Basic Information

- **Project Name**: ChatWave
- **Description**: 这是一款局域网聊天的工具，前端使用Vue3+Vite，后端使用Flask+SQLite搭建而成的。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 5
- **Created**: 2025-06-24
- **Last Updated**: 2025-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 局域网聊天工具, 局域网聊天系统, Vue3聊天系统

## README

# ChatWave - 局域网即时通讯工具

*来自一个大三学生的课设作业，项目完善度可能不太高，如果您有想法或者建议，希望能够悄悄指正🤐*

## 项目简介

ChatWave 是一个专为局域网环境设计的轻量级即时通讯工具，采用现代Web技术栈构建。项目提供完整的用户认证系统、实时聊天功能和在线状态管理，无需互联网连接即可在本地网络环境中实现安全通信。前端基于Vue 3构建响应式界面，后端使用Flask提供RESTful API和实时Socket通信，SQLite作为嵌入式数据库确保数据持久化。

## ⚠️ 注意事项

克隆/下载前请先阅读 **“🐼 安装与运行（必看）”** 部分，使用指定的克隆方法，如下：

```
git clone --recursive https://gitee.com/clever_student/chat-wave.git
```

## 功能特点

### 😸 核心功能

- **用户认证系统**：安全的注册/登录流程，JWT令牌保护
- **实时聊天**：一对一即时消息传输，毫秒级延迟
- **在线状态**：实时显示用户在线/离线状态
- **消息历史**：完整保存聊天记录
- **通知系统**：新消息实时提醒

###  😏技术亮点

- **双协议通信**：HTTP + WebSocket混合架构
- **响应式设计**：完美适配桌面和移动设备
- **自动重连**：网络波动时自动恢复连接
- **心跳检测**：10秒间隔维持长连接活性
- **房间隔离**：用户专属通信通道保障隐私

### 🧐 不足之处
- **历史聊天记录**：没有完善对聊天记录的删除以及加载优化
- **账号管理**：没有完善对账号的注销
- **文件传输**：还未开发此功能
- **群聊功能**：还未开发此功能
- **安全性**：未对账号密码进行加密，任何人都可以注册等

## 技术栈

### 前端

- Vue 3 (Composition API)
- Vue Router
- Socket.IO Client
- Axios

### 后端

- Flask
- Flask-SocketIO
- Flask-JWT-Extended
- Flask-SQLAlchemy
- SQLite

## 🐼 安装与运行（必看）

### 前置要求（仅参考）

- Python 3.9+
- Node.js 22.13.1+
- npm 11.1.0+
- pip 25.1.1+

### 克隆/下载

**注意：克隆一定要加--recursive参数**（添加 `--recursive` 参数会同时克隆所有子模块的内容）

```
git clone --recursive https://gitee.com/clever_student/chat-wave.git
```

如果克隆时**忘记加参数**或者直接点击**下载zip**那么请继续以下操作将子仓库代码克隆下载

```
# 进入项目目录
cd chat-wave

# 初始化子模块配置
git submodule init

# 检出子模块内容
git submodule update
```

## 项目结构（大致）

```
chatwave/
├── backend/                # 后端服务
│   ├── app.py              # Flask主应用
│   ├── requirements.txt    # Python依赖
│   └── instance/chat.db    # 数据库运行时自动生成
│
├── frontend/               # 前端应用
│   ├── src/
│   │   ├── views/          # 页面组件
│   │   │   ├── Login/      # 登录注册界面
│   │   │   └── Chat/       # 主聊天界面
│   │   ├── router/         # 路由配置
│   │   ├── assets/         # 静态资源
│   │   ├── main.js  	    # 入口文件
│   │   ├── style.cs        # 全局样式文件
│   │   └── App.vue         # 根组件
│   ├── index.html          # 首页
│   ├── package.json        # 前端依赖
│   └── vite.config.js      # vite配置
│   
└── README.md               # 项目文档
```

### 后端安装

```
# 进入后端根文件夹
cd chat-wave/backend

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate     # Windows

# 安装依赖
pip install -r requirements.txt

# 运行后端
python app.py
```

### 前端安装

```
# 进入前端根文件夹
cd chat-wave/frontend

# 安装依赖
npm install

# 运行前端
npm run dev
```

访问 `http://localhost:8233/` 开始使用ChatWave（可参考使用指南部分）

### 如果前端提示代理或连接错误

请确保后端运行的地址接口与前端对接的接口是否一致

1. 复制后端接口地址，如下图：
<img src="assets/backend_service_url.png" alt="">
2. 找到前端 **vite.config.js** 文件，将代理目标替换成刚刚复制的地址接口，文件路径如下：
```
chat-wave\frontend\vite.config.js
```
<img src="assets/vite_config_url.png" alt="">

3. 找到前端 **ChatContainer.vue** 文件，将socket连接地址替换成刚刚复制的地址接口，文件路径如下：
```
chat-Wave\frontend\src\views\Chat\ChatContainer.vue
```
<img src="assets/socket_url.png" alt="">

4. 重新启动前端项目，开始使用ChatWave（可参考使用指南部分）

## 使用指南

1. **注册账号**
   首次使用需创建账户，设置用户名和密码
   请**至少创建两个账号**用于聊天测试

2. **登录系统**
   使用注册凭证登录，获取访问令牌

   同一个系统下请使用不同浏览器分别登录这两个账号

3. **开始聊天**
   - 左侧选择在线用户
   - 输入消息并发送
   - 查看实时聊天记录

4. **管理连接**
   - 顶部显示当前用户状态
   - 右下角显示在线用户数
   - 菜单可退出登录


## 运行效果

### 登录界面
<img src="assets/login_page.png" alt="">

### 注册界面
<img src="assets/register_page.png" alt="">

### 聊天界面
<img src="assets/chat_page.png" alt="">

### 双方聊天
<img src="assets/chat_page2.png" alt="">


## 联系作者
- 请使用微信扫一扫
- 您的反馈是我们更新的动力源泉，我们非常乐意得到您宝贵的反馈！

<img src="assets/contact.jpg" alt="" width="260">