🎬 1. Introduction : Qu’est-ce que le temps réel et pourquoi s’en soucier ?
Imagine ceci :
Tu regardes un match de foot, mais le score s’affiche avec trois minutes de retard.
Tu consultes les prix des cryptos, mais le Bitcoin affiche le tarif d’il y a cinq minutes.
Ou ton ami t’écrit — et son message arrive dix secondes plus tard. 😩
C’est là que le temps réel entre en scène.
C’est la magie qui garantit que les mises à jour te parviennent instantanément — sans attente, sans latence, sans “j’arrive en retard à la fête” ! ⏱️
Et c’est ici que notre charmant héros entre en jeu :
💡 SSE — Server-Sent Events
(ou comme j’aime l’appeler, « les lettres d’amour du serveur » 😘)
💌 2. Qu’est-ce que SSE ? (Flux de données unidirectionnel du serveur)
Le SSE (Server-Sent Events) est une fonctionnalité HTML5 qui permet à une page web de recevoir automatiquement des mises à jour d’un serveur via une seule connexion HTTP longue durée.
Voici l’idée :
- C’est unidirectionnel (serveur → client), contrairement aux WebSockets.
- Parfait pour les notifications ou les mises à jour en direct.
- Fonctionne sur HTTP, donc pas de casse-tête proxy / pare-feu.
- Reconnexion automatique si la connexion tombe.
- Léger — pas de fetch ou de soupe de socket compliquée requise 🍜
⚙️ 3. Comment fonctionne SSE ? (Flux logique simple)
1️⃣ Le navigateur dit :
« Hé serveur, peux-tu m’envoyer les nouveaux événements dès qu’ils arrivent ? »
const source = new EventSource('/events');
2️⃣ Le serveur répond :
« Bien sûr, mon chou, je garde cette connexion ouverte uniquement pour toi 💕 »
et envoie cet en-tête :
Content-Type: text/event-stream
3️⃣ Le serveur envoie de temps en temps des messages :
data: Un nouveau message vient d’arriver 💬
\n\n
4️⃣ Le navigateur les reçoit ainsi :
source.onmessage = (e) => console.log(e.data);
💫 Et c’est tout ! Tant que la page reste ouverte, les données coulent du serveur comme des lettres d’amour en temps réel. 💌
💻 4. Côté client : utilisation d’EventSource
Voici le côté HTML romantique 😍
(Tu peux enregistrer ce code en .html et le lancer directement.)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Notifications en direct (SSE) 💬</title>
<style>
body { font-family: sans-serif; background: #f0f8ff; padding: 20px; }
h1 { color: #0077cc; }
#log { border: 1px solid #ccc; padding: 10px; border-radius: 10px; background: white; height: 300px; overflow-y: auto; }
.msg { background: #e6f7ff; padding: 5px 10px; margin: 5px 0; border-radius: 6px; }
</style>
</head>
<body>
<h1>💬 Notifications en direct (SSE)</h1>
<div id="log"></div>
<script>
const log = document.getElementById('log');
const addMessage = (text) => {
const div = document.createElement('div');
div.className = 'msg';
div.textContent = text;
log.appendChild(div);
log.scrollTop = log.scrollHeight;
};
// Connexion EventSource
const evtSource = new EventSource('/events');
evtSource.onopen = () => addMessage('🔗 Connecté ! À l’écoute du serveur…');
evtSource.onerror = () => addMessage('⚠️ Connexion perdue, tentative de reconnexion…');
evtSource.onmessage = (event) => addMessage('🆕 Message : ' + event.data);
// Écoute d’événement personnalisé
evtSource.addEventListener('alert', (event) => {
addMessage('🚨 Alerte : ' + event.data);
});
</script>
</body>
</html>
✨ Quand cette page s’exécute, elle se connecte à /events.
Si le serveur envoie des données, tu les verras apparaître en direct — pas besoin de rafraîchir.
🧠 5. Côté serveur : SSE avec Node.js + Express
Du côté serveur, tu dois définir correctement les en-têtes.
Si tu oublies Content-Type: text/event-stream, le navigateur ne reconnaîtra pas le flux.
// server.js
const express = require('express');
const app = express();
app.get('/events', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.flushHeaders(); // commence immédiatement
res.write('data: 🎉 Connexion SSE établie !\n\n');
// Envoie un message toutes les 5 secondes
const interval = setInterval(() => {
const msg = `Bonjour du serveur : ${new Date().toLocaleTimeString()}`;
res.write(`data: ${msg}\n\n`);
}, 5000);
// Nettoyage quand le client se déconnecte
req.on('close', () => {
clearInterval(interval);
console.log('❌ Connexion fermée.');
});
});
app.listen(3000, () => console.log('🚀 Serveur SSE en écoute sur le port 3000 !'));
Ensuite :
1️⃣ Lance node server.js
2️⃣ Ouvre http://localhost:3000 dans ton navigateur
3️⃣ 🎈 De nouveaux messages apparaîtront toutes les 5 secondes !
💬 6. Format du message SSE
Un message SSE ressemble habituellement à ceci :
id: 123
event: notify
data: Bonjour mon amour, tu as un nouveau message 💖
retry: 3000
- id : Identifiant du message. Si la connexion tombe, le navigateur utilise
Last-Event-IDpour reprendre. - event : Type d’événement personnalisé (par exemple
notify,warning). - data : Le contenu réel du message.
- retry : Délai de reconnexion (en millisecondes).
⚔️ 7. SSE vs WebSocket : l’arène du code 🥊
| Fonctionnalité | SSE | WebSocket |
|---|---|---|
| Direction | Uniquement serveur → client | Bi-directionnel |
| Configuration | Ultra simple 😌 | Plus complexe |
| Protocole | HTTP | WS (WebSocket) |
| Reconnexion | Automatique | Manuelle |
| Performance | Léger | Puissant en charge élevée |
| Support navigateurs | Navigateurs modernes | Presque tous |
👉 Résumé :
- Si tu as besoin de notifications en direct, de journaux ou de simples mises à jour → SSE
- Si tu as besoin de chat, jeux multiplayer ou messagerie bidirectionnelle → WebSocket
🚨 8. Pièges fréquents (appris à la dure 😅)
💣 Tamponnement proxy :
Si tu utilises Nginx comme proxy inverse, assure-toi de désactiver le tamponnement :
location /events {
proxy_pass http://localhost:3000/events;
proxy_buffering off;
}
Sans cela, les messages peuvent arriver avec retard. 😬
💣 CORS :
Si ton frontend et backend sont sur des domaines différents :
res.setHeader('Access-Control-Allow-Origin', '*');
💣 En-têtes personnalisés :EventSource ne peut pas envoyer d’en-têtes personnalisés — pas de “Bearer token”.
Utilise les cookies pour l’authentification.
💣 Timeouts :
Pour garder les connexions actives, envoie occasionnellement un commentaire :
:\n\n
(C’est comme un “ping” de cardio 💓)
⚡ 9. Mini exemple pour les fans de PHP
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: Bonjour du serveur !\n\n";
flush();
for ($i = 1; $i <= 5; $i++) {
echo "data: Notification #$i à " . date('H:i:s') . "\n\n";
flush();
sleep(2);
}
?>
👉 N’oublie pas flush() — PHP peut être un peu trop patient avec ses tampons.
🌈 10. Niveau avancé : types d’événements personnalisés
Tu peux envoyer des types d’événement personnalisés comme ceci :
event: alert
data: Maintenance serveur en cours 🚧
\n\n
Et les gérer dans le navigateur :
source.addEventListener('alert', (e) => {
alert('⚠️ ' + e.data);
});
🧩 11. Cas d’usage réels
🏀 Scores en direct :
“Fenerbahçe 3 – 2 Galatasaray” se met à jour instantanément !
💹 Prix des cryptos :
Ton tableau de bord se met à jour pendant que tu prends un café ☕
📈 Dashboards :
Nombre d’utilisateurs en direct, journaux serveur, panels analytiques.
📬 Notifications type push :
Nouveaux messages, commentaires ou alertes en temps réel.
💖 12. Derniers mots — Pourquoi SSE est comme une belle relation
Parce que c’est simple.
Parce que c’est fiable.
Parce que chaque message qui arrive te réchauffe le cœur. ❤️
« La connexion est toujours ouverte… Je ne t’ai pas oublié 💞 »
Si WebSocket est une romance passionnée, intense 💃
alors SSE est un amour calme et constant — toujours là,
silencieux mais fiable. 🫶
La prochaine fois, mon amour, on plongera dans :
🌟 “Construire un tableau de bord en temps réel avec SSE”
ou
🌟 “Node + React : Centre de notifications (édition SSE)” ?
Lequel veux-tu écrire ensuite, chéri(e) — le dashboard ou l’app live ? 💋
