WebSocket常见问题有哪些？如何排查和解决？

在实际开发中，WebSocket可能会遇到各种问题。了解常见问题及其解决方案对于快速定位和解决问题至关重要。

连接建立问题

问题1：连接无法建立

症状：WebSocket连接一直处于CONNECTING状态，或者直接报错。

可能原因：

1. 服务器未启动或端口错误
2. 防火墙阻止连接
3. 使用了错误的协议（ws vs wss）
4. 代理服务器不支持WebSocket

排查步骤：

javascript
const ws = new WebSocket('ws://example.com:8080/socket');

ws.onerror = (error) => {
  console.error('连接错误:', error);
  
  // 检查连接状态
  console.log('连接状态:', ws.readyState);
  
  // 检查网络连接
  if (!navigator.onLine) {
    console.error('网络未连接');
  }
};

ws.onclose = (event) => {
  console.error('连接关闭:', event.code, event.reason);
  
  // 根据关闭码判断原因
  switch (event.code) {
    case 1000:
      console.log('正常关闭');
      break;
    case 1006:
      console.error('连接异常关闭，可能是网络问题');
      break;
    case 1002:
      console.error('协议错误');
      break;
  }
};

解决方案：

javascript
// 1. 验证服务器地址和端口
function validateServerUrl(url) {
  try {
    const parsed = new URL(url);
    if (!['ws:', 'wss:'].includes(parsed.protocol)) {
      throw new Error('协议错误，必须使用ws或wss');
    }
    if (!parsed.port) {
      console.warn('未指定端口，使用默认端口');
    }
    return true;
  } catch (error) {
    console.error('URL格式错误:', error);
    return false;
  }
}

// 2. 添加超时处理
function connectWithTimeout(url, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const ws = new WebSocket(url);
    const timer = setTimeout(() => {
      ws.close();
      reject(new Error('连接超时'));
    }, timeout);
    
    ws.onopen = () => {
      clearTimeout(timer);
      resolve(ws);
    };
    
    ws.onerror = (error) => {
      clearTimeout(timer);
      reject(error);
    };
  });
}

// 3. 检查网络状态
function checkNetworkStatus() {
  if (!navigator.onLine) {
    throw new Error('网络未连接');
  }
  
  // 监听网络状态变化
  window.addEventListener('online', () => {
    console.log('网络已恢复');
  });
  
  window.addEventListener('offline', () => {
    console.log('网络已断开');
  });
}

问题2：握手失败

症状：连接建立后立即关闭，状态码为1002或1008。

可能原因：

1. Origin验证失败
2. 子协议不匹配
3. 认证失败

排查步骤：

javascript
// 服务器端日志
wss.on('connection', (ws, request) => {
  console.log('收到连接请求');
  console.log('Origin:', request.headers.origin);
  console.log('User-Agent:', request.headers['user-agent']);
  console.log('Subprotocols:', request.headers['sec-websocket-protocol']);
});

// 客户端检查
const ws = new WebSocket('ws://example.com/socket', ['chat', 'notification']);

ws.onclose = (event) => {
  console.error('连接关闭码:', event.code);
  console.error('关闭原因:', event.reason);
  
  if (event.code === 1008) {
    console.error('认证失败，请检查token');
  }
};

解决方案：

javascript
// 服务器端：详细的错误处理
wss.on('connection', (ws, request) => {
  try {
    // 验证Origin
    const origin = request.headers.origin;
    if (!allowedOrigins.includes(origin)) {
      ws.close(1008, 'Origin not allowed');
      return;
    }
    
    // 验证子协议
    const protocols = request.headers['sec-websocket-protocol'];
    if (!protocols || !allowedProtocols.some(p => protocols.includes(p))) {
      ws.close(1002, 'Protocol not supported');
      return;
    }
    
    // 验证认证信息
    const token = getTokenFromRequest(request);
    if (!verifyToken(token)) {
      ws.close(1008, 'Authentication failed');
      return;
    }
    
    // 连接成功
    console.log('连接建立成功');
  } catch (error) {
    console.error('连接处理错误:', error);
    ws.close(1011, 'Internal server error');
  }
});

消息传输问题

