Chapter 50: Web Workers & Multi-Threaded JavaScript

Shared Workers & Multi-Tab Synchronization

Coordinating state across multiple browser tabs, windows, and iframes using `SharedWorker`, `SharedWorkerGlobalScope`, and the `MessagePort` protocol.

LEARNING OBJECTIVES ⌵

Understand the architectural difference between Dedicated Workers (1:1 per tab) and Shared Workers (N:1 multi-tab).
Instantiate shared workers with new SharedWorker(scriptURL, name).
Handle client connections inside SharedWorkerGlobalScope using the onconnect event and MessagePort array.
Master explicit port.start() vs. implicit port.onmessage event listener activation.
Implement a multi-tab broadcast bus and single-connection WebSocket proxy.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine an apartment building where ten different tenants (ten open browser tabs) all want access to the current daily news bulletin.

                  APPROACH 1: DEDICATED WORKERS (10 PRIVATE COURIERS)
  Tab 1 =======> [ Private Dedicated Worker 1 ] (10 separate OS threads!)
  Tab 2 =======> [ Private Dedicated Worker 2 ] (10 separate WebSocket connections!)
  Tab 3 =======> [ Private Dedicated Worker 3 ] (Zero cross-tab communication)

                  APPROACH 2: SHARED WORKER (1 CENTRAL BUILDING CONCIERGE)
  Tab 1 (Lobby)   =====\
  Tab 2 (Kitchen) ======> [ MessagePort Connections ] ===> [ 1 Shared Worker Concierge ]
  Tab 3 (Balcony) =====/                                   (Single shared OS thread)
                                                           (Single shared WebSocket)
                                                           (Broadcasts to all tabs!)

Dedicated Workers: Every apartment tenant hires their own private butler. If 10 tabs are open, there are 10 separate worker threads, 10 separate WebSocket connections to the backend server, and no way for Tab 1 to know what Tab 2 is doing.
Shared Worker: The building employs one central concierge in the lobby.
- When Tab 1 opens, it connects a direct telephone wire (MessagePort) to the concierge.
- When Tab 2 opens, it connects its own telephone wire to the same concierge.
- The concierge maintains a single WebSocket connection to the cloud server and broadcasts real-time notifications to all connected telephone lines simultaneously.

If the user closes Tab 1, the concierge stays alive for Tab 2 and Tab 3. The Shared Worker is only destroyed when every connected tab is closed.

Technical Deep Dive & Specifications

Dedicated vs. Shared Workers: Architectural Comparison

Dimension	Dedicated Worker (`Worker`)	Shared Worker (`SharedWorker`)
Scope Object	`DedicatedWorkerGlobalScope`	`SharedWorkerGlobalScope`
Relationship	1-to-1: Bound to a single page	N-to-1: Shared across tabs, windows, iframes
Connection Protocol	Direct `worker.postMessage()`	Port-based `worker.port.postMessage()`
Lifecycle	Dies when the owner tab is closed	Persists until all connected tabs are closed
Global Connection Hook	Top-level script evaluation	`self.onconnect = (e) => { ... }`
Debugging	Chrome DevTools > Sources > Threads	`chrome://inspect/#workers`

+---------------------------------------------------------------------------------------------------+
|                                  SHARED WORKER ARCHITECTURE                                       |
+---------------------------------------------------------------------------------------------------+

   Browser Tab 1 (Origin A)       Browser Tab 2 (Origin A)       Browser Tab 3 (Origin A)
   +------------------------+     +------------------------+     +------------------------+
   | worker.port            |     | worker.port            |     | worker.port            |
   +------------------------+     +------------------------+     +------------------------+
               \                              |                              /
          MessagePort 1                  MessagePort 2                  MessagePort 3
                 \                            |                            /
                  v                           v                           v
   +------------------------------------------------------------------------------------------------+
   |                              SharedWorkerGlobalScope (Singleton)                               |
   |   self.onconnect = (e) => { const port = e.ports[0]; connections.push(port); };               |
   |                                                                                                |
   |   - Central Shared State Store                                                                 |
   |   - 1 Single WebSocket Connection to Backend Server                                            |
   |   - Multi-Tab Broadcast Dispatcher                                                             |
   +------------------------------------------------------------------------------------------------+

The `MessagePort` Connection Handshake

Unlike Dedicated Workers where communication is attached directly to the Worker instance, Shared Workers communicate through a MessagePort channel.

1. On the Main Thread (Tab):

// Instantiating the shared worker
const sharedWorker = new SharedWorker('./shared-hub.js', 'AppSharedHub');

