Event Source VS Websocket

Introduction

Dans le développement d'applications web modernes, la communication en temps réel entre le client et le serveur est devenue une nécessité pour de nombreux cas d'utilisation. Deux des principales technologies permettant cette communication sont les WebSockets et EventSource (basé sur Server-Sent Events). Cet article compare ces deux technologies, en examinant leurs avantages, inconvénients et les scénarios où l'une peut être préférée à l'autre.

WebSocket

Qu'est-ce que WebSocket ?

WebSocket est un protocole de communication bidirectionnel TCP qui permet une interaction en temps réel entre le client et le serveur. Contrairement au protocole HTTP standard, qui suit un modèle requête-réponse, WebSocket permet aux deux parties d'envoyer des messages à tout moment.

Avantages de WebSocket

1. Communication Bidirectionnelle : Permet une communication full-duplex, où à la fois le client et le serveur peuvent envoyer des messages activement à tout moment.
2. Latence Réduite : Une fois la connexion établie, le WebSocket supporte un échange de messages avec une latence très faible.
3. Efficacité en Bande Passante : Après l'initialisation de la connexion, il n'y a plus de surcharge de requête HTTP, ce qui réduit la bande passante utilisée pour chaque message.

Inconvénients de WebSocket

1. Complexité : La gestion des connexions WebSocket est plus complexe, nécessitant une gestion explicite des connexions, des erreurs, et des fermetures.
2. Compatibilité des Proxies : Certains proxies et pares-feux ne supportent pas nativement WebSocket, ce qui peut nécessiter des configurations supplémentaires.
3. Sécurité : Les connexions WebSocket n'étant pas sur HTTP standard, leur intégration avec certaines infrastructures de sécurité peut être plus compliquée.

Exemple d'Utilisation en JavaScript (Frontend et Backend)

Backend (Node.js)

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });

    ws.send('something');
    setInterval(() => {
        ws.send(`Server time: ${new Date().toISOString()}`);
    }, 1000);
});

console.log('WebSocket server listening on ws://localhost:8080');

Frontend (JavaScript)

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
    console.log('WebSocket connection established');
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log('Message from server: ' + event.data);
};

socket.onclose = function(event) {
    console.log('WebSocket connection closed');
};

EventSource

Qu'est-ce que EventSource ?

EventSource utilise le protocole HTTP pour permettre une connexion unidirectionnelle, où le serveur peut envoyer des mises à jour en continu au client. Ceci est basé sur les Server-Sent Events (SSE).

Avantages de EventSource

1. Simplicité : API simple et intuitive à utiliser par rapport aux WebSockets.
2. Compatibilité HTTP : Fonctionne sur HTTP/1.1, ce qui facilite son utilisation derrière des proxies et des systèmes de cache standard.
3. Reconnexion Automatique : Gère automatiquement les reconnexions en cas de perte de connexion, simplifiant la gestion des erreurs.
4. Efficacité en Ressources : Utilise moins de ressources système et de bande passante que WebSocket pour de nombreux cas d'utilisation unidirectionnels.

Inconvénients de EventSource

1. Unidirectionnel : Ne permet pas une communication bidirectionnelle ; le client peut uniquement recevoir des messages du serveur.
2. Moins Adapté aux Scénarios Complexes : Pour des applications nécessitant une interaction en temps réel complexe et bidirectionnelle, EventSource peut ne pas être adéquat.

Exemple d'Utilisation en JavaScript (Frontend et Backend)

Backend (Node.js)

const http = require('http');

http.createServer((req, res) => {
    if (req.headers.accept && req.headers.accept === 'text/event-stream') {
        res.writeHead(200, {
            'Content-Type': 'text/event-stream',
            'Cache-Control': 'no-cache',
            'Connection': 'keep-alive'
        });

        res.write(`data: Connection established\n\n`);        
        
        setInterval(() => {
            res.write(`data: ${new Date().toISOString()}\n\n`);
        }, 1000);
    } else {
        res.writeHead(404);
        res.end();
    }
}).listen(8080, () => {
    console.log('Server listening on http://localhost:8080');
});

Frontend (HTML/JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EventSource Example</title>
</head>
<body>
    <div id="date"></div>
    <script>
        const eventSource = new EventSource('http://localhost:8080');
        eventSource.onmessage = function(event) {
            document.getElementById('date').textContent = event.data;
        };
    </script>
</body>
</html>

Comparaison et Cas d'Utilisation

• Scénarios de Communication Bidirectionnelle (comme les jeux en temps réel, les applications de chat, les collaborations en temps réel) : WebSocket est généralement plus adapté en raison de sa capacité à gérer des échanges de messages en temps réel dans les deux sens.
• Scénarios de Mises à Jour de Données / Notifications (comme les flux de données en temps réel, les notifications de serveur, les mises à jour en direct) : EventSource est souvent préférable grâce à sa simplicité et à son efficacité pour des mises à jour du serveur vers le client.
• Compatibilité et Déploiement : Les applications nécessitant une compatibilité avec les infrastructures HTTP existantes bénéficieront de l'utilisation d'EventSource.

Conclusion

Le choix entre WebSocket et EventSource dépend des besoins spécifiques de l'application. WebSocket excelle dans les applications nécessitant une communication bidirectionnelle complexe et en temps réel, tandis que EventSource offre une solution simple, efficace et facile à déployer pour les scénarios où des mises à jour unidirectionnelles sont suffisantes. En fonction des exigences de performance, de complexité et de compatibilité, les développeurs peuvent choisir la technologie qui leur convient le mieux. Mais dans la plupart des cas, EventSource suffira largement

‍