问题3：消息丢失

症状：发送的消息没有到达服务器，或服务器发送的消息没有到达客户端。

可能原因：

1. 连接在消息传输过程中断开
2. 消息队列溢出
3. 网络延迟或丢包

排查步骤：

javascript
// 客户端：添加消息确认机制
class ReliableWebSocket {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.pendingMessages = new Map();
    this.messageId = 0;
    this.setupMessageHandlers();
  }
  
  send(data) {
    const id = ++this.messageId;
    const message = { id, data, timestamp: Date.now() };
    
    this.pendingMessages.set(id, {
      message,
      sendTime: Date.now(),
      retryCount: 0
    });
    
    this.ws.send(JSON.stringify(message));
    
    // 设置超时重试
    setTimeout(() => {
      this.checkMessageDelivery(id);
    }, 5000);
  }
  
  setupMessageHandlers() {
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      
      if (data.type === 'ack') {
        this.handleAck(data.id);
      }
    };
  }
  
  handleAck(id) {
    const pending = this.pendingMessages.get(id);
    if (pending) {
      const deliveryTime = Date.now() - pending.sendTime;
      console.log(`消息 ${id} 送达，耗时 ${deliveryTime}ms`);
      this.pendingMessages.delete(id);
    }
  }
  
  checkMessageDelivery(id) {
    const pending = this.pendingMessages.get(id);
    if (pending && pending.retryCount < 3) {
      console.log(`消息 ${id} 未确认，重试中...`);
      pending.retryCount++;
      this.ws.send(JSON.stringify(pending.message));
      
      setTimeout(() => {
        this.checkMessageDelivery(id);
      }, 5000);
    } else if (pending) {
      console.error(`消息 ${id} 发送失败`);
      this.pendingMessages.delete(id);
    }
  }
}

问题4：消息顺序错乱

症状：后发送的消息先到达，导致消息处理顺序错误。

解决方案：

javascript
class OrderedWebSocket {
  constructor(url) {
    this.ws = new WebSocket(url);
    this.expectedSequence = 0;
    this.messageBuffer = new Map();
    this.setupMessageHandlers();
  }
  
  setupMessageHandlers() {
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.handleMessage(data);
    };
  }
  
  handleMessage(data) {
    if (data.sequence === undefined) {
      // 无序号消息，直接处理
      this.processMessage(data);
      return;
    }
    
    if (data.sequence === this.expectedSequence) {
      // 期望的消息，直接处理
      this.processMessage(data);
      this.expectedSequence++;
      
      // 检查缓冲区中是否有后续消息
      this.checkBuffer();
    } else if (data.sequence > this.expectedSequence) {
      // 后续消息，放入缓冲区
      this.messageBuffer.set(data.sequence, data);
      console.log(`消息 ${data.sequence} 缓存，等待 ${this.expectedSequence}`);
    } else {
      // 过期消息，忽略
      console.log(`忽略过期消息 ${data.sequence}`);
    }
  }
  
  checkBuffer() {
    while (this.messageBuffer.has(this.expectedSequence)) {
      const data = this.messageBuffer.get(this.expectedSequence);
      this.processMessage(data);
      this.messageBuffer.delete(this.expectedSequence);
      this.expectedSequence++;
    }
  }
  
  processMessage(data) {
    console.log(`处理消息 ${data.sequence}:`, data.content);
  }
}

性能问题

问题5：连接数过多导致服务器崩溃

症状：服务器CPU和内存使用率过高，无法处理新的连接。

解决方案：

javascript
// 服务器端：连接数限制
const MAX_CONNECTIONS = 10000;
const MAX_CONNECTIONS_PER_IP = 10;

const connectionCount = new Map();
const ipConnectionCount = new Map();

