Angular 2 名网络工作者

Question

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

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

Answer 1

新版本

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

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

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

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

背景-worker.ts - class 在您的应用程序中可用

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

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 class 的服务解决了这个问题。在实践中，服务通过向 WebWorker 传递两件事来工作，数据和详细说明数据的函数。

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

fibonacci-worker.service.ts

worker.ts

看一下app.component.ts的调用方法。

此致。

Angular 2 名网络工作者

Angular 2 webworkers

web-worker

angular