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. **私聊失败**: 确保目标用户已登录且在线
|