wss.on('connection', (ws, request) => {
  const ip = request.socket.remoteAddress;
  
  // 检查总连接数
  if (connectionCount.size >= MAX_CONNECTIONS) {
    ws.close(1008, 'Server full');
    return;
  }
  
  // 检查单个IP连接数
  const ipCount = ipConnectionCount.get(ip) || 0;
  if (ipCount >= MAX_CONNECTIONS_PER_IP) {
    ws.close(1008, 'Too many connections from this IP');
    return;
  }
  
  // 记录连接
  connectionCount.set(ws, ip);
  ipConnectionCount.set(ip, ipCount + 1);
  
  ws.on('close', () => {
    const clientIp = connectionCount.get(ws);
    if (clientIp) {
      const count = ipConnectionCount.get(clientIp) - 1;
      if (count <= 0) {
        ipConnectionCount.delete(clientIp);
      } else {
        ipConnectionCount.set(clientIp, count);
      }
      connectionCount.delete(ws);
    }
  });
});

// 定期清理僵尸连接
setInterval(() => {
  wss.clients.forEach((ws) => {
    if (ws.readyState === WebSocket.OPEN) {
      // 发送ping检测连接
      ws.ping();
    } else {
      // 关闭无效连接
      ws.terminate();
    }
  });
}, 30000);

问题6：内存泄漏

症状：服务器内存使用持续增长，最终导致OOM。

排查步骤：

javascript
// 添加内存监控
setInterval(() => {
  const used = process.memoryUsage();
  console.log('内存使用情况:');
  console.log(`  RSS: ${Math.round(used.rss / 1024 / 1024)} MB`);
  console.log(`  Heap Total: ${Math.round(used.heapTotal / 1024 / 1024)} MB`);
  console.log(`  Heap Used: ${Math.round(used.heapUsed / 1024 / 1024)} MB`);
  console.log(`  External: ${Math.round(used.external / 1024 / 1024)} MB`);
}, 60000);

// 检查连接数
setInterval(() => {
  console.log('当前连接数:', wss.clients.size);
}, 60000);

解决方案：

javascript
// 1. 及时清理事件监听器
ws.on('close', () => {
  // 清理所有事件监听器
  ws.removeAllListeners();
  
  // 清理相关数据
  if (ws.userData) {
    delete ws.userData;
  }
});

// 2. 限制消息缓冲区大小
const MAX_BUFFER_SIZE = 100;

wss.on('connection', (ws) => {
  ws.messageBuffer = [];
  
  ws.on('message', (message) => {
    ws.messageBuffer.push(message);
    
    // 限制缓冲区大小
    if (ws.messageBuffer.length > MAX_BUFFER_SIZE) {
      ws.messageBuffer.shift();
    }
  });
  
  ws.on('close', () => {
    // 清理缓冲区
    ws.messageBuffer = null;
  });
});

// 3. 使用WeakMap存储临时数据
const weakMap = new WeakMap();

wss.on('connection', (ws) => {
  weakMap.set(ws, { timestamp: Date.now() });
  
  ws.on('close', () => {
    // WeakMap会自动清理
  });
});

调试技巧

1. 启用详细日志

javascript
// 服务器端
const DEBUG = process.env.NODE_ENV !== 'production';

function debugLog(...args) {
  if (DEBUG) {
    console.log('[DEBUG]', ...args);
  }
}

wss.on('connection', (ws, request) => {
  debugLog('新连接:', request.socket.remoteAddress);
  
  ws.on('message', (message) => {
    debugLog('收到消息:', message.toString());
  });
  
  ws.on('close', (code, reason) => {
    debugLog('连接关闭:', code, reason.toString());
  });
});

2. 使用浏览器开发者工具

javascript
// 在浏览器中监控WebSocket
const ws = new WebSocket('ws://example.com/socket');

// 拦截所有WebSocket事件
const originalSend = ws.send.bind(ws);
ws.send = function(data) {
  console.log('发送:', data);
  return originalSend(data);
};

ws.onmessage = (event) => {
  console.log('接收:', event.data);
};

3. 使用网络抓包工具

• Wireshark：抓取网络包，分析WebSocket通信
• Chrome DevTools：Network标签查看WebSocket帧
• Fiddler：拦截和调试WebSocket流量

最佳实践

1. 完善的错误处理：捕获所有可能的错误
2. 详细的日志记录：记录关键事件和错误信息
3. 监控和告警：实时监控服务器状态
4. 压力测试：测试系统在高负载下的表现
5. 定期检查：定期检查日志和性能指标
6. 文档记录：记录已知问题和解决方案