IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

web worker de la suite de Fibonacci


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    février 2019
    Messages
    62
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2019
    Messages : 62
    Points : 60
    Points
    60
    Par défaut web worker de la suite de Fibonacci
    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

  2. #2
    Membre averti Avatar de bourvil
    Profil pro
    Inscrit en
    juin 2002
    Messages
    411
    Détails du profil
    Informations personnelles :
    Localisation : Israël

    Informations forums :
    Inscription : juin 2002
    Messages : 411
    Points : 324
    Points
    324
    Par défaut
    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 //
    Franchement, je suis capable du meilleur comme du pire, mais, dans le pire, c'est moi le meilleur.
    Coluche

  3. #3
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    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;
        }
    });
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 189
    Points : 37 821
    Points
    37 821
    Par défaut
    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

Discussions similaires

  1. [68k] Problème exercice suite de Fibonacci
    Par tim91700 dans le forum Autres architectures
    Réponses: 15
    Dernier message: 31/03/2009, 20h59
  2. Suite de Fibonacci parallélisée
    Par nicolas66 dans le forum Algorithmes et structures de données
    Réponses: 6
    Dernier message: 07/12/2006, 22h04
  3. Réponses: 6
    Dernier message: 01/12/2006, 17h32
  4. [NASM] Problème suite de Fibonacci
    Par empochez dans le forum Assembleur
    Réponses: 1
    Dernier message: 05/04/2006, 11h17
  5. Suite de Fibonacci
    Par Évariste Galois dans le forum C++
    Réponses: 13
    Dernier message: 22/07/2005, 21h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo