Websocket ? Qu’est-ce que c’est ?

websocket

Une websocket, qu’est-ce que c’est ??
Tout d’abord, prenons la définie de developer.mozilla.org :

WebSocket est une technologie évoluée qui permet d’ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.

Developer.mozilla.org

Nous allons éplucher ensemble ce qu’est cette bêbête, mais voyons dans un premier temps les défauts du protocole HTTP auxquel les websockets veulent pallier:

  • Le protocole HTTP est dit « stateless », c’est à dire qu’aucune information n’est gardé entre chaque requête. Ainsi, le navigateur doit rouvrir puis fermer la connexion à chaque appel. Ça peut paraître dérisoire, mais cela prend du temps !
  • Le plus important, le protocole HTTP ne peux uniquement être fait que du client (votre page web) vers le serveur.
    Le serveur ne peux pas envoyer d’information aux client de son propre chef. Ainsi, si quelque chose de nouveau se passe, il faudra attendre la prochaine requête du client pour obtenir l’information. Pas top pour les informations en temps réels.

Qu’est-ce que c’est qu’une websocket ?

On va maintenant définir ce qu’est une websocket et comment cela fonctionne.

Tout d’abord, quand on parle de websocket, on parle en fait du protocole websocket.
Tout comme HTTP, l’abréviation pour le protocole websocket est ws. Pour du websocket sécurisé, c’est tout simple, on rajoute un s ! On a donc le l’abréviation wss !
Exemple: wss://monsuperdomaine.fr/chemin/vers/le/serveur

Tout comme HTTP, ws utilise le port 80 et wss le port 443. Cependant il est conseillé d’utiliser un certificat ssl pour passer par le 443 car il arrive que les proxy gère mal les sockets sur le port 80.

Websocket c’est donc une norme pour communiquer en temps réel entre un client et un serveur.
On ouvre qu’une seule fois la connexion, on déclenche et on reçoit autant d’événements que l’on veux, puis on ferme la connexion.

Des événements ? Kézako ?

Remarque d’un lecteur lambda

Alors oui, quand on utilise des sockets, on émet des événements, aussi bien du côté client que serveur.

Exemple:

  • Un utilisateur poste un message, on émet l’évenement ‘un message est posté !’
  • Le serveur reçoit l’événement, il le traite et informe tous les autres utilisateurs du chat qu’un message est posté en émettant un événement: ‘un nouveau message est arrivé !’

Vous avez compris ? Non ? C’est pas grave, on va passer sur un exemple.

Démonstration par la pratique

Websocket nous voilà !
Websocket nous voilà !

On va utiliser un serveur websocket public pour faire nos tests. Ce serveur renvoi simplement le même contenu que ce qu’on lui envoi ! Pratique pour des tests ?

Vous pouvez ouvrir la console de votre navigateur et copier coller le bout de code suivant dedans pour le tester:

//On se connecte au serveur
websocket = new WebSocket('ws://echo.websocket.org');

// On écoute l'événement de connexion au serveur et on déclenche la fonction
websocket.onopen = (e) => {
      console.log('On est connecté !');
      

      // On émet un événement simple avec un message comme contenu
      websocket.send('un message de test !');

      // On émet un événement en différé
      setTimeout(() => websocket.send('événement différé !'), 3000);

      // On envoi plein de données !!!
      for (var i=0; i < 15; i++) {
        websocket.send('N°' + i + '  envoyé à :' + new Date());
      }
}

// On écoute l'arrivé de message et on exécute la fonction associée 
websocket.onmessage = (e) => {
      // On affiche la réponse
      console.log('Réponse du serveur: ' + e.data);
}

Déjà première chose que vous devez vous dire en exécutant le code:

Ouahh ! C’est trop rapide !!

Un lecteur lambda

Oui c’est très rapide ! Même plus précisément, la connexion prend un peu plus de temps mais le reste est presque instantané.

Enfin pour finir, nous avons surtout vu le côté client, mais c’est presque le même principe côté serveur.
Pour créer un serveur websocket, il vous faut de préférence un langage qui gère les entrées/sorties de façon non bloquante.
Nodejs ou Python font très bien l’affaire !


Sources


Articles récents

Websocket ? Qu’est-ce que c’est ?

Laisser un commentaire

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

Retour en haut