Événements envoyés par le serveur HTML5

Événement Server-Sent - messagerie unidirectionnelle

L'événement Server-Sent fait référence à la page Web qui reçoit automatiquement les mises à jour du serveur.

Cela était également possible auparavant, si la page Web devait demander si une mise à jour était disponible. En envoyant des événements via le serveur, les mises à jour peuvent arriver automatiquement.

Exemples : mises à jour Facebook/Twitter, mises à jour de valorisation, nouveaux articles de blog, résultats d'événements, etc.

Ce qui suit est un exemple de code sur W3School, comprenant du code JavaScript côté client et du code PHP côté serveur :

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

Document.getElementById("result").innerHTML += event.data + "< ; br />";

};

Ce code récupère en continu les données de demo_sse.php et affiche le résultat vers l'ID de dans le div de résultat.

<?php

header('Content-Type : texte/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data : L'heure du serveur est : {$time}nn";

flush();

?>

Ce code renvoie l'heure actuelle du serveur au client. Enfin, des résultats similaires aux suivants sont affichés sur la page client :

L'heure du serveur est : Fri, 29 août 2016 02:03:21 +0800

L'heure du serveur est : Fri, 29 août 2016 02:03:24 +0800

L'heure du serveur est : vendredi 29 août 2016 02:03:27 +0800

L'heure du serveur est : vendredi 29 août 2016 02 : 03:30 +0800

L'heure du serveur est : vendredi 29 août 2016 02:03:33 +0800

...

Recevoir la notification d'événement envoyée par le serveur

L'objet EventSource est utilisé pour recevoir la notification d'événement envoyée par le serveur :

Instance

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

Exemple d'analyse :

Créez un nouvel objet EventSource, puis spécifiez l'URL de la page pour envoyer la mise à jour (dans ce cas, "demo_sse.php")

Chaque fois qu'une mise à jour est reçue, l'événement onmessage se produira

Lorsque l'événement onmessage se produit, transférez les données reçues dans l'élément portant l'identifiant "result"

Détecter la prise en charge de l'événement envoyé par le serveur

Dans l'exemple suivant, nous avons écrit un morceau de 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")
{
// Le navigateur prend en charge Server-Sent
// Du code...
}
else
{
// Le navigateur ne prend pas en charge Server-Sent..
}

Exemple de code côté serveur

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

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

Exemple

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

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

Explication du code :

Définissez l'en-tête "Content-Type" sur "text/event-stream"

Spécifiez que la page n'est pas mise en cache

Sortez la date d'envoi (en commençant toujours par "data:")

Actualiser les données de sortie sur la page Web