Introduction aux WebSockets

Les WebSockets sont une alternative à la communication HTTP dans les applications Web. Ils offrent un canal de communication bidirectionnel de longue durée entre le client et le serveur. Apprenez à les utiliser pour effectuer des interactions réseau

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

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

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

Prise en charge du navigateur pour WebSockets

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

Browser support for 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 requête / réponse: le serveur renvoie certaines données lorsque le client en fait la demande.

Avec WebSockets:

lele serveur peut envoyer un message au clientsans que le client ne demande explicitement quelque chose
le client et le serveur peuventse parler simultanément
très peu de surcharge de donnéesdoit être échangé pour envoyer des messages. Cela signifie uncommunication à faible latence.

WebSocketssont super pourtemps réeletlongévitéles communications.

HTTPest génial pouréchange de données occasionnelet 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 temps système.

WebSockets sécurisés

Utilisez toujours le protocole sécurisé et crypté pour WebSockets,wss://.

ws://fait référence à la version WebSockets non sécurisée (lehttp://des 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)

connectionest unWebSocketobjet.

Lorsque la connexion est établie avec succès, leopenl'événement est déclenché.

Écoutez-le en attribuant une fonction de rappel auonopenpropriété de laconnectionobjet:

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

S'il y a une erreur, leonerrorle rappel de fonction 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 facilement à l'intérieur duonopenfonction de rappel:

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

Recevoir des données du serveur à l'aide de WebSockets

Écouter avec une fonction de rappel activéeonmessage, qui est appelée lorsque lemessagel'événement est reçu:

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

Implémenter un serveur dans Node.js

wsest une bibliothèque WebSockets populaire pourNode.js.

Nous l'utiliserons pour créer un serveur WebSockets. Il peut également être utilisé pour implémenter un client et utiliser WebSockets pour communiquer entre deux services de backend.

Installez-le en utilisantnpm:

npm init
npm install ws

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

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })
wss.on(‘connection’, (ws) => {
ws.on(‘message’, (message) => {
console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">)
})
ws.send(‘ho!’)
})

Ce code crée un nouveau serveur sur le port 8080 (le port par défaut pour WebSockets), et ajoute une fonction de rappel lorsqu'une connexion est établie, en envoyantho!au client et consigner 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

Débogage des Websockets

Chrome et Firefox ont un moyen pratique de visualiser toutes les informations envoyées via WebSockets. Leur support DevTools s'améliore constamment. Firefox au moment de la rédaction de cet article dispose de l'outil de débogage le plus utile et le plus informatif.

Dans les deux cas, vous regardez dans le panneau Réseau et choisissez WS pour filtrer uniquement les connexions WebSockets.

J'ai pris ces captures d'écran de Firefox (Developer Edition) en action:

Firefox headers

Firefox detail

Les outils de développement de Firefox peuvent faire bien plus que ce que j'ai montré. Dans l'exemple que j'ai utilisé pour tester, j'envoie juste une chaîne, mais vous pouvez inspecter toutes les données envoyées de manière plus organisée:

Data in Firefox

Vérifiercet article sur Mozilla Hackspour en savoir plus sur l'utilisation de cet outil.

Voici une capture d'écran de Chrome, qui, espérons-le, améliorera bientôt ses outils de débogage WebSockets:

Chrome