HTML API des événements envoyés par le serveur

L'API des événements envoyés par le serveur (SSE) permet d'envoyer des messages et des mises à jour d'un serveur à une page web via une connexion HTTP.

Événements envoyés par le serveur - Messagerie unidirectionnelle

Un événement envoyé par le serveur se produit lorsqu'une page web reçoit automatiquement des messages ou des mises à jour d'un serveur.

Normalement, une page web doit demander des données au serveur, mais avec les événements envoyés par le serveur, les mises à jour sont envoyées automatiquement.

Exemples : mises à jour Facebook/Twitter, mises à jour du marché boursier, fils d'actualités, résultats sportifs, etc.

Support des navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'API des événements envoyés par le serveur.

API
SSE	6.0	79.0	6.0	5.0	11.5

Recevoir des notifications d'événements envoyés par le serveur

L'objet EventSource est utilisé pour recevoir des notifications d'événements envoyés par le serveur :

Exemple

 <script> 
 const x = document.getElementById("result"); 
 // Vérifier le support du navigateur pour SSE 
 if(typeof(EventSource) !== "undefined") { 
 var source = new EventSource("demo_sse.php"); 
 source.onmessage = function(event) { 
 x.innerHTML += event.data + "<br>"; 
 }; 
 } else { 
 x.innerHTML = "Désolé, le support des événements envoyés par le serveur n'est pas disponible."; 
 } 
 </script> 

Essayez-le vous-même »

Exemple expliqué :

Créez un nouvel objet EventSource et spécifiez l'URL de la page envoyant les mises à jour (dans cet exemple "demo_sse.php")
Chaque fois qu'une mise à jour est reçue, l'événement onmessage se déclenche
Lorsqu'un événement onmessage se déclenche, insérez les données reçues dans l'élément avec id="result"

Vérifier le support du navigateur

Dans l'exemple tryit ci-dessus, quelques lignes de code supplémentaires ont été ajoutées pour vérifier le support du navigateur pour les événements envoyés par le serveur :

 if(typeof(EventSource) !== "undefined") { 
 // Oui ! Support des événements envoyés par le serveur ! 
 //  Quelques codes.....  
 } else { 
 // Désolé ! Pas de support pour les événements envoyés par le serveur. 
 } 

Exemple de code côté serveur

Pour que l'exemple ci-dessus fonctionne, vous avez besoin d'un serveur capable d'envoyer des mises à jour de données (comme PHP ou ASP).

La syntaxe du flux d'événements côté serveur est simple. Définissez l'en-tête "Content-Type" sur "text/event-stream". Vous pouvez maintenant commencer à envoyer des flux d'événements.

Code en PHP (demo_sse.php) :

 <?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(); 
 ?> 

Code en ASP (VB) (demo_sse.asp) :

 <% 
 Response.ContentType = "text/event-stream" 
 Response.Expires = -1 
 Response.Write("data: L'heure du serveur est : " & now()) 
 Response.Flush() 
 %> 

Code expliqué :

Définissez l'en-tête "Content-Type" sur "text/event-stream"
Spécifiez que la page ne doit pas être mise en cache
Affichez les données à envoyer ( Commencez toujours par "data: " )
Flushez les données de sortie vers la page web

L'objet EventSource

Dans les exemples ci-dessus, nous avons utilisé l'événement onmessage pour obtenir des messages. D'autres événements sont également disponibles :

Événements	Description
onopen	Lorsqu'une connexion au serveur est ouverte
onmessage	Lorsqu'un message est reçu
onerror	Lorsqu'une erreur se produit