140 lines
3.8 KiB
Markdown
140 lines
3.8 KiB
Markdown
# WebSocket连接问题 - 最终解决方案
|
||
|
||
## 当前状况分析
|
||
|
||
从最新的日志分析：
|
||
- ✅ WebSocket连接正常建立
|
||
- ✅ 心跳ping/pong正常工作
|
||
- ❌ 客户端没有成功订阅到任何房间
|
||
- ❌ 所有房间的size都显示为0
|
||
|
||
## 问题定位
|
||
|
||
这表明问题不在于连接稳定性，而在于订阅机制。可能的原因：
|
||
|
||
1. **前端订阅请求没有发送到后端**
|
||
2. **后端接收到订阅请求但处理失败**
|
||
3. **Socket.IO房间机制存在问题**
|
||
|
||
## 立即测试步骤
|
||
|
||
### 1. 使用测试页面验证
|
||
|
||
访问: `http://localhost:3001/websocket-test.html`
|
||
|
||
这个测试页面将帮助你：
|
||
- 验证WebSocket连接
|
||
- 测试订阅功能
|
||
- 查看详细的连接日志
|
||
- 监控数据接收
|
||
|
||
### 2. 检查前端订阅调用
|
||
|
||
在你的UI项目中，确保正确调用订阅：
|
||
|
||
```javascript
|
||
// 确保在连接成功后调用
|
||
websocketService.connect().then(() => {
|
||
// 等待连接稳定
|
||
setTimeout(() => {
|
||
websocketService.subscribeToProcessInfo('your-server-id');
|
||
}, 1000);
|
||
});
|
||
```
|
||
|
||
### 3. 手动测试订阅
|
||
|
||
在浏览器控制台中执行：
|
||
|
||
```javascript
|
||
// 检查WebSocket状态
|
||
console.log('WebSocket连接状态:', websocketService.isConnected());
|
||
|
||
// 手动发送订阅请求
|
||
websocketService.emit('subscribe-server-metrics', {
|
||
serverId: 'f196a4c8-118b-4ce8-946e-8c8e80be63bd',
|
||
interval: 5000
|
||
});
|
||
|
||
// 请求连接状态
|
||
websocketService.emit('get-connection-status');
|
||
```
|
||
|
||
## 修复内容总结
|
||
|
||
### 后端增强：
|
||
1. **详细的订阅处理日志** - 可以看到每一步的处理过程
|
||
2. **多次房间验证** - 在500ms、1s、2s后检查房间状态
|
||
3. **自动重新加入机制** - 如果检测到客户端意外离开房间，自动重新加入
|
||
4. **连接状态验证** - 确保客户端在订阅时确实已连接
|
||
|
||
### 前端增强：
|
||
1. **强化的订阅逻辑** - 增加重试和确认机制
|
||
2. **订阅超时处理** - 5秒内未收到确认则重试
|
||
3. **心跳保活** - 每30秒发送ping保持连接活跃
|
||
4. **连接监控** - 每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. 检查网络连接
|
||
```bash
|
||
# 测试WebSocket端点
|
||
curl -I http://localhost:3001/monitoring/socket.io/
|
||
```
|
||
|
||
### 2. 使用原生WebSocket测试
|
||
```javascript
|
||
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. 降级解决方案
|
||
```typescript
|
||
// 在websocket.ts中强制使用轮询
|
||
transports: ["polling"] // 移除websocket
|
||
```
|
||
|
||
## 成功指标
|
||
|
||
连接正常时，你应该看到：
|
||
- ✅ 后端房间size > 0
|
||
- ✅ 前端收到subscription-confirmed事件
|
||
- ✅ 持续收到server-metrics-update事件
|
||
- ✅ 心跳ping/pong正常
|
||
|
||
## 下一步
|
||
|
||
1. **重启后端服务器** 应用所有修复
|
||
2. **刷新前端页面**
|
||
3. **访问测试页面** `http://localhost:3001/websocket-test.html`
|
||
4. **测试连接和订阅**
|
||
5. **查看详细日志** 确定具体问题所在
|
||
|
||
如果使用测试页面能正常工作，说明后端没问题，需要检查前端UI项目的集成问题。
|