‫Jonas : Comme promis, nous
‫allons maintenant utiliser des émetteurs et des écouteurs d'événements en pratique,
‫et nous commençons par créer un nouveau fichier ici.
‫Donc événements. js et fermez celui-ci.
‫Donc, pour utiliser les événements de nœud intégrés,
‫nous devons exiger le module d'événements, et
‫à partir
‫de cela, nous allons exiger une classe EventEmitter.
‫Donc, EventEmitter, c'est en quelque sorte
‫le nom standard pour le résultat de l'exigence de ce module d'événements.
‫Encore une fois, il s'agit d'un module de nœud intégré, d'accord ?
‫Et maintenant, pour créer un
‫nouvel émetteur, nous créons simplement une instance
‫essentiellement de la classe que nous venons d'importer.
‫Donc très simple
‫myEmitter est un nouvel EventEmitter.
‫Donc EventEmitter comme ça.
‫Alors rappelez-vous de la dernière vidéo
‫que les EventEmitters peuvent émettre des événements nommés, et
‫nous pouvons ensuite nous abonner à ces
‫événements, donc en gros,
‫les écouter, puis réagir en conséquence, d'accord ?
‫C'est donc un peu comme configurer un
‫EventListener sur un élément stupide, par exemple, pour cliquer
‫sur un bouton, et je suis sûr
‫que vous l'avez déjà
‫fait, lorsque vous travaillez avec JavaScript côté client, n'est-ce pas ?
‫Donc notre émetteur finira
‫par émettre un événement nommé, d'accord ?
‫Alors mettons cela
‫en place, et faisons simplement comme
‫si nous construisions une boutique en ligne ou quelque chose du genre, d'accord ?
‫On peut donc dire myEmitter. émet(), puis nous
‫pouvons créer n'importe quel nom d'événement que nous voulons, d'accord ?
‫Nous voulons donc émettre un événement appelé newSale, d'accord ?
‫Et en utilisant l'exemple de cliquer
‫sur un bouton que
‫j'ai utilisé auparavant, cette émission ici est comme si nous cliquions sur
‫le bouton, et maintenant nous devons configurer ces écouteurs, d'accord ?
‫Et permettez-moi de le faire
‫avant ici, et donc encore une fois, nous utilisons notre objet myEmitter.
‫Entrez que nous utilisons la méthode on, d'accord ?
‫Donc sur newSale puis la fonction de rappel , qui
‫va être exécutée dès que l'événement est émis.
‫Alors comme d'habitude, passons simplement à la console.
‫« Il y a eu une nouvelle vente ! "
‫D'accord, et ajoutons-en un autre.
‫Rappelez-vous donc que j'ai dit
‫plus tôt que l'un des avantages de ces émetteurs d'événements est que nous
‫pouvons en fait
‫configurer plusieurs écouteurs pour le même événement.
‫Faisons-le ici,
‫et encore une fois,
‫bien sûr, nous écoutons l'événement
‫newSale (en tapant), puis nous
‫enregistrons simplement autre chose.
‫Peu importe ici.
‫Donc '"Nom du client :', par exemple 'Jonas"'.
‫Alors, testons cela, effaçons celui
‫d'avant, et nous utilisons
‫node,
‫puis les événements. js.
‫Donc, Il y a eu une vente et Nom du client :
‫Jonas, et donc vous voyez déjà que ça marche.
‫Alors, super, c'est donc le modèle d'observateur, tu te souviens ?
‫Là où celui-ci ici est l'objet qui émet les événements, et puis
‫ces deux
‫là, donc ça et ça,
‫ce sont les observateurs.
‫Ils observent
‫l'émetteur et attendent qu'il émette l'événement newSale.
‫Et, bien sûr, notre émetteur pourrait également émettre d'autres événements.
‫Comme un nouveau client ou une nouvelle commande ou quelque chose
‫comme ça, et nous pourrions ensuite ajouter des auditeurs pour celui-là aussi, d'accord ?
‫Maintenant, une autre chose que
‫je voulais vous montrer est que nous pouvons même passer
‫des arguments à l'EventListener
‫en les passant comme argument supplémentaire dans l'émetteur, ici.
‫Alors disons que passe neuf, donc dans ce
‫cas juste un numéro,
‫et nous avons alors un auditeur qui veut l'utiliser.
‫(en tapant) Donc
‫myEmitter, (en tapant) newSale,
‫et maintenant cette fonction
‫de
‫rappel peut prendre un argument, et
‫appelons-la donc stock.
‫Donc, fondamentalement, la quantité d'articles qui
‫restent du produit que nous vendons ici.
‫Utilisons une chaîne de modèle.
‫Il
‫reste maintenant des articles en stock.
‫Donc, si nous l'exécutons maintenant, nous devrions
‫voir qu'il reste maintenant neuf articles en stock
‫car nous avons émis cet événement essentiellement
‫avec un neuf, et
‫l'auditeur peut alors récupérer cette valeur
‫ici comme argument de ses fonctions de rappel.
‫Donc, cette variable de stock ici dans ce cas.
‫Donc, si vous
‫l'exécutez à nouveau, voici neuf articles en stock.
‫Alors, parfait, et vous voyez que ces trois
‫journaux apparaissent ici exactement dans le même ordre qu'ils
‫sont déclarés dans le code, d'accord ?
‫Et c'est donc le comportement normal.
‫Si nous avons plusieurs écouteurs pour le même événement,
‫ils s'exécuteront de manière synchrone.
‫Donc l'un après l'autre dans l'ordre où
‫ils étaient dans le code.
‫Donc, ce petit exemple fonctionne déjà parfaitement,
‫mais si vous deviez utiliser ce modèle dans la
‫vraie vie, alors c'est une bonne pratique de créer
‫une nouvelle classe qui héritera en fait du nœud EventEmitter.
‫Donc, quelque chose comme ça.
‫(en tapant) Disons que
‫la classe Sales étend EventEmitter, et c'est la
‫syntaxe ES6 ou ES2015 pour l'héritage de classe.
‫Et encore une fois, j'espère
‫que vous connaissez ES6 au moment où vous suivez ce cours, d'accord ?
‫Donc, par cœur, l'EventEmitter est une classe, donc celle que nous
‫avons importée des événements dans notre
‫classe de vente,
‫est la nouvelle classe que
‫nous créons, et qui hérite
‫de tout de la classe EventEmitter, d'accord ?
‫Ensuite, dans ES6, chaque classe obtient un constructeur qui est
‫une fonction qui est
‫exécutée dès que nous créons un nouvel objet à partir d'une classe, d'accord ?
‫Et ce que nous devons faire ici, c'est
‫appeler super, et c'est quelque chose
‫que nous devons toujours faire lorsque nous étendons une autre superclasse, d'accord ?
‫C'est donc la
‫classe parent, et c'est la superclasse,
‫et en exécutant super,
‫nous avons alors accès à toutes les méthodes de la classe parent.
‫Donc, encore une fois, EventEmitter dans ce cas, d'accord ?
‫Et maintenant ce que nous devons faire
‫est de déplacer celui-ci vers
‫le bas, (en cliquant)
‫et donc maintenant mon émetteur est un nouveau Sales, d'accord ?
‫Et maintenant, cela fonctionnera exactement de la même manière,
‫et en effet, nous y voilà, et
‫en fait ce mécanisme que je viens de vous montrer ici.
‫Donc, fondamentalement, étendre la classe EventEmitter est exactement comment les
‫différents modules de nœud, comme
‫HTTP, le système de fichiers et de nombreux autres modules de noyau de
‫nœud implémentent les événements en interne, d'accord ?
‫Ils héritent donc
‫tous de la classe EventEmitter.
‫D'accord, et avec ce petit exemple
‫qui fonctionne, essayons maintenant une autre chose.
‫Donc, puisque je parlais tout à l'heure du
‫module HTTP, permettez-moi de vous démontrer
‫qu'il est entièrement basé sur des événements, d'accord ?
‫Nous avons donc cette partie qui fonctionne.
‫Créons quelques commentaires ici, quelque chose,
‫puis créons un autre exemple ici, d'accord ?
‫Et ce que
‫nous allons faire, c'est créer un
‫petit serveur Web, puis écouter l'événement qu'il émet, d'accord ?
‫Donc, ici, nous devons importer le module HTTP,
‫(en tapant) Et
‫puis ici, nous pouvons l'utiliser.
‫Nous créons donc un
‫serveur, et maintenant je vais le faire un
‫peu différemment de ce que nous avons fait à la première intersection, d'accord ?
‫Mais en fait, cela fonctionne exactement de la même manière.
‫Donc, tout ce que je vais faire ici est maintenant http. createserver et juste comme ça,
‫et maintenant
‫ce que je vais faire,
‫c'est essentiellement écouter les différents événements que
‫le serveur va émettre.
‫Donc pour ça, encore une fois, j'utilise sur, et
‫donc si vous voyez . sur n'importe où dans
‫un projet de nœud, eh bien, vous
‫savez déjà que vous écoutez ou que le code écoute un événement, d'accord ?
‫Et donc celui que
‫nous écoutons ici est l'événement de demande, d'accord ?
‫Et maintenant, cela fonctionne exactement comme avant,
‫nous avons une
‫fonction de rappel qui accède à la demande et à la réponse.
‫Donc, rien de ce que vous avez fait à
‫ce stade, nous avons fait exactement cela dans le projet de ferme de nœuds, d'accord ?
‫Alors consolez-vous. log
‫(en tapant) "demande
‫reçue", puis renvoyons également quelque chose.
‫(en tapant) Juste le
‫même texte en fait, d'accord ?
‫Et, bien sûr, nous pouvons écouter
‫plusieurs fois le même événement.
‫(en cliquant) Alors disons simplement
‫ici "Une autre demande" en utilisant des
‫emoji ici juste pour le faire ressortir un peu plus, et il
‫n'apparaît pas.
‫Que se passe t-il ici?
‫Ah, on y va.
‫Donc, l'écoute d'une demande,
‫et nous pouvons également écouter l'événement de clôture.
‫Donc, serveur à la fermeture, et c'est l'événement
‫qui est
‫déclenché lorsque le serveur, comme vous pouvez l'imaginer, se ferme.
‫(en tapant) D'accord, c'est
‫donc écouter les événements, et maintenant,
‫rappelez-vous, nous
‫devons également démarrer le serveur.
‫Donc, et nous démarrons le serveur
‫en utilisant server. écoutez, passez
‫dans le port, l'adresse qui est à nouveau localhost
‫pour nous dans ce cas,
‫point un, et ensuite, notre fonction de rappel qui est
‫facultative mais incluons-la à nouveau ici.
‫(en tapant) "En attente
‫de demandes... " Alors,
‫commençons réellement cela, et
‫nous voyons En attente de demande... et l'application ne se ferme pas, et maintenant vous savez pourquoi
‫elle ne se ferme pas, n'est-ce pas ?
‫C'est parce que la boucle d'événements attend toujours les
‫E/S entrantes, n'est-ce pas ?
‫C'est donc ce que nous avons appris dans les conférences en boucle d'événements, d'accord ?
‫Faisons maintenant une requête sur le port 8000 sur cette URL.
‫(en cliquant) (en tapant)
‫Et c'est
‫parti.
‫Ainsi, nous voyons Demande reçue.
‫Donc ça marche car dès qu'il y a une
‫nouvelle requête, le serveur émet automatiquement l'objet requête, d'accord ?
‫Et nous pouvons le voir ici bien sûr, et ici dans la
‫console, nous voyons notre chaîne de
‫demande reçue.
‫En fait, je voulais en avoir un autre ici.
‫Ainsi, nous ne pouvons bien entendu envoyer qu'une seule réponse.
‫Donc ici, je devrais avoir une autre console. log à la place.
‫Alors laissez, quittez ceci, redémarrez-le, rechargez,
‫et, oui, alors maintenant nous obtenons la demande reçue,
‫qui
‫provient de ce premier EventListener, et une
‫autre demande de ce deuxième EventListener.
‫Une chose que vous remarquerez probablement est que chacun de ces éléments est
‫en fait enregistré deux fois.
‫Cela signifie donc que le serveur émet également
‫deux fois l'événement de requête.
‫Voyons donc pourquoi.
‫(en
‫tapant) Alors console. journal, demande. URL.
‫Ainsi, avec cela, nous pouvons
‫maintenant accéder à l'URL de la demande.
‫(en cliquant) Arrêtons-le
‫ici.
‫Exécutez-le à nouveau,
‫rechargez, et nous
‫en avons
‫un pour l'URL racine, puis un pour le favicon. ico Ainsi, les navigateurs essaient automatiquement de demander
‫un favicon pour
‫chaque site Web, d'accord ?
‫C'est pourquoi chacun d'eux est apparu deux fois en fait, d'accord ?
‫Donc, vous voyez que nous ne devons pas toujours émettre
‫également des événements.
‫C'est plus lorsque nous essayons d'utiliser l'EventEmitter par nous-mêmes.
‫Donc, fondamentalement, lorsque nous essayons d'utiliser nos événements personnalisés
‫dans nos applications.
‫Dans ce cas, bien sûr, nous devons
‫émettre les
‫événements nous-mêmes, mais si nous utilisons un module de
‫nœud intégré, ces fonctions émettront plusieurs fois leurs propres
‫événements, et tout ce que nous avons à
‫faire est d'écouter eux.
‫C'est donc exactement ce que nous avons fait
‫ici, et avec cela, je pense, vous savez maintenant tout ce
‫que vous devez savoir
‫sur les événements, et vous êtes prêt à m'accompagner pour la prochaine vidéo.