Angular 2网络工作者

Question

我能找到关于角度2的webworkers的所有文章和指南都集中在使整个应用程序在weborker中运行.是否可以利用网络工作者创建一个服务？

按照网络工作者的经典例子,有人可以告诉我如何使用网络工作者创建一个计算数字因子的服务吗？

Answer 1

新版本

基于您可以在此处找到的解决方案，我构建了一个简单的类，它使用 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. 网络工作者示例.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 上发布了一个示例。所有必需的逻辑都在以下两个文件中。

斐波那契-worker.service.ts

工人.ts

查看app.component.ts的调用方法。

问候。