web worker de la suite de Fibonacci

**Diegomarck** · 04/03/2021, 06h48

Bonjour, toujours dans le livre de Olivier Hondermark "Tou javascript", je tente de réaliser un web worker avec la suite Fibonacci. Soit le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<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>

Dans le fichier hello.html sur mon bureau. Puis le code complémentaire suivant dans le fichier worker.js sur mon bureau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
        onmessage=function(evenement) {
            console.log("Le message recu 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 */
            }
        }

Le fichier html fonctionne mais je crois que le renvois au fichier worker.js ne fonctionne pas. Les trente premier éléments de la suite de Fibonacci ne s'affichent pas. Que faire? Qu'est-ce ui ne marche pas? Où est l'erreur? Merci

**bourvil** · 04/03/2021, 09h46

Bonjour,
Utilisez vous Chrome?
y'a t'il un mesage d'erreur dans la console?
Chrome ne permet pas de lire un fichier local,

Uncaught DOMException: Failed to construct 'Worker': Script ...

si oui utiliser XAMP ou firefox
Chrome ne lit pas un fichier local //

**Doksuri** · 04/03/2021, 13h29

salut, les webworkers utilisent le mot-cle self. voici un exemple type d'un echange entre le script et un webworker
index.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>web workers POC</title>
</head>
<body>
</body>
<script>
    const worker = new Worker('webWorker.js');
    worker.addEventListener('message', ({data}) => {
        document.body.innerHTML = data.result;
    });
    worker.postMessage({action:'helloFromScript'});
    });
</script>
</html>

webWorker.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
self.addEventListener('message', ({data}) => {
    switch (data.action) {
        case 'helloFromScript':
            self.postMessage({result:'message from web worker'});
            break;
        default:
            break;
    }
});

**NoSmoking** · 04/03/2021, 15h21

Bonjour,
effectivement c'est le protocole file:/// qui empêche le bon fonctionnement, il faut passer par un serveur local même avec FireFox.

Cependant on peux s'en passer en modifiant les paramètres du navigateur ou via la ligne de commande.

Pour Firefox,

ouvrir la page de configuration en tapant dans la barre d'adresse : « about:config » ;
mettre le paramètre privacy.file_unique_origin à false.

Pour Chrome :

lancer Chrome avec le flag --allow-file-access-from-files, par exemple : « "C:\Program\Chrome\Application\chrome.exe" --allow-file-access-from-files », le chemin est à adapter bien sûr, voir clic droit -> Propriétés sur l'icône du bureau si tu es sous Window.

Le mieux restant le serveur local qui te sera toujours utile

web worker de la suite de Fibonacci

JavaScript

Discussions similaires

Partager

Partager