Come creare un thread Web Worker in JavaScript…

Creare un thread Web Worker in JavaScript può essere fatto usando il costruttore Worker.

// Creiamo un nuovo Web Worker, passando il percorso al file JS,
// che verrà eseguito in un thread separato.
const worker = new Worker('worker.js');

Nel file worker.js (o in qualsiasi altro specificato durante la creazione del worker) verrà eseguito il codice in un thread separato.

// worker.js

// Gestione dei messaggi inviati dal thread principale
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Messaggio ricevuto dal thread principale:', receivedData);

  // Inviare un messaggio di risposta al thread principale
  const responseData = { message: 'Ciao da Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Opzionalmente, si può aggiungere la gestione degli errori
self.onerror = function(error) {
  console.error('Errore nel Worker:', error);
};

Nel thread principale (dove è stato creato il worker), si può interagire con il worker:

// main.js

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

// Inviare un messaggio al Web Worker
worker.postMessage({ command: 'start', payload: 'some data' });

// Gestire i messaggi ricevuti dal Web Worker
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Messaggio ricevuto da Worker:', receivedData);
};

// Gestire gli errori nel Web Worker
worker.onerror = function(error) {
  console.error('Errore nel Worker nel thread principale:', error);
};

// Terminare il Web Worker (opzionale)
// worker.terminate();

Punti chiave:

Comunicazione: Lo scambio di dati tra thread principale e worker avviene tramite messaggi usando i metodi postMessage() e il gestore onmessage.
Limitazioni: I worker non hanno accesso al DOM, all’oggetto window, né ad altri oggetti globali del browser. Hanno accesso limitato a navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets e altri.
Isolamento: Il codice nel worker viene eseguito in un thread separato, prevenendo blocchi nel thread principale e migliorando le prestazioni, specialmente durante calcoli intensivi in risorse.

Come creare un thread Web Worker in JavaScript?