怎么使用HTML5中SharedWorker实现多个标签页共用同一个长连接-H5教程-PHP中文网

sharedworker 是 html5 提供的可跨同源标签页、iframe 共享后台线程与状态的 web worker，适用于复用 websocket 等长连接以避免重复建连和状态不一致。

怎么使用html5中sharedworker实现多个标签页共用同一个长连接

SharedWorker 是 HTML5 提供的一种 Web Worker 类型，它允许**不同浏览器标签页、iframe 甚至不同窗口（同源）共享同一个后台线程和状态**，非常适合实现跨标签页的长连接（如 WebSocket 或 Server-Sent Events）复用，避免重复建连、资源浪费和状态不一致问题。

一、SharedWorker 基础：创建与连接

SharedWorker 需要单独的 JS 文件作为入口，并通过 new SharedWorker() 在页面中连接。关键点是：所有同源页面连接的是同一个 SharedWorker 实例（由脚本 URL 和 name 决定）。

示例：

// shared-worker.js
const socket = new WebSocket('wss://example.com/realtime');

// 缓存所有端口（即来自各标签页的 MessagePort）
const ports = new Set();

self.onconnect = function(e) {
  const port = e.ports[0];
  ports.add(port);
  
  port.onmessage = function(msg) {
    // 处理来自页面的指令，如发送消息、关闭连接等
    if (msg.data.type === 'send') {
      socket.send(JSON.stringify(msg.data.payload));
    }
  };

  port.start(); // 必须调用 start() 才能收发消息
};

socket.onopen = () => {
  ports.forEach(p => p.postMessage({ type: 'connected' }));
};

socket.onmessage = function(e) {
  // 广播给所有连接的页面
  ports.forEach(p => p.postMessage({ type: 'message', data: e.data }));
};

socket.onclose = () => {
  ports.forEach(p => p.postMessage({ type: 'disconnected' }));
};

二、页面中连接 SharedWorker 并通信

每个标签页只需创建一次 SharedWorker 实例，调用 port.postMessage() 发送消息，监听 port.onmessage 接收广播。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

注意：必须显式调用 port.start()（若未设 name 属性）；使用 port.close() 不会终止 SharedWorker，仅断开当前页面连接。

示例：

// main.js（在每个页面中运行）
let worker;
let port;

function initWorker() {
  try {
    worker = new SharedWorker('shared-worker.js', 'realtime-worker');
    port = worker.port;
    
    port.onmessage = function(e) {
      if (e.data.type === 'connected') {
        console.log('已连接到共享长连接');
      } else if (e.data.type === 'message') {
        console.log('收到广播:', e.data.data);
      }
    };
    
    port.start(); // 启动端口通信
    
  } catch (err) {
    console.error('SharedWorker 初始化失败:', err);
  }
}

// 向后端发送消息（经由 SharedWorker）
function sendMessage(payload) {
  if (port && port.readyState === 'open') {
    port.postMessage({ type: 'send', payload });
  }
}

三、关键注意事项与常见陷阱

同源限制严格：SharedWorker 只能在完全同源（协议 + 域名 + 端口）的页面间共享；localhost:3000 和 localhost:3001 视为不同源。
SharedWorker 不继承页面上下文：无法访问 window、document、localStorage（但可调用 self.localStorage —— 实际是页面的 localStorage，需注意竞态）。
生命周期独立：SharedWorker 在最后一个端口关闭后不会立即销毁，浏览器可能缓存数秒至数分钟；不要依赖 onclose 精确清理连接，建议服务端配合心跳或超时机制。
错误需自行捕获：WebSocket 错误、网络中断等不会自动通知页面，SharedWorker 内必须主动 postMessage 传递状态变更。
调试困难：Chrome DevTools 的 Application → Shared Workers 面板可查看运行实例，但断点调试需在专用 SharedWorker 标签页中进行（地址形如 chrome-devtools://devtools/bundled/worker/worker.html?experiments=true&ws=...）。

四、替代方案对比（什么情况下不用 SharedWorker）

如果项目已用 localStorage + storage 事件 或 BroadcastChannel API 做简单状态同步，它们更轻量，但无法共享 WebSocket 实例；若需强一致性长连接复用，SharedWorker 仍是目前唯一标准方案。Service Worker 虽也可代理请求，但它面向网络层、不直接暴露 WebSocket，且不支持跨页面共享内存状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！