JavaScript Web Worker 怎么使用 SharedWorker-js教程-PHP中文网

使用 sharedworker 需要在主线程通过构造函数实例化，并监听 onconnect 事件以获取端口连接。在 worker 端，必须定义全局的 onconnect 处理器来接收来自不同页面的连接请求，并通过 port.start() 激活端口通信。这种方式允许一个 sharedworker 实例被多个同源标签页共享，实现跨页面状态同步或资源复用。

JavaScript Web Worker 怎么使用 SharedWorker

SharedWorker 与普通 Worker 的核心区别是什么

核心区别在于作用域和生命周期管理。普通 Worker 是专属于创建它的脚本的，一旦该脚本关闭或页面刷新，Worker 通常随之销毁（除非使用特定的持久化策略）。而 SharedWorker 是一个独立的全局单例，只要有一个同源页面持有其引用，它就会一直运行。这意味着多个页面可以连接到同一个 SharedWorker 实例，共享内存状态或后台任务结果。

JavaScript Web Worker 怎么使用 SharedWorker

// main.js (Page A)
const sw = new SharedWorker('worker.js');
sw.port.onmessage = (e) => console.log('From Worker:', e.data);
sw.port.start();

// worker.js
self.onconnect = function(e) {
  const port = e.ports[0];
  port.onmessage = function(e) {
    // 处理来自任意页面的消息
    port.postMessage('Hello from SharedWorker');
  };
  port.start();
};

如何处理多页面并发连接的消息路由

当多个页面同时连接时，每个连接都会获得一个独立的 MessagePort 对象。开发者需要在 Worker 内部维护这些端口的集合，或者根据业务逻辑将消息分发给特定的端口。关键在于，每个 port 都是独立的通信通道，互不干扰，但共享同一个 Worker 的执行上下文和全局变量。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

JavaScript Web Worker 怎么使用 SharedWorker

// worker.js (Advanced Routing)
const ports = new Set();

self.onconnect = function(e) {
  const port = e.ports[0];
  ports.add(port);
  
  port.onmessage = function(e) {
    if (e.data.type === 'broadcast') {
      // 广播给所有连接的页面
      ports.forEach(p => p.postMessage({ type: 'update', content: e.data.payload }));
    } else if (e.data.type === 'direct') {
      // 仅回复当前发送者
      port.postMessage({ type: 'reply', content: 'Received' });
    }
  };
  
  port.onclose = function() {
    ports.delete(port);
  };
  
  port.start();
};