pitfalls-websocketlisted

# WebSocket Pitfalls Common pitfalls and correct patterns for WebSocket implementations. ## When to Use - Implementing WebSocket server - Building WebSocket client with reconnection - Debugging connection drops - Adding heartbeat/ping-pong - Reviewing WebSocket code ## Workflow ### Step 1: Verify Server Setup Check WebSocket server shares HTTP port. ### Step 2: Check Heartbeat Ensure ping/pong heartbeat is implemented. ### Step 3: Verify Client Reconnection Confirm exponential backoff reconnection logic. --- ## Server Pattern ```typescript const wss = new WebSocketServer({ server: httpServer }); // Same port wss.on('connection', (ws) => { // Heartbeat ws.isAlive = true; ws.on('pong', () => { ws.isAlive = true; }); ws.on('message', (data) => { try { const msg = JSON.parse(data.toString()); // Validate message type } catch { ws.send(JSON.stringify({ error: 'Invalid message' })); } }); }); // Heartbeat interval setInterval(() => { wss.clients.forEach((ws) => { if (!ws.isAlive) return ws.terminate(); ws.isAlive = false; ws.ping(); }); }, 30000); ``` ## Client Reconnection ```typescript // Client - reconnection logic with exponential backoff let attempt = 0; function connect() { const ws = new WebSocket(url); ws.onopen = () => { attempt = 0; // Reset on successful connection }; ws.onclose = () => { const delay = Math.min(1000 * Math.pow(2, attempt), 30000); attempt++; setTimeout(co