Angular 2网络 worker

Question

我能找到的关于 angular 2 中的 webworkers 的所有文章和指南都集中在使整个应用程序在 weborker 中运行。是否可以使用 webworkers 只创建一个服务？

以 webworkers 的经典示例为例，有人可以告诉我如何使用 webworkers 创建一个计算数字阶乘的服务吗？

Answer 1

新版本

基于您可以找到的解决方案 here ，我构建了一个简单的类，使用 WebWorker 来完成他的任务。

您需要 3 个文件才能拥有一个工作 Worker。

1. file-loader.d.ts - 需要加载 WebWorker 文件

   declare module "file-loader?name=[name].js!*" {
     const value: string;
     export = value;
   }
   

2. background-worker.ts - 在您的应用程序中可用的类

   import * as workerPath from "file-loader?name=[name].js!./web-worker-example";
   
   
   class BackgroundWorker {
   
       constructor() {
           let worker = new Worker(workerPath);
           worker.onmessage = this.handleMessage;
           worker.postMessage('Caller: Help Me for background Work');
   
           // Message content can contain only Javascript Objects
           //
           // For Documentation:
           // https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage
           //
       }
   
       private handleMessage( this: Worker, message: MessageEvent ) {
   
           console.log( message.data );
   
           switch( message.data ) {
           case 'Worker: Working':
               // ... Something To Do ...
               break;
           case 'Worker: Ok, I will Do It':
               // ... Something To Do ...
               break;
           case 'Worker: No, I can not':
               // ... Something To Do ...
               break;
           case 'Worker: Done':
               this.terminate();
               break;
           }
       }
   }
   

3. web-worker-example.ts

   // ****************************************************************** Worker Bridge
   // self is a keyword: Reference to this Worker 
   self.onmessage = bridge;
   
   function bridge( message: MessageEvent ) {
       HandleWork( message.data );
       CallBack('Done');
       // use:
       //       self.close();
       // if you need to terminate worker from Worker Environment.
   }
   
   function CallBack( message: string ) {
       self.postMessage('Worker: ' + message, undefined);
   }
   
   // ****************************************************************** Worker Body
   function HandleWork( workTask: string ) {
       if( workTask == 'Caller: Help Me for background Work' ) {
           CallBack('Ok, I will Do It');
   
           DoVeryComplexWork();
           return;
       }
   
       CallBack('No, I can not');
   }
   
   function DoVeryComplexWork() {
   
       // ... Something To Do ...
   
       // Example:
       for( let i: number = 0; i < 1000000000; i++ ) {
           if( i % 100000000 == 0 ) {
               CallBack('Working');
           }
       }
   }
   

要启动 Worker，只需实例化 worker new BackgroundWorker() 并查看控制台即可。

旧版本

我遇到了同样的问题，并通过构建一个扩展 WebWorker 类的服务解决了这个问题。在实践中，服务通过将两件事传递给 WebWorker 来工作，数据和详细说明数据的函数。

我在 GitHub 上发布了一个示例。所有必需的逻辑都在以下两个文件中。

fibonacci-worker.service.ts

worker.ts

查看 app.component.ts 以了解调用方法。

问候。