SharedWorker 多页面相互通信示例详解

让我来详细讲解一下“SharedWorker 多页面相互通信示例详解”。

什么是 SharedWorker

SharedWorker 是一个 JavaScript API，其允许运行在同一源下的多个脚本访问共享的 Worker（线程）实例。

sharedWorker 通过名称创建，也就是说，一个相同名称的 sharedWorker 可以被多个页面/脚本访问，从而实现多页面相互通信。

示例 1：基本使用

示例代码如下：

// main.js
const sharedWorker = new SharedWorker("my-worker.js");
sharedWorker.port.addEventListener("message", function(event) {
  console.log(`Received message: ${event.data}`);
});
sharedWorker.port.start();
sharedWorker.port.postMessage("Hello, from main.js");

// my-worker.js
let counter = 0;
onconnect = function(event) {
  const port = event.ports[0];
  port.addEventListener("message", function(event) {
      console.log(`Received message: ${event.data}`);
      port.postMessage(`Response ${counter++}`);
  });
  port.start();
};

这段代码中，我们首先新建了一个 sharedWorker，并通过 .addEventListener 监听消息的到来。

在 my-worker.js 中，我们定义了一个 onconnect 事件处理器，当连接被建立时会触发这个事件。在事件处理函数中，我们设置了一个 .addEventListener 监听消息的到来，并通过 port.postMessage 发送一个消息给主页。

当主页收到消息后，会执行监听消息的回调函数，将接收到的消息打印在控制台中。

示例 2：多事件监听

示例代码如下：

// pageA.js
const sharedWorker = new SharedWorker("my-worker.js");
sharedWorker.port.addEventListener("message1", function(event) {
  console.log(`Received message1 in pageA.js: ${event.data}`);
});
sharedWorker.port.addEventListener("message2", function(event) {
  console.log(`Received message2 in pageA.js: ${event.data}`);
});
sharedWorker.port.start();
sharedWorker.port.postMessage("Hello, from pageA.js");

// pageB.js
const sharedWorker = new SharedWorker("my-worker.js");
sharedWorker.port.addEventListener("message1", function(event) {
  console.log(`Received message1 in pageB.js: ${event.data}`);
});
sharedWorker.port.addEventListener("message2", function(event) {
  console.log(`Received message2 in pageB.js: ${event.data}`);
});
sharedWorker.port.start();
sharedWorker.port.postMessage("Hello, from pageB.js");

// my-worker.js
let counter = 0;
onconnect = function(event) {
  const port = event.ports[0];
  port.addEventListener("message", function(event) {
      console.log(`Received message in my-worker.js: ${event.data}`);
      port.dispatchEvent(new MessageEvent("message1", {data: `Response1 ${counter++}`}));
      port.dispatchEvent(new MessageEvent("message2", {data: `Response2 ${counter++}`}));
  });
  port.start();
};

这几段代码中，我们创建了两个包含 sharedWorker 的页面（pageA 和 pageB），以及一个处理服务的线程 my-worker.js。

在这个示例中，我们创建了两个不同的事件监听器。每个监听器都会监听一个特定的事件（message1 或 message2）并执行回调函数。在服务线程中，我们可以使用 port.dispatchEvent 方法来触发这些事件。

当页面 A 和 B 向 my-worker.js 发送消息时，my-worker.js 会触发 message1 和 message2 事件。这些事件分别被 pageA 和 pageB 监听，回调函数会分别打印出不同的内容。

通过这两个示例，我们可以看出，SharedWorker 可以很方便地实现多个页面/脚本之间的通信。除此之外，SharedWorker 还可以实现数据共享和并发运算等功能。在实际开发中，我们可以根据实际需求，通过 SharedWorker 来解决各种问题。