Script webworker : Exemple de démonstration de Web Worker

Web Worker de démonstration

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

<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>

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 */  }}

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...