vue3-homework/WEBSOCKET_TEST_GUIDE.md

WebSocket 聊天系统测试指南

🚀 功能特性

1. 用户管理

• ✅ 用户登录/退出
• ✅ 在线用户实时显示
• ✅ 用户上线/下线通知

2. 消息类型

• ✅ 广播消息 - 所有在线用户都能收到
• ✅ 私聊消息 - 点对点发送给特定用户
• ✅ 系统消息 - 用户上线/下线通知

3. 技术实现

• 后端: Spring Boot + WebSocket + STOMP
• 前端: Vue 3 + Element Plus + TypeScript
• 消息协议: STOMP over SockJS

🧪 测试步骤

1. 启动后端服务

cd ws-begin
mvn spring-boot:run

后端将在 http://localhost:8080 启动

2. 启动前端服务

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 功能

@MessageMapping("/sendToUser")
public void sendToUser(@Payload Message message, @Header("simpSessionId") String sessionId) {
    // 检查接收者是否在线
    if (userSessionService.isUserOnline(message.getReceiver())) {
        // 发送给特定用户
        simpMessagingTemplate.convertAndSendToUser(
            message.getReceiver(), 
            "/queue/private", 
            message
        );
    }
}

前端私聊订阅

// 订阅私聊消息
stompClient?.subscribe('/user/queue/private', (msg) => {
    console.log('收到私聊消息:', msg)
    // 处理私聊消息...
})

🎯 测试要点

1. 多用户测试: 使用多个浏览器窗口模拟多用户
2. 消息准确性: 确保私聊消息只有指定用户能收到
3. 状态同步: 用户上线/下线状态正确同步
4. 错误处理: 向离线用户发送消息的错误提示

🐛 常见问题

1. 消息重复: 已解决订阅重复问题
2. 跨域问题: 已配置 CORS 支持
3. 连接失败: 检查后端服务是否启动
4. 私聊失败: 确保目标用户已登录且在线