Worker 使用同步 XMLHttpRequest 从 GUI 获取数据

Question

我想要一个位于调用堆栈深处的Web Worker，以便能够发出同步请求以从 GUI 获取信息。

GUI 本身没有被阻止——它能够处理消息。但是worker栈上的JavaScript不是用async / await风格写的。它只是很多同步代码。因此，如果 GUI 尝试使用 postMessage 将响应发送回工作人员，那只会卡在 onmessage() 队列中。

我发现了至少一种适用于当今浏览器的 hack。 工作人员可以将消息发布到 GUI 以获取所需的信息 - 以及某种 ID（例如 UUID）。然后它可以向网络上具有该 ID 的某个服务器发出同步 XMLHttpRequest--which is not deprecated on workers--。

当工作人员等待该 http 请求时，GUI 会处理信息请求。完成后，它会执行 XMLHttpRequest 以 POST 到具有 ID 和数据的同一服务器。然后，服务器使用该信息来满足它对工作人员开放的阻塞请求。这满足了同步请求。

将 GUI 和 worker 之间的同步外包给服务器似乎有点愚蠢。但如果必须，我会这样做，因为它不适合强制工作代码以异步方式编写的用例。另外，我假设总有一天 浏览器将能够在本地进行这种同步。但看起来可以使用的一种机制——SharedArrayBuffer，暂时被禁用了。

大约在 2018 年底更新： SharedArrayBuffer 是 re-enabled in Chrome for desktop v67。 Android Chrome or other browsers yet 没有恢复，可能需要一段时间。

（更多奇怪的选项，如 compiling a JavaScript interpreter into the worker，因此 JS 堆栈可以随意暂停和重新启动 - 不仅因为大小和性能，还因为无法使用浏览器的开发者工具。）

所以...

• 有什么方法可以让同步 XMLHttpRequest 被愚弄，从浏览器本身发出请求（可能是通过自定义链接方案？）如果 GUI 线程可以直接回答 XMLHttpRequest 会切断退出中间人。

• 是否可以通过某种插件提供相同的功能？我在想也许同步可以作为一种抽象来完成。如果有人没有插件，它会退回到使用网络作为同步代理。 （大概如果他们重新启用 SharedArrayBuffer，它就可以使用它。）

我也想知道是否有某种股票 JS-ready 服务已经实现了回显服务器的协议......如果有人知道的话。看起来很容易写。

Answer 1

我看不出有办法做你想做的事。最初看起来很有希望的方法最终会遇到难题。

服务工作者和fetch

在评论中，您建议服务工作者作为可能的解决方案。我见过的服务工作者示例提到提供“对请求的自定义响应”。但是，所有示例都使用fetch 事件来提供自定义响应。 AFAIK，只有在您实际使用 fetch API 时才会产生它。 xhr 不会生成 fetch 事件。 （是的，我已经尝试过了，但它没有用。）你不能只在你的特定情况下使用fetch 而不是 xhr，因为 fetch 不会同步操作。 fetch 的规范提到了“同步标志”，但它是 not part of the API。

请注意，fetch API 和相关事件并非特定服务工作人员，因此您可以在普通工作人员或其他地方使用fetch，如果它解决了您的问题。您经常会看到 fetch 提到 Service Worker，因为 Service Worker 可用于无法使用常规 Worker 的场景，其中一些场景需要对 fetch 请求提供自定义响应。

伪造的 XMLHttpRequest

Marinos 在comment 中建议使用伪造的 XMLHttpRequest 对象。 在大多数情况下，这是可行的。像 Sinon 这样的测试框架提供了虚假的 XMLHttpRequest，允许测试代码完全控制被测代码获得的响应。但是，它不适用于您的用例场景。如果你的假 xhr 实现是作为一个 JavaScript 对象实现的，并且你尝试将它发送给 worker，worker 将获得它的完整克隆。在工作人员内部执行的对假 xhr 的操作不会在工作人员外部看到。在工作人员外部执行的对假 xhr 的操作不会在工作人员内部看到。

理论上可以通过让假 xhr 包含两个对象来解决克隆问题：一个用于执行请求的前端，一个用于建立假响应的后端。您可以将前端发送给工作人员，但前端和后端必须相互通信，这会让您回到您试图解决的通信问题。如果您可以让假 xhr 的两个部分以一种允许您伪造同步 xhr 请求的方式相互通信，那么出于同样的原因，您将能够在没有假xhr。

Answer 2

嗯...也许您可以像这样即时创建您的工人

function startNewWorker (code) {
  var blob = new Blob([code], {type: "application/javascript"});
  var worker = new Worker(URL.createObjectURL(blob));
}

然后，对于您需要的每个新的 http 请求，您启动它自己的工作器：

const w1 = startNewWorker(yourCodeThatDoesSomething);
w1.onmessage = function () { /* ... */};

const w2 = startNewWorker(yourCodeThatDoesSomething);
w2.onmessage = function () { /* ... */};

两者都是异步的，不会阻塞用户界面，它们都可以做自己的工作，并且每个人都有自己的监听器。

注意code是一个字符串，所以，如果你有一个函数，你可以使用.toString()与()连接，像这样：

function myWorkerContent () {
  // do something ....
}

const code = "(" + myWorkerContent.toString() + ")()";
// or, if you want to use templateLiterals
// const code = `(${myWorkerContent.toString()})()`;

这样，在运行你的worker时，它会立即在你的每个worker中创建并执行函数。