HTML - Événements envoyés par le serveur

Comment fonctionnent les événements envoyés par le serveur

Les événements envoyés par le serveur (SSE) sont une technologie qui permet à un serveur d'envoyer des données à un navigateur client en temps réel. L'architecture des SSE repose sur un modèle de communication unidirectionnel, où le serveur envoie des données au client, mais le client n'envoie pas de données au serveur.

Dans les SSE, le client se connecte au serveur en utilisant l'API EventSource. Le serveur maintient cette connexion ouverte et envoie des événements au client chaque fois que de nouvelles données sont disponibles. Le client reçoit ces événements et les traite au fur et à mesure de leur arrivée, mettant à jour la page web ou déclenchant d'autres actions selon les besoins.

La communication entre le client et le serveur dans les SSE se fait via une connexion HTTP standard. Le serveur envoie les événements sous forme de flux de données textuelles, chaque événement étant séparé par une ligne vide. Le client utilise l'API EventSource pour écouter ces événements et les gérer en conséquence.

const eventSource = new EventSource('http://example.com/sse');

eventSource.onmessage = function(event) {
    console.log(event.data);
};

Une différence clé entre les SSE et les WebSockets est le modèle de communication. Alors que les SSE sont unidirectionnels, avec le serveur envoyant des données au client, les WebSockets permettent une communication bidirectionnelle, où le client et le serveur peuvent s'envoyer des données mutuellement.

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

socket.onopen = function(event) {
    socket.send('Hello Server!');
};

socket.onmessage = function(event) {
    console.log(event.data);
};

Une autre différence réside dans le format des messages. Dans les SSE, les messages sont envoyés sous forme de texte brut, chaque message consistant en une ou plusieurs lignes de données textuelles. En revanche, les WebSockets utilisent un format de message binaire, qui peut être plus efficace pour l'envoi de grandes quantités de données.

Malgré ces différences, les SSE et les WebSockets ont tous deux leur place dans le développement web moderne. Les SSE conviennent bien aux scénarios où le serveur doit envoyer des mises à jour au client en temps réel, comme les fils d'actualités ou les tickers boursiers. Les WebSockets, quant à eux, sont idéaux pour les applications nécessitant une communication bidirectionnelle, comme les applications de chat ou les jeux multijoueurs.

Configuration des événements envoyés par le serveur

La configuration des événements envoyés par le serveur implique de paramétrer le serveur et le client. Côté serveur, vous devez mettre en place un script qui envoie des événements au client. Côté client, vous devez créer un objet EventSource pour recevoir et gérer ces événements.

const express = require('express');
const app = express();

app.get('/sse', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    setInterval(() => {
        const eventData = `data: L'heure du serveur est ${new Date()}\n\n`;
        res.write(eventData);
    }, 1000);
});

app.listen(3000, () => {
    console.log('Serveur démarré sur le port 3000');
});

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: L'heure du serveur est : {$time}\n\n";
flush();
?>

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    console.log(event.data);
};

eventSource.onerror = (error) => {
    console.error('Erreur EventSource :', error);
};

eventSource.addEventListener('timestamp', (event) => {
    console.log('Événement timestamp :', event.data);
});

Envoi et réception d'événements

app.get('/sse', (req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
    });

    const sendEvent = (eventType, data) => {
        const eventData = `event: ${eventType}\ndata: ${JSON.stringify(data)}\n\n`;
        res.write(eventData);
    };

    // Envoie un événement "timestamp" chaque seconde
    setInterval(() => {
        const timestamp = new Date().toLocaleTimeString();
        sendEvent('timestamp', { time: timestamp });
    }, 1000);

    // Envoie un événement "message" lorsqu'une condition est remplie
    if (someCondition) {
        sendEvent('message', { text: 'Bonjour du serveur !' });
    }
});

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Message reçu :', data.text);
};

eventSource.addEventListener('timestamp', (event) => {
    const data = JSON.parse(event.data);
    console.log('Horodatage reçu :', data.time);
});

eventSource.addEventListener('userConnected', (event) => {
    const data = JSON.parse(event.data);
    console.log(`L'utilisateur ${data.userId} s'est connecté`);
});

eventSource.addEventListener('userDisconnected', (event) => {
    const data = JSON.parse(event.data);
    console.log(`L'utilisateur ${data.userId} s'est déconnecté`);
});

Gestion des erreurs et reconnexion

Lors de l'utilisation des événements envoyés par le serveur (SSE), il est important de gérer les erreurs et de se reconnecter au serveur en cas de perte de connexion. Cela permet de créer une application plus fiable et robuste.

