Question

我使用Angular CLI创建了角度应用。我想使用Web Worker来创建thread 我的想法是在后台thread中进行大量计算，并在完成后回复主thread。

我有worker.js

self.addEventListener('message', (evt) => {
  switch (evt.data.cmd) {
    case 'CALCULATE':{
      let payload = evt.data.payload;
      let response = calculateFunction(payload);    
      let response = {
        cmd: 'RESPONSE',
        payload: response 
      }
      postMessage(response);
      break;
    }
    default:
      throw Error(`Invalid command: ${evt.data.cmd}`);
    }
});

在组件中：

private worker: Worker;
constructor() {
    this.initWebWorker();
}

initWebWorker(){
 let url = '/dist/assets/workers/worker.js';
 this.worker = new Worker(url);
 this.worker.addEventListener('message', (evt)=>{
  switch (evt.data.cmd) {
    case 'RESPONSE':{
      let payload = evt.data.payload;
      console.log(payload)
      break;
    }
    default:
      throw Error(`Invalid command: ${evt.data.cmd}`);
   }
  });
 }

从组件

向Worker发送消息

this.worker.postMessage({cmd: 'CALCULATE', payload: payload});

这是按预期工作的。但我有几个问题

我已将worker.js放入assets文件夹，以便将其复制到ng build
worker.js JS文件不是TS。我希望我可以使用TS代替
要使用TS我可以在entry中添加webpack.config，它会为我生成bundle。但我不想eject webpack configuration项目

Angular CLI

我已经检查了this包但是我只能运行该函数是线程，我希望代码分离所有与worker file中的计算相关的函数

那么我怎样才能更好地使用Web worker Angular CLI project。我试图在此搜索相同但未找到的好文章。

参考：Angular CLI generated app with Web Workers

使用角度2的web worker

0 个答案: