Angular 2 webworkers

Question

Alle Artikel und Anleitungen, die ich über webworkers in angular 2 finden konnte, konzentrieren sich darauf, die gesamte Anwendung innerhalb des weborker laufen zu lassen. Ist es möglich, nur einen einzigen Service mit Webworkern zu erstellen?

Geht es nach dem klassischen Beispiel von Webworkern, könnte mir jemand zeigen, wie man einen Service erstellt, der das Factorial der Nummer mithilfe von Webworkern berechnet?

Answer 1

Neue Version

Auf der Basis der Lösung, die Sie here finden können, habe ich eine einfache Klasse bauen, die eine WebWorker nutzen, um seine Aufgaben zu erledigen.

Sie brauchen 3 Dateien, um einen funktionierenden Worker zu haben.

1. Datei-loader.d.ts - Notwendigkeit WebWorker Dateien

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

2. Hintergrund-worker.ts laden - Klasse avaliable in Ihrer Anwendung

   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-beispiel.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'); 
        } 
       } 
   } 
   

Arbeiter zu starten, instanziiert nur Arbeiter new BackgroundWorker() und einen Blick auf die Konsole nehmen.

alte Version

Ich hatte Ihr gleiches Problem und löste es durch einen Dienst aufzubauen, die eine Klasse von WebWorker erstreckt. In der Praxis funktioniert der Service, indem an den WebWorker zwei Dinge, Daten und eine Funktion übergeben werden, die die Daten ausarbeiten.

Ich postete ein Beispiel auf GitHub. Die gesamte erforderliche Logik befindet sich in den folgenden zwei Dateien.

fibonacci-worker.service.ts

worker.ts

Werfen Sie einen Blick auf app.component.ts für Call-Methoden.

Grüße.