Reconnecting WebSocket Chat Client with a Broadcasting Node Server

export class ReconnectingSocket {
  constructor(url, { maxDelay = 15000, base = 500 } = {}) {
    this.url = url;
    this.maxDelay = maxDelay;
    this.base = base;
    this.attempt = 0;
    this.queue = [];
    this.stopped = false;
    this.handlers = { message: () => {}, status: () => {} };
    this.connect();
  }

  onMessage(fn) { this.handlers.message = fn; return this; }
  onStatus(fn) { this.handlers.status = fn; return this; }

  connect() {
    this.handlers.status('connecting');
    const ws = new WebSocket(this.url);
    this.ws = ws;

    ws.addEventListener('open', () => {
      this.attempt = 0;
      this.handlers.status('open');
      while (this.queue.length) ws.send(this.queue.shift());
    });

    ws.addEventListener('message', (e) => {
      try { this.handlers.message(JSON.parse(e.data)); } catch {}
    });

    ws.addEventListener('close', () => {
      if (this.stopped) return;
      this.handlers.status('reconnecting');
      const delay = Math.min(this.maxDelay, this.base * 2 ** this.attempt);
      this.attempt += 1;
      setTimeout(() => this.connect(), delay + Math.random() * 250);
    });

    ws.addEventListener('error', () => ws.close());
  }

  send(payload) {
    const data = JSON.stringify(payload);
    if (this.ws && this.ws.readyState === WebSocket.OPEN) this.ws.send(data);
    else this.queue.push(data);
  }

  close() {
    this.stopped = true;
    if (this.ws) this.ws.close();
  }
}

import { ReconnectingSocket } from './ReconnectingSocket.js';

const log = document.querySelector('#log');
const status = document.querySelector('#status');
const form = document.querySelector('#composer');
const input = document.querySelector('#text');

const socket = new ReconnectingSocket('wss://chat.example.com/ws')
  .onStatus((state) => {
    status.textContent = state;
    status.dataset.state = state;
  })
  .onMessage((msg) => {
    const row = document.createElement('div');
    row.className = `msg msg--${msg.type}`;
    row.textContent = msg.type === 'chat'
      ? `${msg.from}: ${msg.text}`
      : msg.text;
    log.appendChild(row);
    log.scrollTop = log.scrollHeight;
  });

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  socket.send({ text });
  input.value = '';
});

window.addEventListener('beforeunload', () => socket.close());