FR
RU
EN
ES
ZH
DE
PT
AR
HI
Que sont les Server-Sent Events et pourquoi en avez-vous besoin ?
\n\nImaginez : vous ouvrez un site de taux de change, et le cours du dollar change sous vos yeux — sans actualiser la page, sans cliquer sur aucun bouton. Ou vous attendez le résultat du traitement d'un gros fichier sur le serveur, et soudain une ligne apparaît : « Prêt à 70% ». Comment cela fonctionne-t-il ? L'une des méthodes les plus élégantes est Server-Sent Events (SSE).
\n\nSSE est une technologie qui permet au serveur d'envoyer des données au client de manière autonome à tout moment, dès qu'elles sont disponibles. Contrairement à WebSocket, SSE ne fonctionne que dans un seul sens — du serveur vers le client. Mais c'est là sa super-force : il est incroyablement simple, efficace et parfaitement adapté aux tâches où le client a seulement besoin de recevoir des mises à jour.
\n\nDans cet article, nous allons voir comment utiliser les Server-Sent Events en JavaScript, écrire du code fonctionnel et comprendre quand SSE est le meilleur choix, et quand il vaut mieux se tourner vers WebSocket. Prêt ? C'est parti !
\n\nComment fonctionnent les Server-Sent Events (SSE) ?
\n\nTechniquement, SSE est simplement une connexion HTTP que le serveur ne ferme pas après avoir envoyé la réponse. Au lieu de cela, il envoie les données par morceaux, en utilisant le format spécial text/event-stream. Le client (navigateur) écoute cette connexion via l'objet EventSource et génère des événements à la réception de chaque nouveau message.
Voici à quoi ressemble une réponse typique du serveur :
\n\ndata: {"message": "Bonjour !", "timestamp": 1700000000}\n\ndata: {"message": "Nouvelle notification", "timestamp": 1700000001}Chaque message commence par data:, suivi d'un espace et du contenu lui-même. Les messages sont séparés par deux caractères de nouvelle ligne \\n\\n. Le serveur peut également envoyer des identifiants (id:) et des types d'événements (event:), mais l'ensemble minimal est data.
La partie cliente est encore plus simple :
\n\nconst eventSource = new EventSource('/events');\n\neventSource.onmessage = (e) => {\n console.log('Données reçues :', e.data);\n};\n\neventSource.onerror = (e) => {\n console.error('Erreur de connexion', e);\n};Voilà ! Pas de poignées de main complexes, pas de bibliothèques — le navigateur se reconnecte automatiquement en cas de rupture, il gère lui-même la perte de connexion. C'est là toute la magie des Server-Sent Events.
\n\nSSE vs WebSocket : quand choisir quoi ?
\n\nLes débutants pensent souvent : « Puisque SSE est plus simple, il est toujours meilleur ». Mais ce n'est pas le cas. Chaque technologie a son créneau. Comparons.
\n\n| Caractéristique | \nSSE | \nWebSocket | \n
|---|---|---|
| Direction des données | \nServeur → client uniquement | \nBidirectionnelle | \n
| Simplicité d'implémentation | \nTrès simple (natif au navigateur) | \nMoyenne (nécessite une bibliothèque) | \n
| Reconnexion automatique | \nIntégrée | \nÀ implémenter manuellement | \n
| Support des navigateurs | \nTous les navigateurs modernes (sauf IE) | \n
Blogs
Modèles de conception en C# avec exemples de code
Comment devenir développeur Kotlin : conseils et CV pratiques
Parsing et scraping de données en Go : Puissance, Vitesse et SimplicitéBook RecommendationsLire aussi
Concurrence et multithreading en Go : guide complet pour développeurs
Surveillance des applications Go : métriques et alertes — guide complet
Comment devenir développeur C# : conseils et CV en 2025
Classes et objets Python : bases de la programmation orientée objet
Communauté Swift : guide des conférences, blogs et ressources en 2025
|