网络工作者不发布消息

Question

我无法让网络工作者发布消息（使用 Webpack）。

---

第一次尝试

我有一个 Rails 应用程序，其中包含 webworker 的入口点和主线程 Javascript 的入口点。

我在这里只使用本机 WebWorker api。创建了一个单独的文件，仅供 Webworker 使用。

webworker 代码被编译成它自己的文件。文件下载没有问题。网络标签显示它加载了 200。

worker = new Worker(workerUrl);
// url points to the worker's URL
// I get the URL with `asset_pack_url('worker.js')`
// resolves to something like http://localhost:5000/packs/worker-aaa739e5a169b00de74b.js
// I can navigate to this file and see it..

编译后的工作文件有一些 Webpacker 的东西，但主要部分看起来像这样...... 很简单

self.onmessage = function runParser(_e) {
  var x = 'a test value';
  self.postMessage(x); 
};

在主线程中..

worker = new Worker(workerUrl);

worker.postMessage('test');

worker.onmessage = () => {
  alert('contact made with the other side');
}

但是没有消息发送。警报永远不会触发。什么都没有发生。

---

第二次尝试

根据 Webpack 文档，不需要加载器..

https://webpack.js.org/guides/web-workers/#root

另外，我可以将它指向一个本地文件，而不是将 WebWorker 指向一个 URL。

new Worker(new URL('./worker.js', import.meta.url));

结果...

Security Error: Content at http://localhost:5000/@stoplion/ea-ut-eum-at may not load data from file:///Users/geo/Code/My Project/my-app/app/client/src/workers/worker.

Answer 1

你为工人使用什么 webpack 加载器？

试试npm i worker-loader

工作文件最好用worker后缀filename.worker.js命名

这样的规则

 rules: [
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: [
      /node_modules/,
      /\.worker\.js$/
    ]
  },
  {
    test: /\.worker\.js$/,
    use: { loader: 'worker-loader' }
  }
]

从其他 js 文件处理中排除工作人员

还添加错误处理程序，也许它会返回一些有用的东西

worker.onerror = e => {
  console.error(e);
}

而onmessage 看起来很奇怪，请尝试删除自身和函数名

onmessage = function (_e) {
  var x = 'a test value';
  postMessage(x); 
};