É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 du serveur.

Il était possible de faire cela 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 prenant en charge 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 envoyant 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, les 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 à un serveur (par exemple PHP ou ASP).

La syntaxe des flux d'événements côté serveur est très simple. Configurez l'entête "Content-Type" en "text/event-stream". Vous pouvez maintenant commencer à envoyer les 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" en "text/event-stream"
  • Ne pas mettre en cache la page
  • Sortir la date à envoyer (toujours commence par "data: ")
  • Mettre à jour la page web

Objet EventSource

Dans l'exemple précédent, 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