Optimize WebSocket connection with heartbeat and backoff

[RUKAYAT-CODER]

Background

Socket connections can become stale without detection mechanism. Ping/pong heartbeat every 30s detects dead connections within 30s (vs indefinite hang). Exponential backoff for reconnection prevents server overload during network issues.

Description

Currently, stale WebSocket connections hang indefinitely. Implement ping/pong heartbeat and exponential backoff for reconnection attempts.

Current Behavior

Stale connections linger. Reconnection attempts rapid on failure.

Expected Behavior

Ping/pong detects dead connections within 30s. Smart backoff for reconnection.

Impact

🔌 Detect dead connections within 30 seconds
🚀 Faster connection recovery (<10s vs 30s+)
🛡️ Prevent server overload from rapid reconnect attempts

Acceptance Criteria

• Add ping/pong heartbeat every 30 seconds
• Detect connection liveness with timeout (5s)
• Implement exponential backoff for reconnection
• Reconnection delays: 1s, 2s, 4s, 8s, 16s, 32s, 60s
• Connection recovery time improves to <10s
• Monitor stale connection detection in production
• Add integration tests for connection scenarios
• Document socket connection strategy

Implementation Hints

In socket.io config, use ping/pong. Implement custom backoff logic. Use socket.io auto events (connect, disconnect, reconnect_attempt).

Performance Metrics

Before:

• connectionRecovery: 30+ seconds
• reconnectSpam: Rapid attempts

After (Target):

• connectionRecovery: <10 seconds (-67%)
• reconnectSpam: Exponential backoff prevents spam

Related Issues

• Feature/mobile navigation #13
• feat: Implement Mobile Profile Management components #14
• feat: add mobile video player component with controls and picture-in-… #20