Événements Server-Sent HTML

Les événements Server-Sent permettent au site Web d'obtenir des mises à jour du serveur.

Événements Server-Sent - Messagerie Unidirectionnelle

Les événements Server-Sent sont des mises à jour automatiques obtenues par le site Web à partir du serveur.

Cela était possible auparavant à condition que le site Web demande s'il y a des mises à jour disponibles. Grâce aux événements Server-Sent, les mises à jour peuvent arriver automatiquement.

Par exemple : mises à jour Facebook/Twitter, mises à jour des cours de bourse, nouveaux articles, résultats des compétitions, etc.

Prise en charge par le navigateur

Les nombres dans le tableau indiquent le premier navigateur qui prend en charge intégralement les événements server-sent.

API
SSE 6.0 Non pris en charge 6.0 5.0 11.5

Recevoir des notifications d'événements Server-Sent

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

Exemple

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Essayez-le vous-même

Explication de l'exemple :

  • Créez un nouveau objet EventSource, puis spécifiez l'URL de la page qui envoie les mises à jour (dans cet exemple, "demo_sse.php").
  • Un événement onmessage se produit à chaque réception d'une mise à jour.
  • Lorsqu'un événement onmessage se produit, le données reçues sont poussées dans l'élément d'ID "result".

Détection de la prise en charge des événements Server-Sent

Dans l'exemple TIY, nous avons écrit un code supplémentaire pour détecter la prise en charge des événements envoyés par le serveur dans les navigateurs :

if(typeof(EventSource) !== "undefined") {
    // Oui ! Les événements envoyés par le serveur sont pris en charge !
    // Quelques lignes de code.....
} else {
    // Désolé ! Les événements envoyés par le serveur ne sont pas pris en charge !
}

Exemple de code côté serveur

Pour que l'exemple précédent fonctionne, vous devez être capable d'envoyer des mises à jour de données au serveur (par exemple PHP ou ASP).

La syntaxe des événements côté serveur est très simple. Configurez l'entê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()
%>

Explication du code :

  • Définir l'entête "Content-Type" sur "text/event-stream"
  • Ne pas mettre en cache la page
  • Spécifier la date à envoyer (toujours commence par "data: ")
  • Mettre à jour la page Web avec des données

Objet EventSource

Dans l'exemple suivant, nous utilisons l'événement onmessage pour obtenir le message. Cependant, d'autres événements peuvent également être utilisés :

Événement Description
onopen Lorsque la connexion au serveur est ouverte
onmessage Lorsque le message est reçu
onerror Lorsqu'une erreur se produit