La gestion des erreurs côté client implique l'écoute de l'événement onerror sur l'objet EventSource. Cet événement est déclenché lorsqu'une erreur se produit, comme un problème de réseau ou un problème avec le script côté serveur.

const eventSource = new EventSource('/sse');

eventSource.onerror = (error) => {
    console.error('Erreur EventSource:', error);
    // Effectuer la gestion des erreurs, comme mettre à jour l'interface utilisateur ou enregistrer l'erreur
};

La reconnexion au serveur après une perte de connexion est un autre aspect important de la gestion des erreurs. Par défaut, l'objet EventSource essaiera de se reconnecter au serveur si la connexion est fermée. Cependant, vous pouvez contrôler le comportement de reconnexion en utilisant les propriétés withCredentials et reconnectionTime.

const eventSource = new EventSource('/sse', {
    withCredentials: true,
    reconnectionTime: 5000
});

La propriété withCredentials, lorsqu'elle est définie sur true, envoie les cookies et les en-têtes d'authentification avec la requête EventSource, ce qui peut être utile pour maintenir une session lors des reconnexions.

La propriété reconnectionTime définit le temps (en millisecondes) à attendre avant de tenter de se reconnecter au serveur. Par défaut, l'objet EventSource utilisera une stratégie de backoff exponentiel, où le temps de reconnexion augmente à chaque tentative échouée.

Prise en charge des navigateurs et solutions de repli

Les Server Sent Events (SSE) sont pris en charge par la plupart des navigateurs web modernes, notamment Chrome, Firefox, Safari et Edge. Cependant, certains navigateurs plus anciens peuvent ne pas prendre en charge nativement les SSE, ce qui signifie que vous devez prévoir des options de repli pour maintenir la compatibilité.

En 2023, la prise en charge globale des SSE par les navigateurs est d'environ 95%, selon Can I Use. Cela signifie que la majorité des utilisateurs pourront utiliser les SSE sans problème. Néanmoins, il est important de prévoir des options de repli pour les 5% d'utilisateurs restants qui pourraient utiliser des navigateurs plus anciens ou moins courants.

Une option de repli pour les navigateurs qui ne prennent pas en charge les SSE est d'utiliser le long-polling. Le long-polling est une technique où le client envoie une requête au serveur et attend une réponse. Si le serveur n'a pas de nouvelles données, il garde la requête ouverte jusqu'à ce que de nouvelles données soient disponibles, puis renvoie la réponse au client. Le client envoie alors immédiatement une autre requête, répétant ainsi le processus. Bien que moins efficace que les SSE, le long-polling peut offrir un niveau similaire de fonctionnalité en temps réel.

Une autre option de repli est d'utiliser les WebSockets. Les WebSockets fournissent un canal de communication bidirectionnel entre le client et le serveur, permettant un transfert de données en temps réel dans les deux sens. Si un navigateur ne prend pas en charge les SSE, vous pouvez vérifier s'il prend en charge les WebSockets et les utiliser comme solution de repli.

Si vous préférez une approche plus transparente, vous pouvez utiliser des polyfills ou des bibliothèques qui offrent une prise en charge des SSE pour les navigateurs plus anciens. Un polyfill est un morceau de code qui reproduit la fonctionnalité d'une API de navigateur plus récente dans un navigateur plus ancien. Par exemple, le polyfill EventSource de Yaffle peut être utilisé pour ajouter la prise en charge des SSE aux navigateurs plus anciens qui n'ont pas de support natif.

Il existe également des bibliothèques comme Pusher et Socket.IO qui offrent des fonctionnalités en temps réel en utilisant diverses techniques, notamment les SSE, les WebSockets et le long-polling. Ces bibliothèques peuvent abstraire les différences entre les navigateurs et fournir une API cohérente pour la communication en temps réel.

<!-- Inclure le polyfill EventSource -->
<script src="https://cdn.jsdelivr.net/npm/event-source-polyfill@1.0.9/src/eventsource.min.js"></script>

<script>
if (!window.EventSource) {
    // Si le navigateur ne prend pas en charge EventSource, utiliser le polyfill
    window.EventSource = window.EventSourcePolyfill;
}

const eventSource = new EventSource('/sse');

eventSource.onmessage = (event) => {
    console.log(event.data);
};
</script>

