HTML SSE API
Les événements envoyés par le serveur (SSE) permettent à une page Web d'obtenir des mises à jour à partir d'un serveur.
É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 mises à jour d'un serveur.
Cela était également possible auparavant, mais la page Web devrait demander si des mises à jour étaient disponibles. Avec les événements envoyés par le serveur, les mises à jour sont automatiques.
Exemples : mises à jour Facebook/Twitter, mises à jour du cours des actions, flux d'actualités, résultats sportifs, etc.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge les é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ées par le serveur
L'objet EventSource est utilisé pour recevoir les notifications d'événements envoyées par le serveur :
Exemple
var source = new EventSource("demo_sse.html");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Try it Yourself »
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.html")
- Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produit
- Lorsqu'un événement onmessage se produit, placez les données reçues dans l'élément avec id="result"
Vérifier la prise en charge des événements envoyés par le serveur
Dans l'exemple tryit ci-dessus, il y avait quelques lignes de code supplémentaires pour vérifier la prise en charge du navigateur pour les événements envoyés par le serveur :
if(typeof(EventSource) !== "undefined") {
// Oui ! Prise en charge des événements envoyés par le serveur !
// Du code.....
} else {
// Désolé ! Aucune prise en charge des é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.html) :
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
Coder en ASP (VB) (demo_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & 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
- Sortez les données à envoyer (Toujours commencer par "data:")
- Vider 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 récupérer des messages. Mais 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 |
