DEV Community

Cover image for Exemples de programmation Node JS WebSocket
PubNub [Français] profile image PubNub Developer Relations
PubNub Developer Relations for PubNub [Français]

Posted on

Exemples de programmation Node JS WebSocket

Si vous lisez ces lignes, c'est que vous êtes probablement intéressé par la création d'une application ou d'un service qui nécessite une communication bidirectionnelle pouvant être initiée par l'une ou l'autre partie. Node JavaScript (Node.js) peut être utilisé pour développer et déployer rapidement cette application à l'aide de WebSockets, qui ont été conçues pour ce cas d'utilisation.

Qu'est-ce qu'une WebSocket ?

A WebSocket est un protocole de communication informatique offrant une communication duplex duplex sur une seule connexion TCP. En d'autres termes, il permet à des appareils compatibles avec Internet de communiquer entre eux, l'un agissant en tant que client et l'autre en tant que serveur, les deux pouvant initier la communication.

Quels types d'applications utilisent les WebSockets ?

Le protocole WebSocket est utilisé chaque fois qu'une solution nécessite une communication en temps réel :

Les WebSockets créent une connexion TCP entre plusieurs appareils ou processus. Comme nous le verrons plus loin, une fonctionnalité similaire peut être mise en œuvre à l'aide de HTTP Long Polling ou un service pub/sub hébergé, mais construisons d'abord un exemple simple en utilisant WebSockets et Node.js.

Node.js est-il adapté aux WebSockets ?

Oui, Node.js est un excellent choix pour la mise en œuvre des sockets Web, car il fournit un environnement côté serveur rapide et évolutif qui prend en charge la célèbre bibliothèque ws.

Pourquoi utiliser Node.js pour les WebSockets ?

Les WebSockets nécessitent une connexion persistante entre le client et le serveur, ce qui signifie que le serveur doit être capable de gérer un grand nombre de connexions simultanées. Node.js utilise un modèle d'E/S événementiel et non bloquant, ce qui le rend bien adapté pour gérer les besoins en ressources des applications basées sur les WebSockets.

Comment mettre en œuvre les WebSockets dans Node.js ?

Le guide suivant vous aidera à créer un serveur WebSocket dans Node.js et vous montrera comment vous y connecter à l'aide d'un client WebSocket fonctionnant dans le navigateur.

Combien de connexions WebSocket un serveur Node.js peut-il gérer ?

Les applications de production peuvent gérer des dizaines de milliers de connexions WebSocket simultanément, mais le nombre exact dépend de plusieurs facteurs tels que les ressources matérielles du serveur, la bande passante du réseau et la complexité de la logique de l'application.

Exemple d'API WebSocket Node.js - une application de chat basique

Tout le code source associé à ce blog est hébergé sur GitHub

Pour créer une application de chat basique avec WebSockets, vous aurez besoin d'un composant client et d'un composant serveur.

Pour le serveur, nous utiliserons Node.js, et le code côté client s'exécutera dans un navigateur web tel que Chrome.

Code Node.js WebSockets (serveur)

