SharedWorker - 表示可以从多个浏览上下文访问的工作线程

SharedWorker 接口代表一种特定类型的工作线程，可以从多个浏览上下文（例如，多个窗口，iframe，甚至工作线程）访问的工作线程。它们实现的接口不同于专用工作线程，并且具有不同的全局范围 SharedWorkerGlobalScope。

注意： 如果可以从多个浏览上下文访问 SharedWorker，则所有这些浏览上下文必须共享完全相同的来源（相同的协议，主机和端口）。

构造函数

SharedWorker()

创建一个共享的 Web 工作线程，该工作线程以指定的 URL 执行脚本。

属性

从其父接口 EventTarget 继承了属性，并实现了 AbstractWorker 的属性。

AbstractWorker.onerror

一个 EventListener，每当错误类型为 error 的 ErrorEvent 冒泡经过工作线程时，就会调用该方法。

SharedWorker.port 只读

返回一个 MessagePort 对象，该对象用于与共享工作线程通信并控制共享工作线程。

方法

从其父接口 EventTarget 继承了属性，并实现了 AbstractWorker 的属性。

实例

在我们的基本共享工作线程实例（运行共享工作实例），我们有两个 HTML 页面，每个页面都使用一些 JavaScript 进行简单的计算。不同的脚本使用相同的工作文件来执行计算 - 即使它们的页面在不同的窗口中运行，它们也可以访问该文件。

以下代码段显示了使用 SharedWorker() 构造函数创建 SharedWorker 对象的过程。这两个脚本都包含以下内容：

var myWorker = new SharedWorker('worker.js');

然后，两个脚本都通过使用 SharedWorker.port 属性创建的 MessagePort 对象访问工作程序。如果 onmessage 事件是使用 addEventListener 添加的，则端口将使用其 start() 方法手动启动：

myWorker.port.start();

当端口启动时，两个脚本都将消息发布到工作线程，并分别使用 port.postMessage() 和 port.onmessage 处理从其发送的消息：

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('消息发布给工作线程');
}

second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('消息发布给工作线程');
}

myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('Message received from worker收到工人的消息

');
}

在工作线程内部，我们使用 SharedWorkerGlobalScope.onconnect 处理线程连接到上面讨论的相同端口。可在 connect 事件的 ports 属性中访问与该工作线程相关的端口，然后我们使用 MessagePort start() 方法启动端口，以及使用 onmessage 处理程序来处理从主线程发送的消息。

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var workerResult = '结果：' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });

  port.start(); // 使用 addEventListener 时必需。否则由 onmessage setter 隐式调用。
}

规范

规范	状态	备注
HTML Living Standard SharedWorker 的定义	现行的标准	与 Unknown 相同。

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Worker
• 使用网络工作线程