WebSocket connection management patterns

Need robust WebSocket connections that handle disconnections, reconnections, and message queuing.

Resilient WebSocket client:

class ReconnectingWebSocket {
  constructor(url, options = {}) {
    this.url = url;
    this.maxRetries = options.maxRetries || 10;
    this.baseDelay = options.baseDelay || 1000;
    this.maxDelay = options.maxDelay || 30000;
    this.retries = 0;
    this.queue = []; // Messages queued while disconnected
    this.listeners = new Map();
    this.connect();
  }

  connect() {
    this.ws = new WebSocket(this.url);

    this.ws.onopen = () => {
      this.retries = 0;
      // Flush queued messages
      while (this.queue.length > 0) {
        this.ws.send(this.queue.shift());
      }
      this.emit('connected');
    };

    this.ws.onclose = (event) => {
      if (!event.wasClean && this.retries < this.maxRetries) {
        const delay = Math.min(
          this.baseDelay * Math.pow(2, this.retries),
          this.maxDelay
        );
        this.retries++;
        setTimeout(() => this.connect(), delay);
        this.emit('reconnecting', { attempt: this.retries, delay });
      }
    };

    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.emit('message', data);
    };
  }

  send(data) {
    const msg = JSON.stringify(data);
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(msg);
    } else {
      this.queue.push(msg); // Queue for later
    }
  }

  on(event, handler) {
    if (!this.listeners.has(event)) this.listeners.set(event, []);
    this.listeners.get(event).push(handler);
  }

  emit(event, data) {
    (this.listeners.get(event) || []).forEach(fn => fn(data));
  }

  close() {
    this.maxRetries = 0; // Prevent reconnection
    this.ws.close();
  }
}

Server-side: implement heartbeat/ping-pong to detect dead connections.

WebSocket connections drop due to network changes, server restarts, load balancer timeouts, and mobile backgrounding. Without reconnection logic, real-time features silently break.

Real-time web applications using WebSockets