Node.js WebSocket Programming Examples

Les WebSockets sont un excellent choix de technologie lorsque vous concevez votre application en temps réel. Imaginez une interface utilisateur d’app où vous voyez les prix des actions en temps réel. Plus vite l’utilisateur est informé de la variation du cours d’une action, plus vite il peut réagir, et exécuter un ordre d’achat ou de vente. L’argent est en jeu.

Stock Ticker avec PubNub et Golang

Qu’est-ce qu’une WebSocket ?

La WebSocket est son propre protocole de couche 7, similaire à HTTP. Les WebSockets créent une connexion full-duplex pour envoyer des messages de client à serveur, ou de serveur à client à tout instant. Ce modèle est bien supérieur à la demande-réponse HTTP lorsqu’une application nécessite des systèmes pour obtenir les dernières données ASAP.

Quand faut-il écrire du code WebSocket ?

En dehors d’une application de suivi des actions ou des crypto-monnaies en temps réel, d’autres cas d’utilisation en temps réel courants pour les WebSockets sont :

  • Applications de chat
  • Suivi en direct de l’emplacement sur une carte
  • Interaction en direct avec le public
  • Soumission d’enchères en ligne
  • Mises à jour des dispositifs IoT
  • Orchestration d’appels WebRTC

Les WebSockets créent une connexion par socket TCP entre plusieurs dispositifs ou processus. Une fonctionnalité similaire peut être mise en œuvre en utilisant HTTP Long Polling ou en utilisant un service comme PubNub. Passons en revue quelques bases de la programmation de socket et de WebSocket avec Node.js.

Exemple de socket Node.js

Disons que vous devez écrire une application serveur, et que vous avez choisi Node.js comme langage de programmation. Vos utilisateurs peuvent être n’importe quel type de client, comme un navigateur web, une application mobile, un dispositif IoT, un client Node.js ou tout ce qui connaît TCP.

Vous devez servir des actifs à vos utilisateurs sur HTTP, mais vous devez également leur fournir des flux pour la messagerie bidirectionnelle. Nous pouvons accomplir cela dans une seule application serveur Node.js !

Le code de la vidéo, et aussi de cet article, est disponible dans mon dépôt GitHub Node.js WebSocket Examples.

D’abord, nous allons passer en revue du code de socket simple, suivi du code WebSocket. Si vous servez déjà des actifs avec quelque chose comme Express.js, Hapi, ou la bibliothèque HTTP native de Node.js, nous pouvons sauter dans le code socket.

Code JavaScript du serveur socket

// Node.js socket server scriptconst net = require('net');// Create a server objectconst server = net.createServer((socket) => { socket.on('data', (data) => { console.log(data.toString()); }); socket.write('SERVER: Hello! This is server speaking.
'); socket.end('SERVER: Closing connection now.
');}).on('error', (err) => { console.error(err);});// Open server on port 9898server.listen(9898, () => { console.log('opened server on', server.address().port);});

Ce script exécute un serveur socket Node.js sur le port 9898. Chaque fois qu’un client se connecte à cette application serveur (IP_ADDRESS:9898), le serveur envoie au client une chaîne de caractères sur le socket ouvert. Cela dit “SERVER : Hello ! C’est le serveur qui parle”. Chaque fois que le client envoie des données au serveur, le script Node.js enregistre le contenu dans le gestionnaire d’événements ‘data’.

Code JavaScript du client socket

Voici notre script client socket Node.js, qui peut se connecter au serveur socket Node.js ci-dessus.

// Node.js socket client scriptconst net = require('net');// Connect to a server @ port 9898const client = net.createConnection({ port: 9898 }, () => { console.log('CLIENT: I connected to the server.'); client.write('CLIENT: Hello this is client!');});client.on('data', (data) => { console.log(data.toString()); client.end();});client.on('end', () => { console.log('CLIENT: I disconnected from the server.');});

Le script client tente de se connecter à localhost:9898. Si la connexion réussit, alors le client envoie une chaîne au serveur sur le socket ouvert. Elle dit “CLIENT : Hello this is client !” Chaque fois que le serveur envoie certaines données au client, ce dernier les enregistre dans le gestionnaire d’événements ‘data’.

Voici à quoi ressemble la sortie des scripts de socket Node.js client et serveur exécutés en ligne de commande.

Interaction entre le serveur Node.js Socket et le client sur la ligne de commande

Exemple de WebSocket Node.js

Écrire du code de socket est amusant, mais lorsque vous essayez de l’implémenter dans un navigateur web, c’est plutôt compliqué. Ce problème a été abordé par tous les principaux navigateurs dans leur action pour prendre en charge le protocole WebSocket dès la boîte ! De cette façon, les pages Web qui utilisent les sockets peuvent se charger très rapidement car les bibliothèques frontales pour la gestion du protocole sont déjà dans les applications du navigateur. Pas besoin de récupérer de grosses bibliothèques JS chaque fois qu’un utilisateur visite la page web de votre application en temps réel.

Serveur WebSocket Node.js

Echangeons notre code de serveur de sockets Node.js contre du code de serveur WebSocket ! De cette façon, nous serons en mesure de servir facilement les utilisateurs de notre navigateur web. Nous allons passer en revue quelques JS vanille pour WebSockets qui peuvent être mis en œuvre dans quelque chose comme une application React.js.