// Option A: Explicit start (Required when using addEventListener)
sharedWorker.port.addEventListener('message', (event) => {
  console.log('Received from SharedWorker:', event.data);
});
sharedWorker.port.start(); // MUST call start()!

// Option B: Implicit start (Automatically starts port)
sharedWorker.port.onmessage = (event) => {
  console.log('Received:', event.data);
};

// Send message to shared worker
sharedWorker.port.postMessage({ action: 'SUBSCRIBE' });

2. Inside the Shared Worker (`shared-hub.js`):

// Set to hold all active tab ports
const ports = new Set();

self.onconnect = function(event) {
  // Extract the newly connected tab's port
  const port = event.ports[0];
  ports.add(port);

  port.onmessage = function(e) {
    const { action, payload } = e.data;

    if (action === 'BROADCAST_CHAT') {
      // Broadcast message to ALL connected tabs
      for (const p of ports) {
        p.postMessage({ type: 'NEW_CHAT', text: payload });
      }
    }
  };

  port.start(); // Start listening on this port
};

[!IMPORTANT] When using port.addEventListener('message', fn), you must call port.start(). If you use the property assignment port.onmessage = fn, the browser calls start() implicitly.

💻 Interactive Code Playground

Below is a complete, runnable Multi-Tab Synchronized Counter & Broadcast Hub. Open this page in two separate browser tabs or windows side-by-side to watch them update in real-time across tabs.

Starter Code

Line-by-Line Code Breakdown

