Les Web Workers sont un outil puissant que JavaScript fournit pour gérer le multithreading dans les applications web. Un Web Worker est une sorte de JavaScript qui s’exécute en arrière-plan, indépendamment des autres scripts, sans affecter les performances de la page.
Voici un exemple simple de la façon d’utiliser les Web Workers:
1. Créer un Web Worker
Tout d’abord, vous devez créer un nouveau Worker qui chargera un script défini dans son constructeur.
\`\`\`javascript
var myWorker = new Worker(“worker.js”);
\`\`\`
Dans cet exemple, “worker.js” est le script que le worker exécutera.
1. Envoyer des messages au Worker
Il est possible de communiquer avec le Web Worker à l’aide de la méthode `postMessage()`.
\`\`\`javascript
myWorker.postMessage([first.value, second.value]);
\`\`\`
Dans cet exemple, nous envoyons un tableau de deux valeurs au worker.
1. Recevoir des messages du Worker
Le Web Worker peut également renvoyer des données vers le script principal. Pour cela, vous devez définir un écouteur d’événements pour l’événement `onmessage` du worker.
\`\`\`javascript
myWorker.onmessage = function(e) {
result.textContent = e.data;
console.log(‘Message received from worker’);
}
\`\`\`
Dans cet exemple, nous définissons la propriété textContent d’un élément de résultat pour afficher le message en retour du worker.
1. Le script du Worker
Le script que le worker doit exécuter doit être défini dans un fichier séparé. Voici un exemple de ce à quoi pourrait ressembler ce script :
\`\`\`javascript
onmessage = function(e) {
console.log(‘Worker: Message received from main script’);
var result = e.data0 \* e.data1;
if (isNaN(result)) {
postMessage(‘Please write two numbers’);
} else {
var workerResult = ‘Result: ‘ + result;
console.log(‘Worker: Posting message back to main script’);
postMessage(workerResult);
}
}
\`\`\`
Dans cet exemple, le worker attend un message avec deux valeurs, les multiplie, puis renvoie le résultat.
C’est un exemple de base, mais les Web Workers sont de véritables outils pour gérer les opérations lourdes et les I/O sans bloquer l’UI.
