WebSockets

Comment fonctionne WebSocket

Les WebSockets sont un protocole de communication bidirectionnelle qui permet une interaction en temps réel entre un client (généralement un navigateur web) et un serveur. Contrairement aux requêtes HTTP traditionnelles qui sont unidirectionnelles (le client envoie une requête, le serveur répond), les WebSockets permettent une connexion persistante où les deux parties peuvent envoyer des messages à tout moment.

Voici un aperçu de leur fonctionnement :

Établissement de la Connexion

Initialisation via HTTP :
- La connexion WebSocket commence par une requête HTTP classique (upgrade request) du client au serveur. Le client demande au serveur de passer du protocole HTTP au protocole WebSocket.
- La requête contient un en-tête spécial Upgrade: websocket.
Réponse du Serveur :
- Si le serveur supporte les WebSockets, il répond avec un code d’état HTTP 101 (Switching Protocols) et confirme le changement de protocole.

Communication Bidirectionnelle

Connexion Persistante :
- Une fois la connexion établie, elle reste ouverte, permettant une communication en temps réel et bidirectionnelle. Les messages peuvent être échangés à tout moment sans la surcharge des requêtes HTTP classiques.
Échange de Messages :
- Les messages WebSocket sont encapsulés dans des frames. Chaque frame contient une charge utile (payload) et des métadonnées, telles que le type de données (texte, binaire) et si c’est le dernier fragment d’un message.
- Le client et le serveur peuvent envoyer des frames de données indépendamment l’un de l’autre.

Fermeture de la Connexion

La connexion peut être fermée par l’une ou l’autre des parties en envoyant un frame de fermeture (close frame). Une fois la fermeture initiée, l’autre partie doit répondre avec un frame de fermeture pour terminer proprement la connexion.

Avantages des WebSockets

Faible Latence : Grâce à la connexion persistante, il n’y a pas de latence liée à l’établissement de connexions répétées.
Communication Temps Réel : Permet des mises à jour instantanées, ce qui est crucial pour les applications comme les jeux en ligne, les chats, ou les notifications en temps réel.
Réduction de la Surcharge : Moins de surcharge de réseau par rapport aux requêtes HTTP répétées, ce qui améliore l’efficacité.

Exemple de Code : Client (JavaScript)

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('Client connecté');

    socket.on('message', (message) => {
        console.log('Message reçu : ', message);
        socket.send('Bonjour client!');
    });

    socket.on('close', () => {
        console.log('Connexion fermée');
    });

    socket.on('error', (error) => {
        console.log('Erreur : ', error);
    });
});

Serveur (Node.js avec 'ws' library)

const socket = new WebSocket('ws://example.com/socket');

// Événements de connexion
socket.onopen = (event) => {
    console.log('Connexion ouverte');
    socket.send('Bonjour serveur!');
};

// Réception des messages
socket.onmessage = (event) => {
    console.log('Message reçu : ', event.data);
};

// Fermeture de la connexion
socket.onclose = (event) => {
    console.log('Connexion fermée : ', event);
};

// Gestion des erreurs
socket.onerror = (error) => {
    console.log('Erreur : ', error);
};

Conclusion

Les WebSockets sont particulièrement utiles dans les applications nécessitant une interaction en temps réel et une faible latence, rendant l’expérience utilisateur plus fluide et interactive.

Exemple de code WebSocket avec ESPAsyncWebServer

#include  // Utilisez  pour ESP8266
#include 
#include 

// Remplacez par vos informations de réseau
const char* ssid = "votre_SSID";
const char* password = "votre_mot_de_passe";

// Créez un objet serveur web asynchrone sur le port 80
AsyncWebServer server(80);
// Créez un objet WebSocket sur le chemin "/ws"
AsyncWebSocket ws("/ws");

// Gestion des événements WebSocket
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
  if (type == WS_EVT_CONNECT) {
    Serial.println("Client connecté");
    client->text("Bienvenue au WebSocket server!");
  } else if (type == WS_EVT_DISCONNECT) {
    Serial.println("Client déconnecté");
  } else if (type == WS_EVT_DATA) {
    Serial.println("Message reçu");
    client->text("Message reçu");
  }
}

void setup() {
  // Initialisez la communication série pour le débogage
  Serial.begin(115200);

  // Connectez-vous au Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connexion au Wi-Fi...");
  }
  Serial.println("Connecté au Wi-Fi!");

  // Définir la fonction de gestion des événements WebSocket
  ws.onEvent(onWsEvent);
  // Ajouter le gestionnaire WebSocket au serveur
  server.addHandler(&ws);

  // Démarrez le serveur
  server.begin();
}

void loop() {
  // Rien à faire dans la boucle principale
}

Explication de l'exemple

Configuration Wi-Fi :
- Connecte l’ESP8266 ou ESP32 au réseau Wi-Fi.
Création du serveur Web et WebSocket :
- AsyncWebServer server(80); : Crée un serveur web asynchrone sur le port 80.
- AsyncWebSocket ws("/ws"); : Crée un WebSocket sur le chemin /ws.
Gestion des événements WebSocket :
- onWsEvent est une fonction qui gère les événements WebSocket tels que la connexion, la déconnexion et la réception de messages.
Démarrage du serveur :
- Le serveur Web et le WebSocket sont démarrés, prêts à gérer les connexions des clients.

Utilisations courantes des WebSockets

Applications en temps réel : Chats, notifications en direct, jeux en ligne.
Tableaux de bord et monitoring : Mises à jour instantanées des données de capteurs, visualisation en temps réel.
Collaborations : Éditeurs de documents en temps réel, applications collaboratives.

Les WebSockets sont puissants pour les applications nécessitant une communication instantanée et bidirectionnelle entre le client et le serveur, offrant une expérience utilisateur plus fluide et réactive.

Domotique – informatique – électronique – dictionnaire – projets