3.8 KiB

Raw Blame History

WebSocket连接问题 - 最终解决方案

当前状况分析

从最新的日志分析：

✅ WebSocket连接正常建立
✅ 心跳ping/pong正常工作
❌ 客户端没有成功订阅到任何房间
❌ 所有房间的size都显示为0

问题定位

这表明问题不在于连接稳定性，而在于订阅机制。可能的原因：

前端订阅请求没有发送到后端
后端接收到订阅请求但处理失败
Socket.IO房间机制存在问题

立即测试步骤

1. 使用测试页面验证

访问: http://localhost:3001/websocket-test.html

这个测试页面将帮助你：

验证WebSocket连接
测试订阅功能
查看详细的连接日志
监控数据接收

2. 检查前端订阅调用

在你的UI项目中，确保正确调用订阅：

// 确保在连接成功后调用
websocketService.connect().then(() => {
  // 等待连接稳定
  setTimeout(() => {
    websocketService.subscribeToProcessInfo('your-server-id');
  }, 1000);
});

3. 手动测试订阅

在浏览器控制台中执行：

// 检查WebSocket状态
console.log('WebSocket连接状态:', websocketService.isConnected());

// 手动发送订阅请求
websocketService.emit('subscribe-server-metrics', {
  serverId: 'f196a4c8-118b-4ce8-946e-8c8e80be63bd',
  interval: 5000
});

// 请求连接状态
websocketService.emit('get-connection-status');

修复内容总结

后端增强：

详细的订阅处理日志 - 可以看到每一步的处理过程
多次房间验证 - 在500ms、1s、2s后检查房间状态
自动重新加入机制 - 如果检测到客户端意外离开房间，自动重新加入
连接状态验证 - 确保客户端在订阅时确实已连接

前端增强：

强化的订阅逻辑 - 增加重试和确认机制
订阅超时处理 - 5秒内未收到确认则重试
心跳保活 - 每30秒发送ping保持连接活跃
连接监控 - 每10秒检查连接状态

预期结果

修复后，你应该在后端日志中看到：

[handleSubscribeServerMetrics] 📥 Client xxx requesting to join room: server-metrics-xxx
[handleSubscribeServerMetrics] ✅ Client xxx joined room server-metrics-xxx, current room size: 1
[handleSubscribeServerMetrics] 📨 Sending subscription confirmation
[handleSubscribeServerMetrics] ✅ Room server-metrics-xxx still has 1 clients after 500ms

在前端控制台中看到：

[WebSocketService] 📤 Emitting event: subscribe-server-metrics
[WebSocketService] 📨 Received subscription-confirmed event
[WebSocketService] ✅ Subscription confirmed for server xxx

如果问题仍然存在

1. 检查网络连接

# 测试WebSocket端点
curl -I http://localhost:3001/monitoring/socket.io/

2. 使用原生WebSocket测试

const ws = new WebSocket('ws://localhost:3001/monitoring');
ws.onopen = () => console.log('原生WebSocket连接成功');
ws.onmessage = (e) => console.log('收到消息:', e.data);
ws.onerror = (e) => console.error('WebSocket错误:', e);

3. 检查防火墙和代理

临时禁用防火墙
检查浏览器代理设置
尝试使用不同的浏览器

4. 降级解决方案

// 在websocket.ts中强制使用轮询
transports: ["polling"]  // 移除websocket

成功指标

连接正常时，你应该看到：

✅ 后端房间size > 0
✅ 前端收到subscription-confirmed事件
✅ 持续收到server-metrics-update事件
✅ 心跳ping/pong正常

下一步

重启后端服务器 应用所有修复
刷新前端页面
访问测试页面 http://localhost:3001/websocket-test.html
测试连接和订阅
查看详细日志 确定具体问题所在

如果使用测试页面能正常工作，说明后端没问题，需要检查前端UI项目的集成问题。

3.8 KiB Raw Blame History Unescape Escape