Articles

Utiliser les WebSockets avec Node.js

Le Bootcamp JavaScript Full-Stack 2021 est MAINTENANT OUVERT AUX INSCRIPTIONS !

Les WebSockets sont une alternative à la communication HTTP dans les applications Web.

Elles offrent un canal de communication bidirectionnel de longue durée entre le client et le serveur.

Une fois établi, le canal est maintenu ouvert, offrant une connexion très rapide avec une latence et une surcharge faibles.

Prise en charge des WebSockets par les navigateurs

Les WebSockets sont prises en charge par tous les navigateurs modernes.

Gestion des navigateurs pour les WebSockets

Comment les WebSockets diffèrent de HTTP

HTTP est un protocole très différent, et aussi une manière différente de communiquer.

HTTP est un protocole de demande/réponse : le serveur renvoie certaines données lorsque le client les demande.

Avec les WebSockets :

  • le serveur peut envoyer un message au client sans que ce dernier ne demande explicitement quelque chose
  • le client et le serveur peuvent se parler simultanément
  • très peu de données doivent être échangées pour envoyer des messages. Cela signifie une communication à faible latence.

LesWebSockets sont parfaits pour les communications en temps réel et à longue durée de vie.

HTTP est parfait pour les échanges de données occasionnels et les interactions initiées par le client.

HTTP est beaucoup plus simple à mettre en œuvre, tandis que les WebSockets nécessitent un peu plus de surcharge.

Secured WebSockets

Toujours utiliser le protocole sécurisé et crypté pour les WebSockets, wss://.

ws:// fait référence à la version non sécurisée de WebSockets (la http:// de WebSockets), et doit être évitée pour des raisons évidentes.

Créer une nouvelle connexion WebSockets

const url = 'wss://myserver.com/something'const connection = new WebSocket(url)

connection est un objet WebSocket.

Lorsque la connexion est établie avec succès, l’événement open est déclenché.

Écoutez-le en affectant une fonction de rappel à la propriété onopen de l’objet connection :

connection.onopen = () => { //...}

En cas d’erreur, le callback de la fonction onerror est déclenché :

connection.onerror = error => { console.log(`WebSocket error: ${error}`)}

Envoi de données au serveur à l’aide de WebSockets

Une fois la connexion ouverte, vous pouvez envoyer des données au serveur.

Vous pouvez le faire de manière pratique à l’intérieur de la onopen fonction de rappel :

connection.onopen = () => { connection.send('hey')}

Recevoir des données du serveur en utilisant WebSockets

Écouter avec une fonction de rappel sur onmessage, qui est appelée lorsque l’événement message est reçu :

connection.onmessage = e => { console.log(e.data)}

Implémenter un serveur WebSockets dans Node.js

ws est une bibliothèque WebSockets populaire pour Node.js.

Nous allons l’utiliser pour construire un serveur WebSockets. Elle peut également être utilisée pour mettre en œuvre un client, et utiliser les WebSockets pour communiquer entre deux services backend.

Il s’installe facilement en utilisant

yarn inityarn add ws

Le code que vous devez écrire est très faible :

const WebSocket = require('ws')const wss = new WebSocket.Server({ port: 8080 })wss.on('connection', ws => { ws.on('message', message => { console.log(`Received message => ${message}`) }) ws.send('ho!')})

Ce code crée un nouveau serveur sur le port 8080 (le port par défaut pour les WebSockets), et ajoute une fonction callback lorsqu’une connexion est établie, envoyant ho! au client, et enregistrant les messages qu’il reçoit.

Voir un exemple en direct sur Glitch

Voici un exemple en direct d’un serveur WebSockets : https://glitch.com/edit/#!/flavio-websockets-server-example

Voici un client WebSockets qui interagit avec le serveur : https://glitch.com/edit/#!/flavio-websockets-client-example

Téléchargez mon manuel Node.js gratuit

Le Bootcamp JavaScript Full-Stack 2021 EST MAINTENANT OUVERT AUX INSCRIPTIONS JUSQU’AU MARDI PROCHAIN ! Ne manquez pas cette opportunité, inscrivez-vous AUJOURD’HUI !

Plus de tutoriels sur Node:

  • Dépendances Npm et devDependances
  • Comment utiliser Sequelize pour interagir avec PostgreSQL
  • Un bref historique de Node.js
  • Utiliser WebSockets avec Node.js
  • Comment obtenir à la fois le corps analysé et le corps brut dans Express
  • Comment utiliser promises et await avec les fonctions basées sur les callbacks de Node.js
  • Comment installer Node.js
  • Une introduction au gestionnaire de paquets npm
  • Interagir avec l’API Google Analytics en utilisant Node.js

.

Laisser un commentaire

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