EventSource vs WebSocket — reconnect playground

<div class="pg">
    <h1 class="pg-title">🔌 EventSource vs. plain WebSocket — who reconnects?</h1>
    <p class="pg-sub">
      Start a live feed, then simulate a dropped connection. Watch which mode
      gets itself back online — and which one just sits there until code you
      wrote runs.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Choose a connection type</div>
      <div class="seg" id="modeSeg" role="group" aria-label="Connection type">
        <button class="seg-btn" data-mode="sse" aria-pressed="true">EventSource</button>
        <button class="seg-btn" data-mode="ws" aria-pressed="false">Plain WebSocket</button>
      </div>
      <p class="hint" id="modeHint">
        EventSource: the browser owns reconnecting and remembers where it left off.
      </p>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="startBtn">Start stream</button>
        <button class="btn bad" id="dropBtn" disabled>💥 Simulate network drop</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="sse">Worked example: EventSource recovering</button>
        <button class="btn sm" data-preset="ws">Worked example: WebSocket left for dead</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What the connection is doing</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Idle — pick a mode and start the stream.</span>
      </div>
      <div class="badges">
        <span class="pill" id="lastIdPill">last-event-id: —</span>
        <span class="pill" id="reconnectPill">reconnect attempts: 0</span>
      </div>
      <p class="hint" id="resultHint">Nothing has happened yet.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Live event log</div>
      <div class="log" id="log"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.