如何在HTML5中使用JavaScript共享的网络工人

我们最近讨论了JavaScript网络工作者 参考“专用”品种。如果您还没有阅读，我建议您首先这样做 - 本文以相同的概念为基础。 简而言之的网络工人

Web Worker是在单独线程上加载并执行的单个JavaScript文件。专门的网络工作者链接到他们的创建者（加载工人的脚本）。共享的网络工作人员允许任意数量的脚本与单个工人进行通信。 共享的Web工作人员遵守与专用对应物相同的规则：没有DOM，文档或页面脚本访问，并且对大多数窗口属性的读取权限有限。此外，页面脚本只能与来自相同原点/域（somesite.com）的共享网络工作者进行通信。 目前，Chrome，Safari和Opera都支持共享的网络工人。 Firefox 4和IE9支持可能会到来，但不要押注。共享工人可以节省资源，但增加了额外的复杂程度。期待一些问题，例如

> dom2 Events（AddeventListener）处理程序似乎是最可靠的实现。
• >
>您几乎可以肯定会遇到特定于浏览器的怪癖，并且调试很困难。以下代码在最新版本的Chrome中起作用，但不要以为它可以在Safari或Opera中起作用。
• >

创建共享的Web Worker

要创建共享的Web Worker，请将JavaScript文件名传递给共享工作者对象的新实例：

var worker = new SharedWorker("jsworker.js");

>与共享的Web Worker进行沟通

您的任何页面脚本都可以与共享的Web Worker通信。与专用的网络工作者不同，您必须通过“端口”对象进行通信并附加消息事件处理程序。此外，您必须调用端口的开始（） 使用第一个postmessage（）之前的方法： pagescript.js：

当Web Worker脚本从脚本接收第一条消息时，它必须将事件处理程序附加到活动端口。在大多数情况下，处理程序将运行自己的Postmessage（）方法，以将消息返回到调用代码。最后，还必须执行端口的启动（）方法以启用消息传递： jsworker.js：

var worker = new SharedWorker("jsworker.js");

worker.port.addEventListener("message", function(e) {
	alert(e.data);
}, false);

worker.port.start();

// post a message to the shared web worker
worker.port.postMessage("Alyssa");

像他们专门的兄弟姐妹一样，共享的网络工人可以：

var connections = 0; // count active connections

self.addEventListener("connect", function (e) {

	var port = e.ports[0];
	connections++;

	port.addEventListener("message", function (e) {
		port.postMessage("Hello " + e.data + " (port #" + connections + ")");
	}, false);

	port.start();

}, false);

>用importscripts（）
• 加载更多脚本
附加错误处理程序，
>运行port.close（）方法，以防止在特定端口上进行进一步的通信。>

共享的网络工人可能会在几年内成为一项可行的技术，但他们为JavaScript开发的未来带来了令人兴奋的机会。希望浏览器供应商可以提供一些不错的跟踪和调试工具！

>关于JavaScript共享网络工作者的常见问题（常见问题解答）

>在JavaScript中，共享工人和网络工人之间的主要区别是什么？ Web工作人员仅限于创建其创建标签的范围。它无法与其他标签或窗口通信。另一方面，可以从多个脚本访问共享工人，即使是在不同的选项卡，窗口或iframe上运行的工人，只要它们在同一域中。这使得共享工人非常适合需要在不同的浏览器上下文之间进行数据共享和通信的任务。

如何在JavaScript中创建共享工作者？

>在JavaScript中创建一个共享的工人涉及实例化共享工作人员对象。这是一个简单的示例：

var mysharedworker = new sharedWorker（'worker.js'）;
在此示例中，'worker.js'是共享工作者将执行的脚本。重要的是要注意，由于相同的原始策略限制，该脚本必须与创建共享工人的脚本在同一域上。
>
我如何使用共享工作者进行通信？后邮政方法用于将消息发送给共享工作者，而onMessage事件处理程序则用于从中接收消息。以下是一个示例：

//向共享的worker

mysharedworker.port.postmessage发送消息（'Hello，worker！'）;

//从共享的工人
mysharedworker.porter.porter.port.port.onmessage.onmessage.onmessage = function（E）{e） e.data）;
};

>共享工人可以在不同的浏览器选项卡之间共享数据吗？

是的，共享工人的关键特征之一是他们在不同的浏览器选项卡，Windows，Windows或IFRAMES之间共享数据的能力。这是可能的，因为来自同一域中的所有脚本都可以访问相同的共享工作者实例。这使得共享工人非常适合需要在多个标签或窗口上进行实时更新的任务，例如协作编辑应用程序或多名tab游戏。

>是所有浏览器中支持的共享工人？但是，Internet Explorer不支持它们。在网站上查看最新的浏览器兼容性信息总是一个好主意，例如我可以使用或MDN Web Docs。

>如何处理共享工人中的错误？

>共享工人具有“ OnError”事件处理程序，可用于捕获和处理执行过程中发生的任何错误。以下是一个示例：

mySharedworker.onerror = function（e）{
console.log（'发生错误：'e.message）;
};

};

共享工人可以做出AJAX请求吗？他们可以访问XMLHTTPREQUEST对象，该对象可用于向服务器发出异步请求。这允许共享的工人从服务器获取数据而无需阻止主线程，改善您的Web应用程序的性能。

可以共享的工人使用Websockets吗？ 可以共享的工人访问DOM？

不，共享的工人无法直接访问DOM。这是因为它们在单独的线程中运行，并且无法访问与主线程相同的范围。但是，他们可以将消息发送到主线程，然后可以基于这些消息来更新DOM。

如何终止共享的工作者？
>可以通过在共享工作人员对象上调用“终止”方法来终止共享工人。但是，重要的是要注意，这将立即终止共享工人，无论它是否完成了当前的任务。以下是一个示例：

mySharedworker.terminate（）;

这将立即终止共享工人。通常，如果不再需要或引起绩效问题，则仅终止共享工人是一个好主意。>

以上是如何在HTML5中使用JavaScript共享的网络工人的详细内容。更多信息请关注PHP中文网其他相关文章！