我正在尝试在我的 React 应用程序中实现 Web Workers,以在多个选项卡上共享单个 WebSockets 连接。我使用 worker-loader 依赖项在 Web Workers 中进行加载。
不幸的是,我什至无法让一个简单的专用网络 worker 工作。
应用程序.jsx:
import React, { Component } from 'react';
// eslint-disable-next-line
import myWorker from 'worker-loader!./worker.js';
class App extends Component {
constructor(props) {
super();
this.state = {};
}
componentWillMount() {
if(window.SharedWorker) {
console.log(myWorker);
myWorker.port.postMessage('Hello worker');
myWorker.port.onmessage = function(e) {
console.log('Message received from worker');
console.log(e.data);
}
}
worker.js:
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
port.postMessage(workerResult);
}
}
加载页面时出现以下 webpack 错误:
我不能使用 worker-loader 的配置样式用法,因为这需要对 webpack 配置进行一些更改。由于 create-react-app,无法编辑此配置。如果我弹出 create-react-app,我可以,但这确实有一些缺点。
为什么不起作用?有人有什么想法吗?
提前致谢
迈克
最佳答案
正如@KevBot 指出的那样,我必须创建一个新的 Worker 实例:
// eslint-disable-next-line
import Worker from 'worker-loader!./worker.js';
let myWorker = new Worker();
关于javascript - 如何在带有 worker-loader 的 create-react-app 中使用 Web Worker?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50778655/