SharedWorker — interactive playground

<div class="pg">
    <h1 class="pg-title">🧵 SharedWorker: one connection, many tabs</h1>
    <p class="pg-sub">
      Open two or three simulated tabs below. They all connect to the <strong>same</strong>
      worker instance — watch the live socket count stay at <code>1</code> no matter how
      many tabs are open, and see what happens when a tab disappears cleanly versus when it
      just vanishes.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Your tabs</div>
      <div class="tabrow" id="tabrow"></div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn ghost" id="reset">Reset everything</button>
      </div>
      <p class="hint">
        <strong>Close tab</strong> simulates a tab firing its <code>pagehide</code> message —
        the polite goodbye this post's code relies on. <strong>Kill tab</strong> simulates a
        crash or a forced close with no warning — the case <code>SharedWorker</code> has no
        built-in event for.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Inside the shared worker</div>
      <div class="worker-box">
        <div class="metric"><span>Real sockets opened</span><b id="socketCount">0</b></div>
        <div class="metric"><span>Socket status</span><b id="socketStatus">closed</b></div>
        <div class="metric"><span>Live ports</span><b id="portCount">0</b></div>
        <div class="metric"><span>Ghost ports</span><b id="ghostCount">0</b></div>
      </div>
      <div class="status" style="margin-top:12px">
        <span class="dot" id="dot"></span><span id="statusText">Open a tab to start.</span>
      </div>
      <div class="log" id="log" style="max-height:220px; overflow:auto; margin-top:10px"></div>
      <p class="hint" id="hint">
        The worker opens <strong>one</strong> real <code>WebSocket</code> the first time any
        tab connects, and reuses it for every tab after that — "Real sockets opened" should
        stay at <code>1</code> even with all three tabs open.
      </p>
    </div>
  </div>

preview

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