L'essentiel de Node.js

Mettre en place un socket avec Node.js

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez comment mettre en place un système d'évènements très simple avec Node.js. Voyez aussi comment l'exploiter pour la mise en place d'un dialogue client/serveur.
06:18

Transcription

Allez, maintenant qu’on a parlé du protocole http, on va se focaliser un tout petit peu sur le protocole web socket. C’est nouveau, c’est super sympa à utiliser, et c’est vraiment génial pour dynamiser une application. Alors, le web socket, on va l’utiliser avec un module qui existe pour node, qui s’appelle ws. Evidemment il va falloir l’installer : npm install ws --save, pour le sauvegarder. On l’installe, et il est maintenant disponible. Comment ça va fonctionner ? Eh bien, ça va être assez simple. On va devoir créer sur notre serveur un web socket. Donc, on va faire webSocketServer qui va être égal à un require de ws.server. Et comme ça vous allez créer un serveur. Une fois que ça c’est fait, on va créer une variable en plus qui va s’appeler wss, et qui va être le démarrage réellement de notre web service, donc notre web server socket. On va faire un new web server socket ou web socket server, comme vous voulez. Donc web ici, SocketServer. Et à l’intérieur, on va lui donner des paramètres. Le paramètre le plus basique qu’on va lui donner, c’est le port qui va tourner également en 3000. Ça c’est fait. Et maintenant on va pouvoir câbler des évènements. Comment ça fonctionne ? Eh bien, c’est très simple. On va simplement appeler notre server web socket, et on va lui câbler un évènement, on et ici on va lui dire connexion. Quand j’ai une connexion qui arrive, je réagis et je fais quelque chose. Donc, ce quelque chose, c’est derrière comme ça, bien sûr, une fonction anonyme, que l’on va utiliser, et on va faire quelque chose. Alors on pourrait avoir un console.log comme ça connected, pour avoir de l’information au console. Et surtout un web socket.send qui va envoyer de l’information, Welcome. Et là on est bon. On a déjà câblé une première logique, c'est-à-dire que je vais pouvoir me connecter à mon web socket et recevoir de l’information, et donc savoir que je suis bien connecté. Il faut faire attention parce que vous voyez qu’ici il n’y a plus d’appel à un serveur http. Donc on ne va pas servir de fichier http. On ne va pas donc servir de fichier html. On va donc devoir lancer le fichier html. Et voilà comment il est créé, comment il est conçu. Vous allez devoir reprendre ça. Concrètement on a simplement modifié deux, trois petites choses. On a ajouté un formulaire ici avec une action javascript:void pour éviter qu’il y ait un envoi de formulaires. Un label, très simple, et puis ici un input de type text avec un autofocus et un id : message. Et puis surtout une inclusion de script : w-client.js. Ici notre w-client.js qu’est-ce qu’on va faire dedans ? Je vous le montre. On n’a pas grand-chose pour le moment. On a simplement unedrécupération de l’information quand on fait une soumission du formulaire. On a ici un set title, et on a ici un print message. On les utilisera un petit peu plus tard, mais nous, ce qui va nous intéresser, c’est de pouvoir connecter le html, Alors pour ça, ce n’est pas très compliqué. Il existe une norme qu’on peut utiliser directement dans le navigateur. On va créer un new WebSocket, comme ça. Et ici on doit lui donner une url. Alors, attention cette url. c’est ws : // car le protocole, c’est un protocole web socket. Et puis on va lui donner localhost:3000, parce que notre serveur va tourner sur le port 3000. Quand vous aurez fait ça, c’est bon, votre client sera connecté. Et il va bien falloir réagir. Alors, le plus intéressant ici, vous voyez qu’on a une petite fonction, set title qui permet d’injecter à l’intérieur en fait du h1, un titre. On pourrait l’utiliser pour vérifier qu’on est bien, du coup, connecté. Ws., et là on va pouvoir faire un onopen, qui va être égal à une fonction. Alors là je vais écrire en javascript classique parce que je n’ai pas de ES 6 dans mon navigateur, je suis sur une norme classique ES 5. Je vais faire un set title, comme ça, et je vais lui mettre ici connected to chat. Et si jamais je suis déconnecté, donc c’est quasiment la même chose au niveau des paramètres, on va reprendre le même ici, et on va lui dire onclose ici, et on va simplement lui changer le titre, et on va lui dire disconnected, comme ça. Alors là c’est déjà pas mal. Ça va nous permettre de travailler un petit peu avec le fonctionnement, réellement, on va voir comment ça marche. Bon, maintenant on va lancer le serveur. On le lance. Donc vous voyez que là, aucune réaction. Mais on va pouvoir aussi également lancer, donc là, vous voyez, je me suis positionné dans mon dossier Public, on va faire un open sur index.html qu’on vient de relier au web service. Et vous remarquez qu’ici, il est connecté. Alors, comment ça fonctionne réellement si on regarde dans la console ? Vous verrez que dans le network, au niveau des web services ici, vous devriez avoir une connexion active. Alors, il faut faire un reload, donc de la page pour voir ce qui se passe. Et on voit bien ici qu’effectivement, on a bien une connexion active et qu’on a reçu un welcome. Le welcome qui provient de notre serveur, puisque sur notre serveur ici effectivement, on avait bien welcome. D’ailleurs, la première fois on a eu connected, et j’ai rafraichi la page, on a eu connected une deuxième fois. Si je re-rafraichis la page, on va l’avoir une troisième fois. Et maintenant regardez. Là, c’est actif, le serveur est lancé. Donc c’est logique que ça fonctionne. Mais qu’est-ce qu’on a dit ? On a dit qu’on voulait se câbler aussi sur la fermeture du serveur. Donc si je ferme le serveur, logiquement on devrait avoir un titre à disconnected. Et effectivement vous voyez bien qu’on a disconnected. Alors, pour aller un petit peu plus loin, ce que je vais faire, c’est que je vais basculer ma fenêtre. Je vais sortir les consoles qu’on a ici. Je vais les mettre là. Et puis ce qu’on va faire c’est que je vais prendre en fait, le web socket qu’on a là, et je vais mettre les consoles avec le web socket. Alors, ça va être intéressant, vous allez voir parce que pour le coup ici, on va pouvoir très facilement voir ce qui se passe. Quand je vais lancer le serveur, regardez, on va le mettre ici. On va fermer cette partie-là. On va relancer le serveur node.js. Et on va charger la page et effectivement, vous voyez bien que c’est connecté. Maintenant je vais le tuer pour que vous puissiez voir vraiment ce qui se passe. Vous voyez que c’est instantané. C’est ce qui est intéressant avec le web socket, c’est que les connexions sont absolument instantanées. Dès que vous allez envoyer de l’information depuis votre serveur vers le socket, ça va se faire automatiquement, et du client vers le serveur, ça va être automatique aussi. Ce qui est génial aussi c’est que c’est un tunnel unique. On peut avoir dix clients connectés sur ce même tunnel, et on peut broadcaster, c'est-à-dire envoyer des messages à tout le monde en même temps. Donc pour un chat, c’est tout à fait génial. Là on a vu un premier aperçu. Maintenant on va voir comment on va traiter des messages.

L'essentiel de Node.js

Exploitez les possibilités de Node.js et créez des applications côté serveur entièrement en JavaScript. Travaillez avec des requêtes web, gérez le protocole WebSocket, etc.

4h00 (44 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Node.js Node.js 7.0
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 déc. 2016
Durée :4h00 (44 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !