API HTML SSE
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.
C'était également possible auparavant, mais la page Web devait 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 des cours boursiers, flux d'actualités, résultats sportifs, etc.
Prise en charge du navigateur
Les nombres dans le tableau indiquent 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.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
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 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 par le navigateur des événements envoyés par le serveur :
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
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: The server time is: {$time}\n\n";
flush();
?>
Code 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 ( commencez toujours 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 obtenir des messages. Mais d'autres événements sont également disponibles :
Events | Description |
---|---|
onopen | When a connection to the server is opened |
onmessage | When a message is received |
onerror | When an error occurs |