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