Sse Auto Reconnect

// Server sends retry interval
const http = require('http');
let eventId = 0;

http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
  });

  // Set custom reconnection time to 5 seconds
  res.write('retry: 5000\n\n');

  // Send events with IDs
  const interval = setInterval(() => {
    eventId++;
    res.write(
      `id: event-${eventId}\n` +
      `data: ${JSON.stringify({ count: eventId, time: Date.now() })}\n` +
      '\n'
    );
  }, 1000);

  req.on('close', () => clearInterval(interval));
}).listen(3000);

// Client reads retry value
const source = new EventSource('/events');

source.onmessage = (event) => {
  console.log('Received:', event.data);
  console.log('Last ID:', event.lastEventId);
};

// Access retry value (not directly available in API)
// The retry is handled automatically by the browser

class SSEReconnectManager {
  constructor(url) {
    this.url = url;
    this.retryCount = 0;
    this.maxRetries = 10;
    this.listeners = new Map();
    this.connect();
  }

  connect() {
    this.source = new EventSource(this.url);
    this.source._manager = this;

    this.source.onopen = () => {
      this.retryCount = 0;
      this.emit('connected');
    };

    this.source.onmessage = (event) => {
      this.emit('message', event);
    };

    this.source.onerror = () => {
      // EventSource will try to reconnect automatically
      this.retryCount++;
      this.emit('reconnecting', this.retryCount);

      if (this.retryCount >= this.maxRetries) {
        this.emit('max-retries', this.maxRetries);
        this.source.close();
      }
    };
  }

  on(event, callback) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event).add(callback);
  }

  emit(event, data) {
    this.listeners.get(event)?.forEach(cb => cb(data));
  }

  close() {
    this.source.close();
    this.emit('disconnected');
  }
}

// Usage with UI feedback
const sse = new SSEReconnectManager('/events');

sse.on('connected', () => {
  updateConnectionStatus('connected');
  hideReconnectBanner();
});

sse.on('reconnecting', (attempt) => {
  updateConnectionStatus('reconnecting');
  showReconnectBanner(`Reconnecting (attempt ${attempt})...`);
});

sse.on('max-retries', (max) => {
  updateConnectionStatus('failed');
  showReconnectBanner(`Connection failed after ${max} attempts`);
  showManualReconnectButton();
});

sse.on('message', (event) => {
  processEvent(JSON.parse(event.data));
});

// Server that resumes from last event ID
const http = require('http');
const events = [];
let eventId = 0;

// Generate events
setInterval(() => {
  eventId++;
  const event = {
    id: eventId,
    data: { id: eventId, value: Math.random(), time: Date.now() },
  };
  events.push(event);
  if (events.length > 1000) events.shift(); // Keep last 1000
}, 1000);

http.createServer((req, res) => {
  // Check for Last-Event-ID
  const lastEventId = parseInt(req.headers['last-event-id']?.replace('event-', '')) || 0;
  
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
  });

  // Send missed events first
  const missedEvents = events.filter(e => e.id > lastEventId);
  missedEvents.forEach(event => {
    res.write(
      `id: event-${event.id}\n` +
      `data: ${JSON.stringify(event.data)}\n` +
      '\n'
    );
  });

  // Continue with new events
  const interval = setInterval(() => {
    eventId++;
    const data = { id: eventId, value: Math.random(), time: Date.now() };
    res.write(
      `id: event-${eventId}\n` +
      `data: ${JSON.stringify(data)}\n` +
      '\n'
    );
  }, 1000);

  req.on('close', () => clearInterval(interval));
}).listen(3000);

// Client with manual reconnection
function connectWithRecovery() {
  const eventSource = new EventSource('/events');
  let lastProcessedId = null;

  eventSource.onmessage = (event) => {
    lastProcessedId = event.lastEventId;
    processEvent(JSON.parse(event.data));
  };

  eventSource.onerror = () => {
    eventSource.close();
    
    if (lastProcessedId) {
      // Custom reconnect with last ID
      const url = `/events?since=${lastProcessedId}`;
      const newSource = new EventSource(url);
      // Re-bind handlers...
    } else {
      setTimeout(connectWithRecovery, 3000);
    }
  };
}