En incluant le polyfill EventSource et en vérifiant si le navigateur prend en charge EventSource nativement, vous pouvez vous assurer que la fonctionnalité SSE est disponible pour tous les utilisateurs, quel que soit leur navigateur.

En résumé, bien que les SSE soient pris en charge par la plupart des navigateurs modernes, il est important de prévoir des options de repli et des polyfills pour les navigateurs plus anciens. En utilisant des techniques comme le long-polling, les WebSockets, ou des bibliothèques qui abstraient les différences entre navigateurs, vous pouvez offrir une expérience en temps réel cohérente à tous vos utilisateurs.

Avantages et Inconvénients des SSE

Les Server Sent Events (SSE) présentent plusieurs avantages et inconvénients par rapport à d'autres technologies de communication en temps réel comme les WebSockets et le long-polling.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Cas d'utilisation et exemples de SSE

Les Server-Sent Events (SSE) conviennent à de nombreux scénarios d'applications web en temps réel. Examinons quelques cas d'utilisation courants et des exemples où les SSE peuvent être utilisés pour offrir une meilleure expérience utilisateur.

Un cas d'utilisation courant des SSE concerne les mises à jour de données en temps réel. Une application de cotation boursière pourrait utiliser les SSE pour envoyer des mises à jour en temps réel des cours des actions au client. Chaque fois qu'un cours change sur le serveur, celui-ci peut envoyer un événement au client avec le prix mis à jour. Le client peut alors actualiser l'interface utilisateur pour afficher le nouveau prix sans que l'utilisateur ait besoin de rafraîchir la page.

const express = require('express');
const app = express();

// Données boursières fictives
let stockData = {
    'AAPL': 150.23,
    'GOOGL': 2321.01,
    'MSFT': 300.45
};

// Envoyer des mises à jour boursières toutes les 5 secondes
setInterval(() => {
    // Mettre à jour les cours de manière aléatoire
    for (const symbol in stockData) {
        stockData[symbol] += Math.random() * 10 - 5;
    }

    // Envoyer les données boursières mises à jour aux clients
    sendEvent('stockUpdate', stockData);
}, 5000);

// ...

const eventSource = new EventSource('/sse');

eventSource.addEventListener('stockUpdate', (event) => {
    const stockData = JSON.parse(event.data);

    for (const symbol in stockData) {
        const price = stockData[symbol].toFixed(2);
        document.getElementById(symbol).textContent = price;
    }
});

Un autre cas d'utilisation des SSE est l'envoi de notifications et d'alertes au client. Une application de réseau social pourrait utiliser les SSE pour notifier les utilisateurs lorsqu'ils reçoivent un nouveau message ou lorsque quelqu'un les mentionne dans une publication. Le serveur peut envoyer un événement au client chaque fois qu'une nouvelle notification est disponible, et le client peut afficher la notification à l'utilisateur.

Les SSE peuvent également être utilisés pour des applications de chat en direct. Lorsqu'un utilisateur envoie un message, le serveur peut diffuser ce message à tous les clients connectés en utilisant les SSE. Chaque client écouterait les nouveaux événements de message et mettrait à jour l'interface utilisateur du chat en conséquence. Cependant, gardez à l'esprit que les SSE sont unidirectionnels, vous auriez donc besoin d'utiliser une autre méthode (comme une requête HTTP POST classique) pour envoyer des messages du client au serveur.

Les SSE peuvent être utilisés pour des analyses et des métriques en temps réel. Une application de surveillance de serveur pourrait utiliser les SSE pour envoyer des métriques de serveur en temps réel au client. Le client pourrait afficher ces métriques dans un tableau de bord, donnant aux administrateurs une vue en temps réel des performances du serveur.

// Envoyer les métriques du serveur toutes les secondes
setInterval(() => {
    const serverMetrics = {
        cpu: os.loadavg()[0],
        memory: os.freemem() / os.totalmem()
    };

    sendEvent('serverMetrics', serverMetrics);
}, 1000);

eventSource.addEventListener('serverMetrics', (event) => {
    const metrics = JSON.parse(event.data);

    document.getElementById('cpuUsage').textContent = `${metrics.cpu.toFixed(2)}%`;
    document.getElementById('memoryUsage').textContent = `${(metrics.memory * 100).toFixed(2)}%`;
});

Voici quelques exemples de la façon dont les SSE peuvent être utilisés dans des applications web en temps réel. La nature unidirectionnelle des SSE les rend adaptés aux scénarios où le serveur doit envoyer des mises à jour au client, mais où le client n'a pas besoin de renvoyer des données au serveur.