Chat — 即时通讯

基于 Netty + Spring Boot 后端的 WebSocket 聊天应用，前端使用 Vue 3 + Vite。

技术栈

层	技术
前端	Vue 3 (Composition API)、Vite、WebSocket
后端	Java 21、Spring Boot 3.4、Netty 4.1
持久化	MySQL 8.0、MyBatis-Plus 3.5
构建	Maven、npm

项目结构

snake/
├── backend/                          # Netty WebSocket 服务
│   ├── pom.xml
│   └── src/main/java/com/chat/
│       ├── ChatServerApplication.java  # Spring Boot 入口
│       ├── config/
│       │   └── MyBatisPlusConfig.java   # MetaObjectHandler
│       ├── entity/
│       │   ├── UserEntity.java          # 用户实体
│       │   └── MessageEntity.java       # 消息实体
│       ├── mapper/
│       │   ├── UserMapper.java
│       │   └── MessageMapper.java
│       ├── handler/
│       │   └── ChatWebSocketHandler.java # WebSocket 协议分发
│       ├── model/
│       │   ├── ChatMessage.java          # 前后端交互消息协议
│       │   └── User.java                 # 用户 DTO
│       └── service/
│           └── ChatService.java          # 登录/注销/消息路由
├── frontend/                         # Vue 3 前端
│   ├── package.json
│   ├── vite.config.js                 # Vite 配置（WebSocket 代理）
│   ├── index.html
│   └── src/
│       ├── App.vue                    # 根组件
│       ├── composables/useWebSocket.js # WebSocket 连接管理
│       └── components/
│           ├── LoginPage.vue           # 登录页
│           ├── ChatRoom.vue            # 聊天主界面
│           ├── MessageBubble.vue       # 消息气泡
│           └── UserList.vue            # 在线用户列表
└── db/
    ├── init.sql                       # DDL + 测试数据
    └── create_user.sql                # 数据库用户创建

快速开始

1. 数据库

mysql -u root -p < db/init.sql
mysql -u root -p < db/create_user.sql

测试账号：alice / bob / charlie / admin，密码 123456（admin 密码 admin）。

2. 后端

cd backend
mvn package -q
java -jar target/chat-server-1.0-SNAPSHOT.jar

服务启动在 ws://localhost:8888/ws。

3. 前端

cd frontend
npm install
npm run dev

打开 http://localhost:5173 即可使用。

功能

• 用户登录（数据库认证）
• 公共群聊
• 用户在线状态实时同步
• 消息持久化（MySQL）
• 心跳保活
• 断线自动重连

WebSocket 消息协议

所有消息均为 JSON 格式。

客户端 → 服务端

type	字段	说明
LOGIN	from, password	登录
CHAT	content, targetType (USER/ROOM), target	发送消息
PING	—	心跳

服务端 → 客户端

type	字段	说明
LOGIN_SUCCESS	from, users[]	登录成功
LOGIN_FAILED	reason	登录失败
CHAT	from, content, targetType, target, timestamp	聊天消息
USER_JOINED	from, content, users[]	用户上线
USER_LEFT	from, content, users[]	用户下线
PONG	—	心跳回复
ERROR	reason	错误提示