Hoe maak je een Web Worker-thread in JavaScript…

Het creëren van een Web Worker-thread in JavaScript kan gedaan worden met behulp van de Worker constructor.

// Maak een nieuwe Web Worker aan, door het pad naar het JS-bestand door te geven,
// dat in een aparte thread wordt uitgevoerd.
const worker = new Worker('worker.js');

In het bestand worker.js (of elk ander bestand dat bij het aanmaken van de worker wordt opgegeven) wordt de code in een aparte thread uitgevoerd.

// worker.js

// Verwerking van berichten die vanuit de hoofdthread worden verzonden
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Bericht ontvangen van de hoofdthread:', receivedData);

  // Bericht terugsturen naar de hoofdthread
  const responseData = { message: 'Hallo van Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Optioneel kan foutafhandeling worden toegevoegd
self.onerror = function(error) {
  console.error('Fout in Worker:', error);
};

In de hoofdthread (waar de worker is gemaakt), kan er mee worden gecommuniceerd:

// main.js

const worker = new Worker('worker.js'); 

// Bericht sturen naar Web Worker
worker.postMessage({ command: 'start', payload: 'some data' });

// Berichten ontvangen van Web Worker en verwerken
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Bericht ontvangen van Worker:', receivedData);
};

// Fouten in Web Worker afhandelen
worker.onerror = function(error) {
  console.error('Fout in Worker in hoofdthread:', error);
};

// Web Worker beëindigen (optioneel)
// worker.terminate();

Belangrijke punten:

Communicatie: Gegevensuitwisseling tussen hoofdthread en worker gebeurt via berichten met behulp van postMessage() en de onmessage handler.
Beperkingen: Workers hebben geen toegang tot DOM, window object en andere globale objecten van de browser. Ze hebben beperkte toegang tot navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets en andere.
Isolatie: De code in de worker wordt uitgevoerd in een aparte thread, wat blokkering van de hoofdthread voorkomt en de prestaties verbetert, vooral bij resource-intensieve berekeningen.

Hoe maak je een Web Worker-thread in JavaScript?