SharedWorker

2025年01月19日

柏拉文

越努力，越幸运

一、认识

---

SharedWorker 可以在多个标签页之间共享一个 Worker，通过 port 对象通信。

SharedWorker 提供了一种更传统的跨文档通信机制，在不同文档间共享状态和数据。 你需要创建一个 SharedWorker 对象，并在所有的文档里监听来自该 worker 的消息。

二、实现

---

2.1 发布消息

创建 SharedWorker

self.onconnect = (event) => {
    const port = event.ports[0];
    port.onmessage = (event) => {
        const message = event.data;
        port.postMessage(`Echo: ${message}`);
    };
};

引入 ServiceWorker

const worker = new SharedWorker('shared-worker.js');

// 接收消息
worker.port.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello, Tabs!');
worker.port.start();

发布消息

const worker = new SharedWorker('shared-worker.js');

// 接收消息
worker.port.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello, Tabs!');
worker.port.start();

2.2 接收消息

创建 SharedWorker

self.onconnect = (event) => {
    const port = event.ports[0];
    port.onmessage = (event) => {
        const message = event.data;
        port.postMessage(`Echo: ${message}`);
    };
};

引入 ServiceWorker

const worker = new SharedWorker('shared-worker.js');

// 接收消息
worker.port.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello, Tabs!');
worker.port.start();

发布消息

const worker = new SharedWorker('shared-worker.js');

// 接收消息
worker.port.onmessage = (event) => {
    console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello, Tabs!');
worker.port.start();