haochi / angular2-web-worker Goto Github PK

Hi @haochi ,

Thank-you for the component. I'm needing this in my project; and am gratefull that you have done this for the public.

I have a request, though. Could we have a public function that takes a promise and returns the corresponding worker?

Then I can play around with the worker directly with the onmessage, postMessage and addEventListener functions of the worker directly myself.

So - to do this - I see that you already have a promiseToWorkerMap privately declared in web-worker.ts
Also, there is private code that gets the worker from the promise.

So it should be possible to update the IWebWorkerService interface to include a

getWorker<T>(promise: Promise<T>): Worker

I be happy to do this - but I'm new to GitHub; So don't know how to do this on your public repository. But would prefer to have this as part of your package because if I have to make a local copy and do it myself; then no-one else gets to benefit.

So - Please let me know if you are still actively supporting this package, and if you consider this a change worth doing?

Sincere thanks & regards,
David Mawer :-)

I believe you're missing systemjs.config.js from the repo

someCPUHeavyFunction could be an asynchronous function such as httpclient or XMLHttpRequest to load big data file? if can, could you please give a demo? thanks

Angular cli has updated its dependencies to:

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

Peer dependencies are outdated

I think the package needs to be updated to support Angular 4.

The error I receive trying to use this package after upgrading my own project is

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in project_path/node_modules/angular2-web-worker/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in project_path/node_modules/angular2-web-worker/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in project_path/node_modules/angular2-web-worker/node_modules/@angular/core/src/di/opaque_token.d.ts

Would be nice to have the possibility to pass extra named functions or variables so we could use them inside the worker context, like we would import them locally.

Is there a way to modify the post message to include the list of transferable objects. I've changed the create Promise for worker function to specify the transferable object as such:

private createPromiseForWorker<T>(worker: Worker, data: any) {
    return new Promise<T>((resolve, reject) => {
        worker.addEventListener('message', (event) => resolve(event.data));
        worker.addEventListener('error', reject);
        worker.postMessage(data, [data]); //add transferable object
    });
}

However, this method produces a data clone error in the console.

I'm trying to send an array of images to my main thread, so any ideas on how to support this functionality would be great.

Thanks.

I am new to Web Workers, and have attempted to use this library on a project I'm working on, but it is not importing into the Component from node_modules via SystemJS. I am getting the following errors in my browser. I would greatly appreciate any help and happy to create a Pull Request to improve the Readme for other beginners like myself. Here is a branch of my project where I tried to implement it: Luke's project branch with attempt at using angular2-web-worker:

angular2-polyfills.js:127 GET http://localhost:8000/node_modules/angular2-web-worker/web-worker.service.ts 404 (Not Found)
Error: Error: XHR error (404 Not Found) loading http://localhost:8000/node_modules/angular2-web-worker/web-worker.service.ts

Good day haochi,

I installed your modules however I get the following errors

1. +-- UNMET PEER DEPENDENCY es6-shim@^0.33.3
2. +-- UNMET PEER DEPENDENCY [email protected]
3. +-- UNMET PEER DEPENDENCY [email protected]
4. `-- UNMET PEER DEPENDENCY [email protected]

This is a part of my package.json

"zone.js": "^0.6.23"
"rxjs": "5.0.0-beta.12",

Please can I still use the webworker as indicated in the API docs?? If not, how do I use your package??

Thank you

Hi. At startExternalRequest have an error GET http://localhost:4200/dist/app/echo.js 404 (Not Found).
I have resolve it by commenting the line. I don't know if it might t be an issue. This line is important?

`
startExternalRequest() {
const promises = [];
promises.push( this._webWorkerService.runUrl( "dist/app/echo.js", "marco" ) );
promises.push( this._webWorkerService.run( () => "polo", 0 ) );

      promises.forEach(promise => {
        let worker = this._webWorkerService.getWorker(promise);
        worker.addEventListener('message', event => {
            console.log('getWorker', event.data);
        });
    });

    Promise.all(promises)
        .then(response => console.log(response))
        .catch(error => console.error(error));
}

`

Hi,
I am getting the following error when using with Angular 6.

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AppComponent -> WebWorkerService]:
StaticInjectorError(Platform: core)[AppComponent -> WebWorkerService]:
NullInjectorError: No provider for WebWorkerService!
Error: StaticInjectorError(AppModule)[AppComponent -> WebWorkerService]:
StaticInjectorError(Platform: core)[AppComponent -> WebWorkerService]:
NullInjectorError: No provider for WebWorkerService!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveNgModuleDep (core.js:8369)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

Hi Haochi!

First of all, thank you for the library! It is really easy to use and it saves a lot of time.

In my project, we want to convert files to base64 strings. As these operations can be really heavy, I wanted to do the work in a webworker. The issue I've been dealing with is that the conversion to a string is asynchronous and your library doesn't let us do asynchronous work in the worker.

I implemented my own solution but I wonder if that wouldn't be useful for other people to have it included in your library?

Temporal solution

It consists in extending your service and overriding the createWorkerUrl method to pass postMessage as an argument :

import { WebWorkerService as service } from 'angular2-web-worker';

export class WebWorkerService extends service {

  // We override the method to enable postMessage to be called whenever we want
  // This allows us to asynchronously trigger postMessage
  private createWorkerUrl(resolve: Function): string {
    const resolveString = resolve.toString();
    // The change is here: postMessage is passed as argument
    const webWorkerTemplate = `
        self.addEventListener('message', function(e) {
            (${resolveString})(postMessage, e.data);
        });
    `;
    const blob = new Blob([webWorkerTemplate], { type: 'text/javascript' });
    return URL.createObjectURL(blob);
  }
}

Then I use it this way:

import { WebWorkerService } from 'app/services/webworker.service';

export class Example {

  // [...]

  // This method is called at some point
  async convertFile(file: File) {
    const base64 = await this.webWorkerService.run(this.workerFunction, file);
    console.log(base64);
  }

  workerFunction(postMessage: Function, file: File): void {
    const fileReader = new FileReader();

    fileReader.addEventListener('load', ({ target}: Event) => {
      postMessage((<FileReader>target).result);
    });

    fileReader.readAsDataURL(file);
  }

}

Thank you!