HTML5 Événements envoyés par le serveur

Les événements envoyés par le serveur HTML5 permettent aux pages web d'obtenir des mises à jour depuis un serveur

Événements envoyés par le serveur - Livraison de messages unidirectionnelle

Les événements envoyés par le serveur désignent le fait que les pages web obtiennent automatiquement des mises à jour depuis un serveur.

C'était également possible auparavant, à condition que la page web doive demander s'il y avait des mises à jour disponibles. Avec les événements envoyés par le serveur, les mises à jour peuvent arriver.

Exemples : mises à jour Facebook/Twitter, mises à jour des cours boursiers, nouveaux articles de blog, résultats sportifs.

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Tous les principaux navigateurs prennent en charge les événements envoyés par le serveur, sauf Internet Explorer.

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

L'objet EventSource est utilisé pour recevoir les 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 »

Explication de l'exemple :

  • Créez un nouvel objet EventSource, puis spécifiez l'URL de la page qui envoie les mises à jour (dans cet exemple, "demo_sse.php")
  • Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produit
  • Lorsque l'événement onmessage se produit, poussez les données reçues dans l'élément avec l'id "result"

Détection de la prise en charge des événements envoyés par le serveur

Dans l'exemple suivant, nous avons écrit du code supplémentaire pour détecter la prise en charge par le navigateur des événements envoyés par le serveur :

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

Exemple de code côté serveur

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

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

Exemple

<?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 ASP (VB) (demo_sse.asp) :

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

Explication du code :

  • Définir l'en-tête "Content-Type" sur "text/event-stream"
  • Indiquer de ne pas mettre la page en cache
  • Afficher la date envoyée (commençant toujours par "data: ")
  • Vider les données de sortie vers la page web

Objet EventSource

Dans l'exemple ci-dessus, nous avons utilisé l'événement onmessage pour obtenir des messages. Cependant, d'autres événements peuvent également être utilisés :

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