Line 66 (const ports = new Set()): Inside the Shared Worker, a Set tracks every connected tab's MessagePort.
Line 74 (self.onconnect = function(event)): Triggers every time a new browser tab instantiates new SharedWorker().
Line 75 (const port = event.ports[0]): Retrieves the distinct communication port for the incoming tab.
Lines 86–98: When a tab posts { action: 'CHANGE_COUNTER' }, the shared worker updates sharedState.counter and calls broadcast(), sending the updated number to every open tab simultaneously.
Line 126 (worker.port.start()): Opens the bidirectional port channel on the client tab.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lesson 50.7: Shared Worker Multi-Tab Synchronization</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 760px;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #0f172a;
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .counter-display {
      font-size: 3rem;
      font-weight: 800;
      color: #2563eb;
      margin: 0.5rem 0;
    }
    button {
      padding: 0.6rem 1.2rem;
      font-weight: 600;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      margin-right: 0.5rem;
      background: #2563eb;
      color: white;
    }
    button:hover { background: #1d4ed8; }
    .btn-danger { background: #dc2626; }
    .btn-danger:hover { background: #b91c1c; }
    .log-box {
      background: #0f172a;
      color: #38bdf8;
      font-family: ui-monospace, monospace;
      padding: 1rem;
      border-radius: 6px;
      height: 150px;
      overflow-y: auto;
      font-size: 0.85rem;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <h1>🌐 Multi-Tab Shared Worker Synchronizer</h1>
  <p><strong>Instructions:</strong> Open this same HTML file in <em>two separate browser tabs</em>. Increment the counter in Tab 1 and watch Tab 2 sync instantly!</p>

<div class="panel">
    <div><strong>Connected Tabs Count:</strong> <span id="tab-count">1</span></div>
    <div>Shared Global Counter:</div>
    <div id="counter" class="counter-display">0</div>

<div>
      <button id="btn-inc">+ Increment Shared Counter</button>
      <button id="btn-dec">- Decrement Shared Counter</button>
      <button id="btn-reset" class="btn-danger">Reset to Zero</button>
    </div>

<h4>Cross-Tab Activity Log:</h4>
    <div id="log" class="log-box"></div>
  </div>

function log(msg) {
      const t = new Date().toISOString().substring(11, 19);
      logBox.innerHTML += `[${t}] ${msg}<br>`;
      logBox.scrollTop = logBox.scrollHeight;
    }

// --- 1. Inline Shared Worker Script ---
    const sharedWorkerScript = `
      let sharedState = {
        counter: 0,
        connectedTabs: 0
      };
      const ports = new Set();

function broadcast(message) {
        for (const port of ports) {
          port.postMessage(message);
        }
      }

self.onconnect = function(event) {
        const port = event.ports[0];
        ports.add(port);
        sharedState.connectedTabs = ports.size;

// Send current state to new connecting tab
        port.postMessage({
          type: 'INIT_STATE',
          state: sharedState
        });

// Broadcast updated tab count to all tabs
        broadcast({
          type: 'TAB_COUNT_UPDATED',
          connectedTabs: ports.size
        });

port.onmessage = function(e) {
          const { action, delta } = e.data;

if (action === 'CHANGE_COUNTER') {
            sharedState.counter += delta;
            broadcast({
              type: 'STATE_CHANGED',
              counter: sharedState.counter,
              originTabMsg: 'Counter modified by a connected tab'
            });
          } else if (action === 'RESET') {
            sharedState.counter = 0;
            broadcast({
              type: 'STATE_CHANGED',
              counter: 0,
              originTabMsg: 'Counter reset to 0'
            });
          }
        };

port.onclose = function() {
          ports.delete(port);
          broadcast({
            type: 'TAB_COUNT_UPDATED',
            connectedTabs: ports.size
          });
        };
      };
    `;

// --- 2. Instantiate Shared Worker via Blob URL ---
    const blob = new Blob([sharedWorkerScript], { type: 'application/javascript' });
    const sharedWorkerUrl = URL.createObjectURL(blob);
    const worker = new SharedWorker(sharedWorkerUrl, 'GlobalSyncHub');

// Start communication channel
    worker.port.start();

worker.port.onmessage = function(e) {
      const data = e.data;

if (data.type === 'INIT_STATE') {
        counterDisplay.textContent = data.state.counter;
        tabCountDisplay.textContent = data.state.connectedTabs;
        log(`Connected to SharedWorker. Current counter: ${data.state.counter}`);
      } else if (data.type === 'TAB_COUNT_UPDATED') {
        tabCountDisplay.textContent = data.connectedTabs;
        log(`Active tabs connected: ${data.connectedTabs}`);
      } else if (data.type === 'STATE_CHANGED') {
        counterDisplay.textContent = data.counter;
        log(`${data.originTabMsg} -> New Value: ${data.counter}`);
      }
    };

// --- 3. UI Controls ---
    document.getElementById('btn-inc').addEventListener('click', () => {
      worker.port.postMessage({ action: 'CHANGE_COUNTER', delta: 1 });
    });

document.getElementById('btn-dec').addEventListener('click', () => {
      worker.port.postMessage({ action: 'CHANGE_COUNTER', delta: -1 });
    });

document.getElementById('btn-reset').addEventListener('click', () => {
      worker.port.postMessage({ action: 'RESET' });
    });
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🌐 Multi-Tab Shared Worker Synchronizer
Instructions: Open this same HTML file in two separate browser tabs.

Connected Tabs Count: 2
Shared Global Counter:
[ 42 ]

[ Button: + Increment Shared Counter ] [ Button: - Decrement Shared Counter ] [ Button: Reset to Zero ]

Cross-Tab Activity Log:
[02:20:10] Connected to SharedWorker. Current counter: 0
[02:20:12] Active tabs connected: 2
[02:20:15] Counter modified by a connected tab -> New Value: 1
[02:20:16] Counter modified by a connected tab -> New Value: 2

🏋️ Hands-On Exercise

🎯 The Challenge: Multi-Tab Broadcast Chat Bridge

Instructions:

Build a Shared Worker that acts as a Local Cross-Tab Chat Room.
When a tab posts { action: 'SEND_CHAT', username: 'Alice', text: 'Hello World' }, the shared worker timestamps the message and broadcasts it to all connected ports.
Keep an in-memory history of the last 10 chat messages inside the Shared Worker. When a 3rd tab opens, send it the existing 10 messages immediately in INIT_CHAT.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Challenge 50.7 Solution: Shared Worker Chat Hub</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; }
    #messages-list { list-style: none; padding: 0; background: #f1f5f9; border-radius: 6px; padding: 1rem; min-height: 120px; }
    #messages-list li { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e2e8f0; }
    .author { font-weight: bold; color: #2563eb; }
    .time { font-size: 0.75rem; color: #64748b; margin-left: 0.5rem; }
    input[type="text"] { padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 4px; }
    button { padding: 0.5rem 1rem; background: #0284c7; color: white; border: none; border-radius: 4px; cursor: pointer; }
  </style>
</head>
<body>
  <h2>Multi-Tab Shared Chat Hub</h2>
  <label>Username: <input type="text" id="username" value="TabUser"></label>
  <br><br>
  <input type="text" id="chat-msg" placeholder="Type a message..." style="width: 70%;">
  <button id="btn-send">Send</button>

  <h3>Live Message Feed:</h3>
  <ul id="messages-list"></ul>

  <script>
    const chatWorkerScript = `
      const history = [];
      const ports = new Set();

      function broadcast(data) {
        for (const port of ports) {
          port.postMessage(data);
        }
      }

      self.onconnect = function(e) {
        const port = e.ports[0];
        ports.add(port);

        // Send existing history to newly opened tab
        port.postMessage({ type: 'HISTORY', history });

        port.onmessage = function(ev) {
          const { action, username, text } = ev.data;
          if (action === 'SEND_CHAT') {
            const chatEntry = {
              username,
              text,
              time: new Date().toLocaleTimeString()
            };
            history.push(chatEntry);
            if (history.length > 10) history.shift();

            broadcast({ type: 'NEW_CHAT', chat: chatEntry });
          }
        };
      };
    `;

    const blob = new Blob([chatWorkerScript], { type: 'application/javascript' });
    const sharedWorker = new SharedWorker(URL.createObjectURL(blob), 'ChatBridgeWorker');
    sharedWorker.port.start();

    const list = document.getElementById('messages-list');
    const msgInput = document.getElementById('chat-msg');
    const usernameInput = document.getElementById('username');

    function appendMessage(chat) {
      const li = document.createElement('li');
      li.innerHTML = `<span class="author">${chat.username}:</span> ${chat.text} <span class="time">${chat.time}</span>`;
      list.appendChild(li);
    }

    sharedWorker.port.onmessage = function(e) {
      if (e.data.type === 'HISTORY') {
        list.innerHTML = '';
        e.data.history.forEach(appendMessage);
      } else if (e.data.type === 'NEW_CHAT') {
        appendMessage(e.data.chat);
      }
    };

    document.getElementById('btn-send').addEventListener('click', () => {
      const text = msgInput.value.trim();
      if (!text) return;
      sharedWorker.port.postMessage({
        action: 'SEND_CHAT',
        username: usernameInput.value || 'Anonymous',
        text
      });
      msgInput.value = '';
    });
  </script>
</body>
</html>

Why this works:

All browser tabs connect to the single ChatBridgeWorker singleton.
When any tab posts a chat message, it is instantly pushed to the in-memory history and broadcast across every open tab's MessagePort.

⚠️ Common Pitfalls

Forgetting port.start(): If you use worker.port.addEventListener('message', handler) instead of worker.port.onmessage = handler, messages will be queued forever and never fire until worker.port.start() is called.
Different Script URLs Creating Separate Workers: new SharedWorker('a.js') and new SharedWorker('a.js?v=2') are treated as two distinct shared workers. The script URL and name must match exactly.
Debugging Shared Workers: Shared workers do not show up in the standard page DevTools console. In Google Chrome, navigate to chrome://inspect/#workers to open a dedicated DevTools window for shared workers.

💡 Pro Tips

Single WebSocket Multiplexer: In large SaaS applications (e.g., Slack, Figma, Trading dashboards), open one single WebSocket connection inside a Shared Worker. All 30 open tabs can multiplex their subscriptions through this single socket, reducing backend server connection overhead by over 90%.
Safari Compatibility Note: Shared Workers are supported in modern versions of Safari, Chrome, Edge, and Firefox. However, always feature-detect with if ('SharedWorker' in window) and provide a fallback to BroadcastChannel or localStorage events.

📌 Key Takeaways

SharedWorker creates a single singleton worker shared across multiple tabs and windows of the same origin.
Connections are handled via the onconnect event, which receives a MessagePort for each client tab.
Main threads access communication through worker.port.postMessage() and worker.port.onmessage.
If using addEventListener('message'), you must explicitly call port.start().
Shared workers are ideal for centralized WebSocket connections, multi-tab state sync, and cross-window coordination.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

How does a Shared Worker know that a new browser tab has connected to it?

Topic: HTML Fundamentals

? Question 2 / 3

Under what condition is a Shared Worker finally terminated by the browser?

Topic: HTML Fundamentals

? Question 3 / 3

Where can you inspect and debug running Shared Workers in Google Chrome?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

Dedicated vs. Shared Workers: Architectural Comparison

The MessagePort Connection Handshake

1. On the Main Thread (Tab):

2. Inside the Shared Worker (shared-hub.js):

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Multi-Tab Broadcast Chat Bridge

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

How does a Shared Worker know that a new browser tab has connected to it?

Under what condition is a Shared Worker finally terminated by the browser?

Where can you inspect and debug running Shared Workers in Google Chrome?

The `MessagePort` Connection Handshake

2. Inside the Shared Worker (`shared-hub.js`):