如何用消息广播机制让 Shared Worker 通知所有连接的页面-js教程-PHP中文网

shared worker 可通过保存并遍历 messageport 实现广播：onconnect 时存端口到 clients 数组，广播时检查 port.readystate === 'open' 后 postmessage；页面端创建 sharedworker 并通过 port.postmessage({type: 'broadcast'}) 触发，支持 topic 分类分发。

如何用消息广播机制让 shared worker 通知所有连接的页面

Shared Worker 本身不自带“广播”功能，但可以通过在 Worker 脚本中主动遍历所有已连接的 MessagePort 实例，逐个调用 port.postMessage()，实现向所有页面发送相同消息的效果。这是最常用、最可控的广播方式。

核心逻辑：收集端口 + 遍历发送

Worker 线程需在 onconnect 事件中保存每个页面传来的通信端口，并在需要广播时统一推送：

每次有新页面连接，e.ports[0] 就是一个专属端口，把它存进数组（如 clients = []）
发送广播前，确保每个端口都已调用过 port.start()（使用 port.onmessage 可自动触发）
遍历 clients 数组，对每个端口执行 port.postMessage(data)
注意：若某页面已关闭但端口未及时清理，port.postMessage() 不会报错，但消息无法送达；可结合 port.onclose 或定期检查 port.readyState === 'open' 做清理

Worker 脚本示例（shared-worker.js）

以下代码实现基础广播能力：

const clients = [];

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

  port.onmessage = function(event) {
    const data = event.data;

    // 收到页面发来的指令，例如 { type: 'broadcast', payload: 'hello' }
    if (data.type === 'broadcast') {
      // 向所有当前活跃页面广播
      clients.forEach(p => {
        if (p.readyState === 'open') {
          p.postMessage({ from: 'shared-worker', ...data.payload });
        }
      });
    }
  };

  port.start();
};

页面端如何触发与接收

每个页面只需创建 SharedWorker 实例，通过其 port 发送广播指令、监听返回消息：

创建连接：const worker = new SharedWorker('shared-worker.js');
监听广播消息：worker.port.onmessage = e => console.log('收到广播:', e.data);
发起广播：worker.port.postMessage({ type: 'broadcast', payload: { msg: '系统维护中' } });
务必调用 worker.port.start()（如果用 onmessage 则自动生效）