HTML Server-Sent Events (SSE)
Auparavant, les Web Workers exécutaient JavaScript dans un thread d’arrière-plan et parlaient à la page avec postMessage — CPU local, pas de flux serveur. Cette leçon quitte le calcul hors-thread et présente le SSE : le serveur pousse des mises à jour texte via HTTP. Portée pratique — ouvrir, écouter, push unidirectionnel — pas de serveurs de flux Node.
Pourquoi le SSE dans un cours HTML
Les débutants ont besoin de scores ou logs en direct sans protocole socket sur mesure. Le SSE est la première API courante pour pousser du texte via HTTP. Après les workers, la division diffère : le serveur possède le flux ; le script de page possède EventSource et le DOM.
Réponse directe
1) new EventSource("/events"). 2) onmessage et e.data. 3) Mettez à jour le DOM sur la page. 4) onerror. 5) Unidirectionnel. 6) WebSockets pour le duplex ; polling si rare ; Workers pour le CPU local.
📊 SSE vs WebSocket vs Worker
| Topic | SSE (this lesson) | WebSocket | Web Worker (prev) |
|---|---|---|---|
| Typical role | Server→browser text stream | Full duplex messages | Local off-thread compute |
| Browser entry | EventSource(url) | new WebSocket(url) | new Worker(url or Blob) |
| Direction | One-way (server push) | Two-way | Page ↔ worker (no server required) |
| Transport idea | HTTP text/event-stream | WS protocol | postMessage / onmessage |
| DOM updates | On the page script | On the page script | On the page script only |
| This course depth | Required (browser pattern) | Contrast only | Previous lesson |
| Not this lesson | Full backend stream servers | Chat product design | SharedWorker fleets |
Minuscule motif d’écoute EventSource
Côté navigateur seulement. /events doit être un vrai endpoint SSE ; sans serveur, erreur — enseigne quand même la forme de l’API.
EventSource listen pattern
html<pre id="out">Waiting for stream…</pre>
<script>
const out = document.getElementById("out");
const es = new EventSource("/events");
es.onmessage = function (e) {
out.textContent = "Last update: " + e.data;
};
es.onerror = function () {
out.textContent = "SSE error or closed (need a real /events stream)";
};
</script>Lire les appels d’écoute
- EventSource ouvre un long flux HTTP
- onmessage sur message
- e.data est la charge texte
- La page écrit dans pre
- Contrairement aux Workers : pas de postMessage vers un thread d’arrière-plan
- onerror attendu sans serveur
- Gardez l’intro petite
Ajouter des lignes de flux à un journal
Les UI live ajoutent souvent chaque événement. Cette démo garde les dernières lignes dans une liste.
Append SSE lines to a log
html<ul id="log"></ul>
<script>
const log = document.getElementById("log");
const es = new EventSource("/events");
es.onmessage = function (e) {
const li = document.createElement("li");
li.textContent = e.data;
log.appendChild(li);
while (log.children.length > 5) {
log.removeChild(log.firstChild);
}
};
es.onerror = function () {
if (!log.dataset.noted) {
log.dataset.noted = "1";
const li = document.createElement("li");
li.textContent = "Stream not available — wire a text/event-stream URL";
log.appendChild(li);
}
};
</script>Lire l’idée du journal
- Chaque onmessage crée un li
- Limitez la liste
- Toujours unidirectionnel
- Pas un Web Worker
- Des événements nommés existent ; message suffit
- es.close() à la fin
- Ensuite : XHTML
Choisir SSE, polling, sockets ou workers
- Push fréquent de statut via HTTP : bon fit SSE
- Rafraîchissement rare : le polling peut suffire
- Chat bidirectionnel : WebSockets
- Boucle locale lourde : c’étaient les Workers
- Glisser une carte : c’était le DnD
- Construire l’endpoint de flux backend : hors de cette intro
Pratique — ouvrir, écouter, contraster
- Lisez le snippet d’écoute.
- Survolez text/event-stream.
- Lisez le journal append.
- Phrase : Workers en local ; SSE du serveur.
- Phrase : SSE unidirectionnel ; WebSockets duplex.
- Optionnel URL réelle.
- Aperçu : XHTML.
Erreurs faciles
- Attendre navigateur→serveur via EventSource
- Confondre avec les Web Workers
- Oublier le content-type event-stream
- SSE pour des mises à jour trop rares
- Ignorer onerror
- Prendre l’intro pour un cours streaming backend complet
- Mélanger EventSource avec Worker ou WebSocket
Résumé
- Le SSE streame du texte serveur→navigateur via HTTP
- EventSource, onmessage/onerror ; DOM sur la page
- Push unidirectionnel ; WebSockets pour le duplex
- Les Workers étaient du calcul local hors-thread ; cette leçon est le push serveur
- Les vraies démos ont besoin de text/event-stream
- Suivant : XHTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut