Websocket avec Node.js

Les applications Web ont changé et évolué, ce qui rend les besoins des utilisateurs différents de lorsque le premier protocole de connexion a été créé sur le réseau. Par conséquent, le protocole HTTP a évolué au fil des années mais n'a pas encore atteint un niveau de temps réel tel qu'une connexion TCP entre deux équipes.
Ces limitations, plutôt que de nuire aux développeurs et aux utilisateurs, sont devenues une source de motivation et de créativité, générant des solutions qui nous permettent non seulement d'imiter un système de transmission en temps réel, mais aussi grâce à HTTP le faire presque nativement.
WebsocketC'est là que le Websocket, un protocole relativement nouveau qui n'est pris en charge que par les navigateurs les plus modernes, ce qui nous permet de supprimer HTTP de toutes ses restrictions et ainsi de pouvoir communiquer efficacement via les en-têtes AVOIR.
Websocket Il est encore dans une période de maturation active donc il est fort possible que nous ne le trouvions pas dans de nouvelles solutions, heureusement dans Node.js nous avons déjà des outils qui nous permettent de les gérer sans avoir à compter sur notre ingéniosité pour construire des outils de bas niveau.
ExigencesIl s'agit d'un tutoriel avancé, nous allons donc d'abord nécessiter une installation fonctionnelle de Node.js Dans notre système, nous pouvons jeter un œil à ce didacticiel avant de continuer à l'approfondir, de plus, nous aurons besoin des autorisations d'administrateur pour pouvoir installer les bibliothèques que nous allons utiliser. Nous devons être familiers avec les concepts de JavaScript comme par exemple rappeler et des fonctions anonymes. Enfin, nous devons avoir un éditeur de texte comme Texte sublime qui nous permet d'écrire les différents codes qui sont dans les exemples.
Pour commencer à créer une application qui nous permet d'utiliser Websockets Il faut d'abord construire une petite structure, c'est très simple mais nécessaire, cette structure sera constituée de :
1- Un dossier où nous allons stocker les fichiers de notre projet.
2- Un fichier nommé serveur.js, ce fichier, comme son nom l'indique, sera le serveur par lequel nous allons établir la connexion en temps réel à l'aide du Websockets.
3- Un fichier nommé client.html, ce fichier sera l'interface pour communiquer avec notre serveur via le navigateur, il est nécessaire d'avoir le même pour que nous puissions envoyer et recevoir les informations correspondantes.
Puisque nous avons défini notre structure maintenant, nous pouvons commencer à prendre quelques lignes de code, pour cela, nous devons commencer par installer une bibliothèque externe appelée ws dans notre environnement, puisque c'est celui qui va nous permettre d'utiliser le protocole en question. Pour installer cette librairie il suffit d'ouvrir notre console Node.js, nous nous situons dans le dossier où seront nos fichiers et nous plaçons la commande suivante :

 npm installer ws

Lorsque nous l'exécutons, nous pouvons voir le résultat suivant dans notre console de commande :

Une fois que nous avons installé la bibliothèque, nous pouvons continuer notre travail, maintenant dans notre fichier serveur.js Nous devons écrire le code suivant, voyons d'abord en quoi il consiste puis nous l'expliquerons :

 var WSServer = require ('ws').Serveur, wss = nouveau WSServer ({port: 8085}); wss.on ('connexion', fonction (socket) {socket.on ('message', fonction (msg) {console.log ('Reçu :', msg, '\ n', 'De l'IP :', socket . upgradeReq.connection.remoteAddress); if (msg === 'Bonjour') {socket.send ('Oui ça marche !');}}); socket.on ('close', function (code, desc) {console .log ('Hors ligne :' + code + '-' + desc);});});

La première chose que nous faisons est de demander à la bibliothèque ws que nous venons d'installer et immédiatement dans la même instruction appelez votre classe Serveur, puis nous créons une instance avec laquelle nous allons créer un serveur qui s'exécute sur le port 8085Ce port peut être celui auquel nous avons accès. Dans ce cas, 8085 est utilisé afin qu'il n'y ait pas de conflit avec les autres services qui sont actuellement dans cet environnement de test.
Puisque nous avons défini notre instance, nous allons maintenant appliquer la méthode.sur () pour l'événement de connexion, puis dans le rappeler de là, nous passons un objet appelé prise, avec cela, nous recevrons les messages du client et nous avons écrit une routine que si nous recevons le mot "Salut" le serveur renverra un message, où à son tour nous imprimerons également quelque chose dans la console de commande. Enfin, si nous fermons la connexion, nous n'aurons qu'un seul message sur la console.
Une fois que nous avons notre serveur, il est temps de construire notre client, pour cela dans le fichier client.html nous allons définir une structure où nous allons placer des balises html et un JavaScript qui fonctionnera comme un lien vers notre serveur. Voyons à quoi ressemble notre fichier :

 Websockets Client Soumettre

La partie HTML est assez simple, nous avons une saisie de type texte et un bouton de soumission, ainsi qu'un div sortie appelée c'est-à-dire qui recevra les informations du serveur pour les montrer à l'utilisateur. La chose intéressante vient de l'étiquette où la première chose que nous faisons est de créer un objet du type WebSocket et nous indiquons l'itinéraire où vous devez le trouver, dans notre cas c'est le hôte local : 8085 et ainsi nous pouvons voir que ce que nous avons fait dans le serveur.js. Nous lions ensuite nos éléments d'envoi, de texte et de sortie à des variables que nous pouvons utiliser.
Ensuite, ce que nous faisons, c'est définir chacune des méthodes que nous pouvons recevoir du serveur, donc chaque fois que nous envoyons quelque chose, il sera enregistré dans notre sortie, tout cela grâce à la méthode envoyer (). L'autre méthode que nous utilisons est la onmessage () qui n'est activé que si notre serveur répond et que nous ajoutons le résultat dans notre HTML.
Enfin on utilise les méthodes fermer () Oui erreur (), le premier nous donne un message lorsque la connexion avec le Websocket est arrêté ou fermé, et le second nous informe en cas d'erreur. Avec cela, nous n'avons qu'à démarrer le serveur dans notre console et mettre notre exemple à l'œuvre, pour cela nous utilisons la commande suivante :

 serveur de nœud.js

Cela démarrera le serveur, mais pour vérifier la fonctionnalité de notre code, nous devons exécuter notre fichier client.html dans notre navigateur de choix et écrire quelque chose dans la zone de texte et appuyer sur le bouton d'envoi, cela générera une communication avec le Websocket et on peut voir la réponse par console :

Dans l'image, nous pouvons voir comment la console de commande imprime le message reçu et enregistre même l'adresse IP d'où elle reçoit les données, c'est ce que nous avons programmé dans notre fichier serveur.js, où nous avons également indiqué que si nous recevions le mot "Bonjour", nous enverrions un message de réponse qui est exactement ce que nous voyons dans la fenêtre du navigateur dans la même image. Maintenant, si nous actualisons le navigateur, la connexion est rompue, cela est également enregistré par notre application, voyons :

Enfin si nous fermons la connexion dans notre console avec CTRL + C Pour arrêter le serveur, notre navigateur déclenche le gestionnaire d'erreurs et là, nous verrons un nouveau message :

Si nous avons été observateurs, nous avons peut-être remarqué quelque chose d'important, à aucun moment pour recevoir des réponses, nous n'avons eu à actualiser le navigateur ou à faire une demande Ajax, tout a été bidirectionnel directement avec WebSockets, c'est ce qu'on appelle le temps réel.
Ce que nous avons montré est l'un des moyens les plus rudimentaires et manuels qui existent, mais cela fonctionne pour nous de savoir à quoi ressemble le flux de travail, mais la véritable fonctionnalité prête pour les environnements de production est obtenue avec la bibliothèque socket.io, cela fait la même chose que nous avons fait dans le tutoriel mais dans un format beaucoup plus compact et moins sujet aux erreurs du développeur, ce qui nous permet de nous concentrer uniquement sur la logique de l'application et pas tellement sur la partie technique de celle-ci.
Pour installer socket.io nous devons juste faire un npm installer socket.io et avec cela à partir du référentiel, nous téléchargerons la dernière version stable de la bibliothèque, ce qui nous permettra de commencer notre développement.
Avec cela, nous avons terminé ce tutoriel, avec lequel nous avons franchi une étape importante au sein de Node.js en sachant utiliser le Websockets, cette technologie devient chaque jour plus importante car elle nous aide à créer des applications auxquelles on n'aurait jamais pensé sur le Web. Il est également important que nous nous documentions sur le protocole car c'est un moyen de comprendre le potentiel de ce que nous pouvons réaliser simplement en développant des applications.