Cette application nécessite un serveur web(serveur HTTP) et un serveur WebSocket (wss). Le serveur web nous permet de charger notre client (qui s'exécute dans un navigateur), et le serveur WebSocket gère les messages de chat bidirectionnels.

Comment créer un serveur websocket en NodeJS ?

Créez l'application Node.js et installez les modules Express.js et 'wsqui fourniront notre serveur web et notre serveur WebSocket, respectivement.

npm init [Suivez les invites et acceptez les valeurs par défaut] npm install --save express npm install --save ws
Enter fullscreen mode Exit fullscreen mode

La partie serveur web servira une seule page web au client, websocket-client.html, sur le port 3000 :

const express = require('express') const webserver = express() .use((req, res) => res.sendFile('/websocket-client.html', { root : __dirname }) ) .listen(3000, () => console.log(`Écoute sur ${3000}`))
Enter fullscreen mode Exit fullscreen mode

Un serveur WebSocket peut être créé en quelques lignes seulement à l'aide de la bibliothèque WebSocket (ws) de Node.js :

const { WebSocketServer } = require('ws') const sockserver = new WebSocketServer({ port : 443 })
Enter fullscreen mode Exit fullscreen mode

Ecrire des événements Websocket pour des exemples NodeJS

Après avoir créé une instance d'un serveur WebSocket et spécifié le port sur lequel il doit fonctionner, nous pouvons définir toute action qui doit se produire après l'établissement de la connexion WebSocket. Dans notre cas, nous écrivons des événements de connexion sur la console et transmettons les messages que nous recevons aux clients précédemment connectés. Les WebSockets sont conçus pour fonctionner sur les mêmes ports que HTTP/HTTPS (c'est-à-dire 80 et 443).

sockserver.on('connection', ws => { console.log('New client connected!') ws.send('connection established') ws.on('close', () => console.log('Client has disconnected!')) ws.on('message', data => { sockserver.clients.forEach(client => { console.log(`distributing message : ${data}`) client.send(`${data}`) }) }) ws.onerror = function () { console.log('websocket error') })
Enter fullscreen mode Exit fullscreen mode

Et avec cela, la partie serveur est terminée. Chaque fois qu'un message est reçu sur une socket, il transmet le message à chaque client connecté, ce qui est la base de toute application de chat de groupe.

Le code index.js complet ressemble à ceci :

const express = require('express') const webserver = express() .use((req, res) => res.sendFile('/websocket-client.html', { root : __dirname }) ) .listen(3000, () => console.log(`Écoute sur ${3000}`)) const { WebSocketServer } = require('ws') const sockserver = new WebSocketServer({ port : 443 }) sockserver.on('connection', ws => { console.log('New client connected!') ws.send('connection established') ws.on('close', () => console.log('Client has disconnected!')) ws.on('message', data => { sockserver.clients.forEach(client => { console.log(`distributing message : ${data}`) client.send(`${data}`) }) }) ws.onerror = function () { console.log('websocket error') })
Enter fullscreen mode Exit fullscreen mode

Et vous pouvez l'exécuter à partir de la ligne de commande comme suit :

node index.js
Enter fullscreen mode Exit fullscreen mode

Les messages peuvent être soit du texte, soit encodés en JSON (JSON.stringify). Ce code utilise par défaut le jeu de caractères utf-8.

Exemple de code WebSockets (client / navigateur)

Il n'est pas nécessaire d'installer des logiciels ou des paquets supplémentaires pour utiliser les WebSockets avec les navigateurs web modernes. Créez une WebSocket à l'écoute en fournissant un URI correctement formaté :

const webSocket = new WebSocket('ws://localhost:443/') ;
Enter fullscreen mode Exit fullscreen mode

Et en définissant un gestionnaire d'événements pour la réception d'un message du serveur :

webSocket.onmessage = (event) => { console.log(event) document.getElementById('messages').innerHTML += 'Message du serveur : ' + event.data + "<br>" ; } ;
Enter fullscreen mode Exit fullscreen mode

Nous pouvons maintenant recevoir des données du serveur WebSocket.

Pour envoyer un message à partir du client, il faut utiliser la fonction send() de l'objet socket :

webSocket.send('hello')
Enter fullscreen mode Exit fullscreen mode

Pour rendre notre application de chat fonctionnelle, il nous suffit d'ajouter un champ de saisie et un bouton "envoyer le message", de sorte que votre code HTML frontal devrait ressembler à quelque chose comme ceci (style et css omis pour des raisons de brièveté) :

<html> <head> </head> <body> <form id="input-form"> <label for="message">Entrez votre message :</label> <input type="text" id="message" name="message"><br><br> <input type="submit" value="Send"> </form> <div id="messages"></div> <script> const webSocket = new WebSocket('ws://localhost:443/') ; webSocket.onmessage = (event) => { console.log(event) document.getElementById('messages').innerHTML += 'Message du serveur : ' + event.data + "<br>" ; } ; webSocket.addEventListener("open", () => { console.log("Nous sommes connectés") ; }) ; function sendMessage(event) { var inputMessage = document.getElementById('message') webSocket.send(inputMessage.value) inputMessage.value = "" event.preventDefault() ; } document.getElementById('input-form').addEventListener('submit', sendMessage) ; </script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Nommez votre page HTML "websocket-client.html" et ouvrez quelques onglets dans votre navigateur, en vous rendant à l'adresse suivante http://localhost:3000Vous devriez voir des messages reçus dans chaque onglet :

Créer la même application de chat sans serveur Node.js

Si vous n'avez pas de serveur ou si vous avez des inquiétudes quant à l'évolution de votre infrastructure serveur pour répondre aux demandes futures de votre application, vous devriez opter pour une solution de communication en temps réel hébergée telle que Socket.io ou PubNub.

PubNub est une plateforme cloud mondialement distribuée et évolutive, vous n'avez donc pas à vous soucier du déploiement et de la maintenance des serveurs sur votre backend. Les SDK PubNub peuvent identifier les utilisateurs et envoyer des messages à des canaux spécifiques, que seuls les utilisateurs abonnés recevront.

Alors, comment l'application de chat simple présentée ci-dessus pourrait-elle être écrite avec PubNub ? L'un des avantages de PubNub est qu'il est agnostique en matière de protocole.PubNub utilise l'architecture "publish" et "subscribe" (pub/sub) pour envoyer et recevoir des messages bidirectionnels.

Exemple de code JavaScript SDK

Tout d'abord, incluez le SDK JavaScript de PubNub dans l'en-tête, disponible sur leur CDN :

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Pour s'abonner aux messages entrants, créez une instance PubNub, définissez le canal et ajoutez un écouteur :

var pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo', userId : "" + Math.random() }) pubnub.subscribe({ channels : ['ws-channel'] }) pubnub.addListener({ message : payload => { console.log() document.getElementById('messages').innerHTML += 'Message du client : ' + payload.message + "<br>" ; } })
Enter fullscreen mode Exit fullscreen mode

La page sera mise à jour chaque fois que des messages seront reçus sur le "ws-channel". Le code ci-dessus utilise des clés "demo", mais vous pouvez obtenir vos propres clés PubNub personnalisées gratuitement.

Pour envoyer des messages via PubNub, publiez sur le même canal que celui auquel vous vous êtes abonné précédemment, dans ce cas :

pubnub.publish({ channel : 'ws-channel', message : inputMessage.value })
Enter fullscreen mode Exit fullscreen mode

Le modèle de canal est très flexible et extensible, mais pour cet exemple simple, il suffit d'envoyer et de recevoir des messages sur le même canal. Votre message sera délivré n'importe où dans le monde en moins de 100 ms.

Puisqu'aucun composant serveur n'est requis avec un déploiement PubNub, l'application entière, écrite en HTML et JS, est contenue dans un seul fichier :

<html> <head> <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script> </head> <body> <H1>Ce code utilise PubNub, qui est agnostique en matière de protocole</H1> <form id="input-form"> <label for="message">Entrer le message :</label> <input type="text" id="message" name="message"><br><br> <input type="submit" value="Send"> </form> <div id="messages"></div> <script> var pubnub = new PubNub({ publishKey : 'demo', subscribeKey : 'demo', userId : "" + Math.random() }) pubnub.subscribe({ channels : ['ws-channel'] }) pubnub.addListener({ message : payload => { console.log() document.getElementById('messages').innerHTML += 'Message from client : ' + payload.message + "<br>" ; } }) function sendMessage(event) { var inputMessage = document.getElementById('message') pubnub.publish({ channel : 'ws-channel', message : inputMessage.value }) inputMessage.value = "" event.preventDefault() ; } document.getElementById('input-form').addEventListener('submit', sendMessage) ; </script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Vous pouvez voir une version en direct de ce code à l'adresse suivante

https://pubnubdevelopers.github.io/nodejs-websocket-examples/pubnub-client.html

Et c'est tout ce qu'il y a à faire ! Pour plus d'informations sur le développement avec PubNub, consultez leur gamme de tutoriels et démosou encore la visite interactive en direct de visite interactive en direct de PubNub pour comprendre comment la plateforme fournit une interactivité en temps réel aux applications.

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, livrer et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.

Top comments (0)