这是一个基于WebSocket技术开发的实时聊天应用，采用前后端分离架构，前端使用Vue 3组件化开发，后端采用Node.js的Koa2框架结合MySQL数据库，实现了完整的实时聊天功能。
- Vue 3：采用组合式API (Composition API)
- Vue Router：用于前端路由管理
- Pinia：状态管理
- WebSocket：实现实时通信
- CSS：纯CSS实现的美观界面，无需第三方UI库
- Node.js
- Koa2：轻量级Web框架
- WebSocket：实现服务器推送
- MySQL：数据持久化存储
- JWT：用户身份验证
- ✅ 用户注册与登录
- ✅ JWT身份验证
- ✅ 用户在线状态实时显示
- ✅ 安全的退出登录功能
- ✅ 实时私聊消息
- ✅ 聊天历史记录保存
- ✅ 聊天弹窗模式
- ✅ 未读消息提醒
- ✅ 用户列表与会话列表切换
- ✅ 会话搜索功能
- ✅ 响应式设计
- ✅ 简洁直观的操作
- ✅ 用户头像自动生成（基于用户名）
- ✅ 消息气泡样式区分发送方和接收方
项目根目录/
├── frontend/ # 前端Vue项目
│ ├── src/ # 源代码目录
│ │ ├── assets/ # 静态资源
│ │ ├── components/ # 公共组件
│ │ │ ├── Modal.vue # 通用弹窗组件
│ │ │ └── ChatModal.vue # 聊天弹窗组件
│ │ ├── router/ # 路由配置
│ │ ├── stores/ # Pinia状态管理
│ │ │ ├── user.js # 用户状态管理
│ │ │ └── message.js # 消息状态管理
│ │ ├── views/ # 页面组件
│ │ │ ├── Login.vue # 登录页面
│ │ │ ├── Register.vue # 注册页面
│ │ │ ├── ChatList.vue # 聊天列表页面
│ │ │ └── Chat.vue # 聊天页面
│ │ ├── App.vue # 根组件
│ │ └── main.js # 应用入口
│ └── package.json # 前端依赖
│
├── backend/ # 后端Koa项目
│ ├── middlewares/ # 中间件
│ ├── models/ # 数据模型
│ ├── routes/ # API路由
│ ├── server.js # 服务器入口
│ └── db.js # 数据库连接
│
├── table.sql # 数据库结构
└── README.md # 项目文档
项目使用MySQL数据库，主要包含以下表：
- users表：存储用户信息，包括用户名、密码、昵称等
- conversations表：存储用户之间的会话
- messages表：存储聊天消息记录
本项目使用.env文件来存储环境变量。由于安全原因，该文件不包含在代码仓库中。为了方便开发者，项目提供了.env.example文件作为模板。
- 在
backend目录中找到.env.example文件 - 复制该文件并重命名为
.env - 打开
.env文件并设置你自己的环境变量值
.env文件包含以下配置项：
# 服务器配置
PORT=3000
# 数据库配置
DB_HOST=localhost
DB_PORT=3306
DB_USER=你的数据库用户名
DB_PASSWORD=你的数据库密码
DB_NAME=chat_app
# JWT配置
JWT_SECRET=你的JWT密钥(建议使用随机字符串)
JWT_EXPIRES_IN=7d # JWT有效期，例如：7天
# WebSocket配置
WS_PING_INTERVAL=30000 # WebSocket心跳检测间隔(毫秒)
# 日志配置
LOG_LEVEL=info # 日志级别：debug, info, warn, error
注意：确保为生产环境设置强密码和复 7ECD 的JWT密钥。永远不要在公共代码库中提交包含真实密码或密钥的
.env文件。
- 确保安装了Node.js (推荐v14+)
- 确保安装了MySQL数据库
- 使用
table.sql创建所需的数据库和表 - 按照上述说明配置
.env文件
# 进入后端目录
cd backend
# 安装依赖
npm install
# 启动服务
npm run dev服务将运行在 http://localhost:3000
# 进入前端目录
cd frontend
# 安装依赖
npm install
# 启动应用
npm run dev应用将运行在 http://localhost:5173 (或Vite分配的其他端口)
- 实时通信：基于WebSocket实现的双向实时通信，消息即时送达
- 用户状态感知：实时显示用户在线状态，无需刷新页面
- 响应式设计：适配不同尺寸的设备屏幕
- 模块化架构：前后端分离，代码组织清晰
- 安全性考虑：使用JWT实现安全认证，密码加密存储
- 添加群聊功能
- 支持图片和文件共享
- 添加表情选择器
- 实现消息已读状态
- 支持消息撤回功能
- 添加用户个人资料设置
欢迎提交问题和功能请求！如果您想贡献代码，请遵循以下步骤：
- Fork 本仓库
- 创建您的特性分支:
git checkout -b my-new-feature - 提交您的更改:
git commit -am 'Add some feature' - 推送到分支:
git push origin my-new-feature - 提交拉取请求
本项目采用MIT许可证，详情请见LICENSE文件。