Question

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

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

Answer 1

新版本

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

你需要3个文件才能拥有一个正常工作者。

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

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

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;
        }
    }
}

网络工作者-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 以获取调用方法。

问候。

Angular 2网络工作者

1 个答案: