실전 패턴

class RobustSocket extends EventTarget {
  constructor(url) {
    super();
    this.url = url;
    this.handlers = new Map();      // type -> fn
    this.pingTimer = null;
    this.pongTimer = null;
    this._connect();
  }

  on(type, fn) { this.handlers.set(type, fn); return this; }

  send(type, data) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ type, data }));
    }
  }

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

    this.ws.addEventListener('open', () => {
      this._startHeartbeat();
      this.dispatchEvent(new Event('connected'));
    });

    this.ws.addEventListener('message', (e) => {
      let msg;
      try { msg = JSON.parse(e.data); } catch { return; }
      if (msg.type === 'pong') return clearTimeout(this.pongTimer);
      const handler = this.handlers.get(msg.type);
      if (handler) handler(msg.data);
      else this.dispatchEvent(new MessageEvent('unhandled', { data: msg }));
    });

    this.ws.addEventListener('close', () => {
      this._stopHeartbeat();
      // Reconnection logic from previous lesson goes here.
    });
  }

  _startHeartbeat() {
    this.pingTimer = setInterval(() => {
      if (this.ws?.readyState !== WebSocket.OPEN) return;
      this.ws.send(JSON.stringify({ type: 'ping' }));
      this.pongTimer = setTimeout(() => {
        // No pong in 5s; assume dead.
        this.ws.close(4000, 'heartbeat timeout');
      }, 5_000);
    }, 30_000);
  }

  _stopHeartbeat() {
    clearInterval(this.pingTimer);
    clearTimeout(this.pongTimer);
  }
}

// Usage
const ws = new RobustSocket('wss://api.example.com/ws');
ws.on('chat.message', (m) => renderMessage(m));
ws.on('user.joined',  (u) => addUserToSidebar(u));
ws.send('chat.message', { room: 'general', text: 'hi' });