112 lines
2.9 KiB
Markdown
112 lines
2.9 KiB
Markdown
# WebSocket 聊天系统测试指南
|
||
|
||
## 🚀 功能特性
|
||
|
||
### 1. 用户管理
|
||
- ✅ 用户登录/退出
|
||
- ✅ 在线用户实时显示
|
||
- ✅ 用户上线/下线通知
|
||
|
||
### 2. 消息类型
|
||
- ✅ **广播消息** - 所有在线用户都能收到
|
||
- ✅ **私聊消息** - 点对点发送给特定用户
|
||
- ✅ **系统消息** - 用户上线/下线通知
|
||
|
||
### 3. 技术实现
|
||
- **后端**: Spring Boot + WebSocket + STOMP
|
||
- **前端**: Vue 3 + Element Plus + TypeScript
|
||
- **消息协议**: STOMP over SockJS
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 1. 启动后端服务
|
||
```bash
|
||
cd ws-begin
|
||
mvn spring-boot:run
|
||
```
|
||
后端将在 `http://localhost:8080` 启动
|
||
|
||
### 2. 启动前端服务
|
||
```bash
|
||
cd my-vue3-app
|
||
npm run dev
|
||
```
|
||
前端将在 `http://localhost:5173` 启动
|
||
|
||
### 3. 测试广播消息
|
||
1. 访问 `/test` 页面
|
||
2. 输入用户ID（如：user1）并点击"登录"
|
||
3. 点击"发送广播消息"按钮
|
||
4. 查看广播消息列表
|
||
|
||
### 4. 测试私聊功能
|
||
1. 打开两个浏览器窗口（或无痕模式）
|
||
2. 分别以不同用户ID登录（如：user1, user2）
|
||
3. 在在线用户列表中选择要发送的用户
|
||
4. 输入私聊消息并发送
|
||
5. 查看私聊记录
|
||
|
||
### 5. 测试用户状态
|
||
1. 用户登录时，其他用户会收到上线通知
|
||
2. 用户关闭页面时，会收到下线通知
|
||
3. 在线用户列表实时更新
|
||
|
||
## 📡 API 端点
|
||
|
||
### WebSocket 端点
|
||
- **连接**: `ws://localhost:8080/ws`
|
||
- **协议**: STOMP over SockJS
|
||
|
||
### 消息映射
|
||
- `/app/login` - 用户登录
|
||
- `/app/send` - 发送广播消息
|
||
- `/app/sendToUser` - 发送私聊消息
|
||
|
||
### 订阅主题
|
||
- `/topic/messages` - 广播消息
|
||
- `/topic/users` - 用户状态变化
|
||
- `/user/queue/private` - 私聊消息
|
||
|
||
### REST API
|
||
- `GET /api/onlineUsers` - 获取在线用户列表
|
||
|
||
## 🔧 关键功能说明
|
||
|
||
### sendToUser 功能
|
||
```java
|
||
@MessageMapping("/sendToUser")
|
||
public void sendToUser(@Payload Message message, @Header("simpSessionId") String sessionId) {
|
||
// 检查接收者是否在线
|
||
if (userSessionService.isUserOnline(message.getReceiver())) {
|
||
// 发送给特定用户
|
||
simpMessagingTemplate.convertAndSendToUser(
|
||
message.getReceiver(),
|
||
"/queue/private",
|
||
message
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### 前端私聊订阅
|
||
```typescript
|
||
// 订阅私聊消息
|
||
stompClient?.subscribe('/user/queue/private', (msg) => {
|
||
console.log('收到私聊消息:', msg)
|
||
// 处理私聊消息...
|
||
})
|
||
```
|
||
|
||
## 🎯 测试要点
|
||
|
||
1. **多用户测试**: 使用多个浏览器窗口模拟多用户
|
||
2. **消息准确性**: 确保私聊消息只有指定用户能收到
|
||
3. **状态同步**: 用户上线/下线状态正确同步
|
||
4. **错误处理**: 向离线用户发送消息的错误提示
|
||
|
||
## 🐛 常见问题
|
||
|
||
1. **消息重复**: 已解决订阅重复问题
|
||
2. **跨域问题**: 已配置 CORS 支持
|
||
3. **连接失败**: 检查后端服务是否启动
|
||
4. **私聊失败**: 确保目标用户已登录且在线 |