Frontend Academy · Leçon

Événements envoyés par le serveur pour la diffusion unidirectionnelle

Événements envoyés par le serveur pour la diffusion unidirectionnelle est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Que sont les événements envoyés par le serveur ?

SSE est un protocole standard basé sur HTTP qui permet au serveur d'envoyer des événements au navigateur via une seule connexion longue durée. Unidirectionnels : uniquement du serveur vers le client. Ils sont plus simples que les WebSockets lorsque vous n'avez pas besoin d'envoyer des données en retour.

API EventSource

EventSource du navigateur se connecte à une URL et écoute les événements. Cette API est standard, intégrée et ne nécessite aucune bibliothèque.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Format de la réponse du serveur

Le serveur envoie un flux en texte brut avec Content-Type: text/event-stream. Chaque message commence par data: et se termine par une ligne vide.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Événements nommés

Le serveur peut nommer les événements avec event:. Le navigateur les déclenche avec ce nom.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Reconnexion automatique

EventSource se reconnecte automatiquement en cas de déconnexion (après environ 3 secondes). Le serveur peut suggérer un délai avec retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

Identifiants d'événement et reprise

Le serveur envoie id: avec chaque événement. Après une reconnexion, le navigateur envoie le dernier identifiant reçu dans l'en-tête Last-Event-ID ; le serveur peut reprendre à partir de celui-ci.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Analyser du JSON

event.data est toujours une chaîne de caractères. Analysez vous-même le JSON.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Fermer la connexion

Appelez es.close() pour arrêter la connexion. Les navigateurs la ferment également lorsque l'onglet est fermé.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Cas d'utilisation

Tableaux de bord en direct (métriques, supervision). Notifications (nouveaux e-mails, alertes). Cours des actions en direct. Réponses de conversation IA diffusées progressivement (chaque jeton correspond à un événement). Scores sportifs en direct. Mises à jour d'état de tâches longues.

Exemple concret : diffusion d'une réponse IA

Les réponses d'OpenAI/Anthropic sont diffusées sous forme de SSE. Chaque jeton arrive comme un événement de données ; affichez-les progressivement pour créer un effet de saisie.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE ou WebSocket ou interrogation

SSE : basé sur HTTP, uniquement du serveur vers le client, reconnexion automatique, simple. WebSocket : duplex intégral, surcharge moindre par message, plus complexe. Interrogation : la plus simple, mais avec la latence et la charge les plus élevées. Choisissez SSE pour une diffusion à sens unique ; WS pour une communication bidirectionnelle de type conversation.

Limites des navigateurs et serveurs mandataires

Les navigateurs limitent le nombre de connexions SSE simultanées par origine (environ 6). Certains serveurs mandataires d'entreprise et anciens répartiteurs de charge mettent les réponses en mémoire tampon, ce qui perturbe SSE : testez dans les environnements cibles. Utilisez HTTPS pour contourner la plupart des mises en mémoire tampon des serveurs mandataires.

CORS pour SSE

EventSource respecte CORS. Le serveur doit envoyer Access-Control-Allow-Origin. Pour les identifiants, transmettez { withCredentials: true } au constructeur EventSource et définissez Access-Control-Allow-Credentials: true sur le serveur.

Vérification rapide

Quelle est la différence essentielle entre les événements envoyés par le serveur et les WebSockets ?

Récapitulatif : événements envoyés par le serveur

EventSource ouvre un flux HTTP d'événements text/event-stream. Le serveur envoie des messages « data: », avec éventuellement un nom event: et un identifiant id:. Reconnexion automatique avec reprise grâce à Last-Event-ID. Communication à sens unique (du serveur vers le client). Idéal pour les tableaux de bord en direct, la diffusion de réponses IA et les notifications. Plus simple que WebSocket lorsque vous n'avez pas besoin d'une communication bidirectionnelle. Surveillez les limites de connexions simultanées et la mise en mémoire tampon par les serveurs mandataires.

Questions Fréquemment Posées

La leçon « Événements envoyés par le serveur pour la diffusion unidirectionnelle » est-elle gratuite ?

Oui — le texte complet de « Événements envoyés par le serveur pour la diffusion unidirectionnelle » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Événements envoyés par le serveur pour la diffusion unidirectionnelle » ?

Utilisez EventSource pour recevoir un flux d’événements envoyés par le serveur, analysez les types et les données des événements et reconnectez-vous automatiquement après les interruptions réseau. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Événements envoyés par le serveur pour la diffusion unidirectionnelle » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

API WebSocket : ouverture, message, fermeture et erreur
Intégration du client Socket.io
Événements envoyés par le serveur pour la diffusion unidirectionnelle
Schémas d’interfaces en temps réel

← Retour à Frontend Academy