Comment créer un thread Web Worker en JavaScript…

Créer un thread Web Worker en JavaScript peut se faire en utilisant le constructeur Worker.

// Créer un nouveau Web Worker, en passant le chemin vers le fichier JS,
// qui sera exécuté dans un thread séparé.
const worker = new Worker('worker.js');

Dans le fichier worker.js (ou tout autre fichier spécifié lors de la création du worker), le code sera exécuté dans un thread séparé.

// worker.js

// Traitement des messages envoyés depuis le thread principal
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Message reçu du thread principal:', receivedData);

  // Envoyer un message en retour au thread principal
  const responseData = { message: 'Bonjour de Worker!', data: receivedData };
  self.postMessage(responseData);
};

// Optionnellement, ajouter la gestion des erreurs
self.onerror = function(error) {
  console.error('Erreur dans Worker:', error);
};

Dans le thread principal (où le worker a été créé), on peut interagir avec le worker:

// main.js

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

// Envoyer un message au Web Worker
worker.postMessage({ command: 'start', payload: 'some data' });

// Gérer les messages reçus du Web Worker
worker.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Message reçu de Worker:', receivedData);
};

// Gérer les erreurs dans le Web Worker
worker.onerror = function(error) {
  console.error('Erreur Worker dans le thread principal:', error);
};

// Terminer le Web Worker (optionnel)
// worker.terminate();

Points clés:

Communication: L’échange de données entre le thread principal et le worker se fait via des messages en utilisant les méthodes postMessage() et le gestionnaire onmessage.
Restrictions: Les workers n’ont pas accès au DOM, à l’objet window, ni à d’autres objets globaux du navigateur. Ils ont un accès limité aux objets navigator, location, XMLHttpRequest, setTimeout, setInterval, fetch, WebSockets et autres.
Isolation: Le code dans le worker s’exécute dans un thread séparé, ce qui empêche le blocage du thread principal et améliore la performance, surtout lors de calculs intensifs en ressources.

Comment créer un thread Web Worker en JavaScript?