Ce code utilise la bibliothèque native “http” de Node.js et un package NPM WebSocket tiers pour créer un serveur WebSocket. Il a la même fonctionnalité que le script socket que nous avons écrit plus tôt. Cette fois, nous utilisons le protocole officiel WebSocket pour envoyer de manière bidirectionnelle nos données entre le client et le serveur.

// Node.js WebSocket server scriptconst http = require('http');const WebSocketServer = require('websocket').server;const server = http.createServer();server.listen(9898);const wsServer = new WebSocketServer({ httpServer: server});wsServer.on('request', function(request) { const connection = request.accept(null, request.origin); connection.on('message', function(message) { console.log('Received Message:', message.utf8Data); connection.sendUTF('Hi this is WebSocket server!'); }); connection.on('close', function(reasonCode, description) { console.log('Client has disconnected.'); });});

Client du navigateur WebSocket de Node.js

Puis, nous avons notre fichier HTML qui se charge dans les navigateurs web des clients. Remarquez que la classe WebSocket dans le navigateur JS n’a pas de déclaration. C’est parce que les navigateurs modernes donnent aux développeurs un accès automatique à cette classe dans leur JavaScript frontal !

<!DOCTYPE html><html><head> <title>WebSocket Playground</title></head><body></body><script>const ws = new WebSocket('ws://localhost:9898/');ws.onopen = function() { console.log('WebSocket Client Connected'); ws.send('Hi this is web client.');};ws.onmessage = function(e) { console.log("Received: '" + e.data + "'");};</script></html>

Nous pouvons faire avancer rapidement notre exemple amusant de poignée de main client-serveur ! Voici à quoi ressemblent les sorties du script serveur et de la console JS du navigateur web:

Node.js WebSocket Full Stack App

Peer-to-Peer Message Passing

Les échantillons ci-dessus sont des implémentations de code intuitives pour le développement d’applications en temps réel. Et si nous voulions diffuser des données en continu d’utilisateur à utilisateur ? Et si nous voulons le faire sans mettre en œuvre la logique de routage compliquée sur notre serveur pour connecter deux utilisateurs ou plus ? Nous pouvons accomplir tout cela à moindre coût, en toute sécurité, et sans avoir à faire tourner une infrastructure coûteuse.

Nous avons accès à une infrastructure en temps réel impressionnante et hébergée avec PubNub. Nous pouvons évoluer à l’infini vers n’importe quel volume d’utilisateurs. PubNub offre un faible coût, une tarification basée sur les transactions avec des API de messagerie faciles à utiliser. Prenons un exemple de messagerie peer-to-peer. Au fait, cela peut également être mis en œuvre pour diffuser des données de client à serveur, ou de serveur à client, en plus du peer-to-peer.

Avant d’essayer les scripts suivants, vous devez obtenir vos clés API PubNub gratuites. Elles fonctionnent jusqu’à 1 million de transactions gratuites par mois, pour toujours. Utilisez ce formulaire pour obtenir des clés d’API gratuites dès maintenant.

PubNub Data Streaming

Nous pouvons envoyer des données de manière bidirectionnelle entre des services, des clients ou des apps serveur en utilisant le réseau mondial de flux de données PubNub. Il existe un kit de développement logiciel pour chaque langage et appareil populaire. Voici le code de base du navigateur JS ou Node.js pour utiliser le réseau Pub/Sub. Celui-ci publie un message chaque fois que l’utilisateur appuie sur la touche retour.

const PubNub = require('pubnub'); // or in browser: <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.24.4.js"></script>const pubnub = new PubNub({ publishKey: 'your_pubnub_publish_api_key_here', subscribeKey: 'your_pubnub_subscribe_api_key_here'});pubnub.subscribe({ channels: });pubnub.addListener({ message: (pubnubMessage) => { console.log('New Message:', pubnubMessage.message); }});// Use Control + C to end the programprocess.stdin.on('data', (key) => { // When the user presses the return key if (key.toString() === '
') { pubnub.publish({ message: 'Hello from client 1!', channel: 'my_channel' }); }});

Notez que l’objet “process” n’est pas accessible dans le JS du navigateur Web, mais un gestionnaire d’événements de pression de touche similaire peut accomplir la même fonctionnalité.

object.addEventListener('keypress',(event) => {});

PubNub Node.js SDK

Voici la documentation pour le PubNub JavaScript SDK.

Lorsque nous exécutons le script ci-dessus dans 2 fenêtres de terminal, nous pouvons voir Pub/Sub en temps réel en action. J’ai réalisé un deuxième script avec le même code, sauf que le message publié indique qu’il provient du client numéro “2”. Veillez à installer le SDK PubNub Node.js avant d’essayer d’exécuter les scripts sur votre ligne de commande.

npm install pubnub

PubNub Node.js Pub/Sub Example Screenshot

C’est tout ce qu’il y a à faire. J’espère que vous avez pu glaner quelques informations précieuses dans ce tutoriel sur le streaming de données WebSocket de pair à pair, de client à serveur et de serveur à client. N’hésitez pas à nous contacter à l’adresse [email protected] si vous avez besoin d’aide ou si vous avez des questions sur la création d’une application en temps réel. Nous adorons entendre vos idées !

Pour en savoir plus sur la mise en œuvre de JavaScript avec PubNub, jetez un œil à nos tutoriels de l’article de blog React Native pour le suivi de la géolocalisation en temps réel, une application de chat en temps réel, et plus encore ! Il existe également un article de blog sur la programmation de socket en Python. Merci de votre lecture ! Si vous avez aimé ce post, abonnez-vous à notre newsletter !

.

Leave a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *