Multiprocessing

Multitasking/multiprocessing

Multiprocessing is een techniek waarbij een computer meerdere centrale verwerkingseenheden (CPU's) gebruikt om verschillende taken tegelijkertijd uit te voeren. Dit stelt het systeem in staat om processen of programma's parallel te draaien, wat de snelheid en efficiëntie van de computer verhoogt. Door taken te verdelen over verschillende processoren, kan elk proces sneller worden afgehandeld dan wanneer één enkele processor alle taken op zich zou nemen. Dit is vooral nuttig voor toepassingen die veel rekenkracht vereisen, zoals grafische programma's, videobewerking en grote databases.

Met crowl.workermanager.js simuleren we multiprocessing door het proces voor het inzetten van meerdere webworkers te vereenvoudigen. 

Web Workers bieden een krachtig voordeel voor webontwikkeling doordat ze multitasking mogelijk maken in browsers. Normaal gesproken draaien webpagina's op een enkele thread, wat betekent dat zware of langdurige taken de gebruikersinterface kunnen vertragen of zelfs bevriezen. Web Workers lossen dit probleem op door scripts in achtergrondthreads uit te voeren die onafhankelijk zijn van de hoofdthread waar de gebruikersinterface op draait.

Het grootste voordeel van Web Workers is dat ze zware berekeningen of gegevensverwerking kunnen uitvoeren zonder de prestaties van de pagina-interface te beïnvloeden, waardoor de gebruikerservaring soepel en responsief blijft. Dit maakt Web Workers ideaal voor taken zoals beeld- en videobewerking, het uitvoeren van complexe berekeningen, en het laden en verwerken van grote gegevenssets, allemaal terwijl de hoofdpagina snel en interactief blijft voor de gebruiker.

Initialisatie en voorbeeld 

// Gebruik van de klasse
const workerManager = new WorkerManager('path/to/your/worker.js');

// Starten, communiceren en stoppen van de worker
workerManager.start();
workerManager.postMessage({ type: 'doSomething', data: 'Hello Worker' });
workerManager.postBlob(new Blob(['data to process']));
workerManager.stop();
  • constructor(workerUrl): Initialiseert de WorkerManager met een URL naar het worker script.
  • postMessage(message): Verzendt een JSON-bericht naar de worker.
  • postBlob(blob): Verzendt een Blob-object naar de worker.
  • start(): Verzendt een startsignaal naar de worker.
  • stop(): Stopt de worker door deze te beëindigen.
  • handleMessage(event): Afhandeling van berichten van de worker. Het schakelt op het type bericht en voert de bijbehorende actie uit.
  • handleError(error): Afhandeling van fouten die zich voordoen binnen de worker.

Reacties van de worker afhandelen

const workerManager = new WorkerManager('path/to/your/worker.js');

// Registreren van een callback voor het 'result' berichttype
workerManager.on('result', data => {
    console.log('Received result:', data);
});

// Registreren van een callback voor 'error'
workerManager.on('error', error => {
    console.error('Received error:', error);
});

// Starten van de worker
workerManager.start();

// Andere acties...
workerManager.postMessage({ type: 'doSomething' });

In de context van een WebWorker kan je verschillende acties en berichten afhandelen, Een aantal berichten zijn standaard gedefinieerd.

  1. ready- Aangeeft dat de worker geladen en klaar is om taken te ontvangen.
  2. started- Geeft aan dat de worker een taak heeft gestart.
  3. stopped- Wordt verstuurd wanneer de worker succesvol is gestopt na een stopverzoek.
  4. complete- Geeft aan dat een taak volledig is afgerond.
  5. blobProcessed- Specifiek bericht dat wordt gestuurd wanneer een Blob-object verwerkt is.
  6. imageProcessed- Wordt gebruikt om te melden dat een afbeeldingsverwerkingstaak voltooid is.
  7. result- Verstuurt resultaten van de verwerking terug naar de hoofdthread.
  8. error- Stuurt foutmeldingen als er iets misgaat tijdens de verwerking.
  9. progress- Kan gebruikt worden om voortgangsupdates te sturen voor langdurige taken.
  10. log- Voor het doorsturen van logberichten vanuit de worker naar de hoofdthread.
  11. data- Algemeen berichttype voor het doorsturen van gegevens die niet onder een specifieker type vallen.
  12. configUpdated- Kan gebruikt worden om te melden dat een configuratie-update succesvol is toegepast binnen de worker.
// Aanname dat de WorkerManager klasse zoals hierboven gedefinieerd is al beschikbaar is

const workerManager = new WorkerManager('path/to/your/worker.js');

// Callback functie die geregistreerd wordt om 'blobProcessed' berichten af te handelen
workerManager.on('blobProcessed', (processedData) => {
    console.log('Received processed blob data:', processedData);
    // Verwerk de data verder of update de UI, etc.
    // Bijvoorbeeld, je zou de data kunnen omzetten naar een afbeelding en deze weergeven in de browser
    if (processedData instanceof Blob) {
        const url = URL.createObjectURL(processedData);
        console.log('URL of the processed blob:', url);
        // Je kunt de URL gebruiken om bijvoorbeeld een afbeeldingselement op je pagina bij te werken
        const img = document.createElement('img');
        img.src = url;
        document.body.appendChild(img);
    }
});

// Starten van de worker
workerManager.start();

// Veronderstelling dat je ergens een Blob verstuurt naar de worker om te verwerken
const exampleBlob = new Blob(['hello world'], { type: 'text/plain' });
workerManager.postBlob(exampleBlob);

// De worker zou de Blob verwerken en vervolgens een 'blobProcessed' bericht terugsturen

Uitleg van het bovenstaande codevoorbeeld:

  1. Registratie van de Callback: We beginnen door een callback functie te registreren voor het blobProcessed berichttype. Deze callback wordt aangeroepen zodra de worker een bericht van dit type verstuurt.
  2. Afhandeling binnen de Callback: Binnen de callback:
    • We loggen de ontvangen verwerkte data.
    • We gaan ervan uit dat de data een Blob is (afhankelijk van hoe je worker is ingesteld om de data te verzenden). Vervolgens creëren we een URL van deze Blob met behulp van URL.createObjectURL().
    • Deze URL kan worden gebruikt om een afbeeldingselement (img) te creëren en toe te voegen aan de DOM. Dit is een nuttige manier om afbeeldingen of andere binaire data direct in de browser weer te geven.

Dit is een gestructureerde manier om met binaire data zoals afbeeldingen of andere bestanden om te gaan, nadat deze door een WebWorker zijn verwerkt. Dit voorbeeld laat zien hoe je de flexibiliteit van WebWorkers kunt benutten voor zware berekeningen of data-manipulaties, terwijl je de UI thread vrijhoudt van belasting.

Volgende pagina