Exemples de programmation Node JS WebSocket
Published: 2023-11-28 14:48:22

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](https://www.pubnub.com/guides/what-are-websockets-and-when-should-you-use-them/) est un protocole de communication informatique offrant une communication [duplex](https://en.wikipedia.org/wiki/Duplex_(telecommunications)) duplex sur une seule connexion [TCP](https://www.pubnub.com/guides/tcp-ip/). 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 :

-   [Applications de chat](https://www.pubnub.com/solutions/chat/)
    
-   [Mises à jour du cours des actions](https://www.pubnub.com/solutions/data-streaming/)
    
-   [Suivi de la localisation en direct sur une carte](https://www.pubnub.com/solutions/geolocation/)
    
-   [Interaction en direct avec un public](https://www.pubnub.com/solutions/live-audience-engagement/)
    
-   [Enchères en ligne](https://www.pubnub.com/solutions/marketplaces/)
    
-   [Mises à jour des appareils IoT](https://www.pubnub.com/solutions/iot-device-control/)
    

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](https://www.pubnub.com/learn/glossary/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](https://www.npmjs.com/package/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](https://www.pubnub.com/guides/event-driven-architecture/) 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](https://github.com/PubNubDevelopers/nodejs-websocket-examples)

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](https://www.pubnub.com/guides/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](https://expressjs.com/) et '[ws](https://www.npmjs.com/package/ws)qui fourniront notre serveur web et notre serveur WebSocket, respectivement.

```js
npm init [Suivez les invites et acceptez les valeurs par défaut] npm install --save express npm install --save ws
```

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

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

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

```js
const { WebSocketServer } = require('ws') const sockserver = new WebSocketServer({ port : 443 })
```

### 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).

```js
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') })
```

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 :

```js
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') })
```

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

```js
node index.js
```

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é :

```js
const webSocket = new WebSocket('ws://localhost:443/') ;
```

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

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

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 :

```js
webSocket.send('hello')
```

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é) :

```js
<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>
```

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

![](https://images.ctfassets.net/3prze68gbwl1/6fmgnp5AhVVAvBOt3jxdmQ/330a9faef0f816db63f34f6cf49ab0a6/node.js-websockets.png)

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](https://www.pubnub.com/).

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](https://www.pubnub.com/docs/sdks) 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.](https://support.pubnub.com/hc/en-us/articles/360051496552-Does-PubNub-use-WebSockets-or-some-other-protocol-)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 :

```js
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.7.2.2.min.js"></script>
```

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

```js
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>" ; } })
```

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](https://admin.pubnub.com/#/register) 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 :

```js
pubnub.publish({ channel : 'ws-channel', message : inputMessage.value })
```

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 :

```js
<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>
```

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

[https://pubnubdevelopers.github.io/nodejs-websocket-examples/pubnub-client.html](https://pubnubdevelopers.github.io/nodejs-websocket-examples/pubnub-client.html)

![](https://images.ctfassets.net/3prze68gbwl1/75i6TIsSzEevRV2gsusTd1/2e8d9e8e9acba51f103a18a9a6bb27af/pubnub.png)

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](https://www.pubnub.com/tutorials/) et [démos](https://www.pubnub.com/demos/)ou encore la visite interactive en direct de [visite interactive en direct de PubNub](https://www.pubnub.com/tour/introduction/) 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](https://pubnub.com/blog/nodejs-websocket-programming-examples/)

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](https://www.pubnub.com/tour/introduction/) pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/signup/) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs) vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre [SDK](https://www.pubnub.com/docs).