Script webworker : Exemple de d駑onstration de Web Worker
Web Worker de d駑onstration
Partie III : Pour aller encore plus loin avec JavaScript
Edition 1 | Chapitre 24 : Les Web Workers / Page 326
Edition 2 | Chapitre 25 : Les Web Workers / Page 371
Edition 3 | Chapitre 25 : Les Web Workers / Page 371
Exécution du script
Emulation de la console
Code source
<html><head> <title>Web Worker de démonstration</title></head><body> <h1>Principe de fonctionnement d'un Web Worker</h1> <h2>Définition de la suite de Fibonacci</h2> <p>La suite de Fibonnaci est une suite de nombres <strong>F</strong>, tel que :<br> - le n<sup>ième</sup> élément est égal à la somme des deux précédents<br> - le premier élément vaut 1<br> </p> <p>La suite est notée : <b><strong>F<sub>n</sub></strong> = <strong>F<sub>n-1</sub></strong> + <strong>F<sub>n-2</sub></strong></b></p> <h2> Résultat des <span id="longueur">N</span> premiers éléments de la suite de Fibonacci</h2> <div id="suite"> <div id="suiteTitre" class="ligne"><div class="indice">Indice</div><div class="valeur">Valeur</div></div> </div> <script type="text/javascript">if (window.Worker) { var myWorker=new Worker("worker.js"); var fibonacci={ "type": "fibonacci", "longueur": "30", } /* Envoyer un message avec la consigne de calcul de la suite */ myWorker.postMessage(fibonacci); /* Réception du résultat */ myWorker.onmessage=function(evenement) { /* Mise à jour du nombre d'éléments de la liste */ document.querySelector("span#longueur").innerText=evenement.data.longueur; /* Construction de div#suite avec les lignes de résultats */ var suite=document.querySelector("div#suite"); var suiteTitre=document.querySelector("div#suiteTitre"); suite.innerText=""; suite.appendChild(suiteTitre); for (var i=0; i<evenement.data.longueur; i++) { var ligne=document.createElement("div"); ligne.className="ligne"; var indice=document.createElement("div"); indice.className="indice"; indice.innerText=(i+1); var valeur=document.createElement("div"); valeur.className="valeur"; valeur.innerText=evenement.data.suite[i]; ligne.appendChild(indice); ligne.appendChild(valeur); suite.appendChild(ligne); } }} </script> <style type="text/css">body { min-height: 500px;} strong { font-style: italic;}div#suite { display:inline-block; padding:5px; margin:5px; background: #eee; border-radius:8px; border:1px solid #999;}div.ligne { padding:2px;}div.indice { display: inline-block; width:50px; text-align: center; color:#999; font-style: italic;}div.valeur { display: inline-block; width:100px; font-weight: bold; margin-left:10px;} </style></body></html>
Il existe 1 autre fichier nécessaire au fonctionnement
Code source du fichier worker.js
/* Script du worker pour l'exemple de la page http://tjs.ovh/webworker */onmessage=function(evenement) { console.log("Le message re?u est dans evenement.data"); console.log(evenement.data); var msg=evenement.data; if (msg.type=="fibonacci") { /* On commence avec un 0 pour ?viter de sortir du tableau ? l'indice 1 */ var s=[0,1]; for (var i=2; i<=msg.longueur; i++) { s.push(s[i-1]+s[i-2]); } s.shift(); /* Supprime le premier ?l?ment technique valant 0 */ console.log(s); msg.suite=s; postMessage(msg); /* Envoi d'un message vers la page principale */ }}