Événements envoyés par le serveur HTML 5

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

Prise en charge des navigateurs

Les événements envoyés par le serveur sont pris en charge par tous les principaux navigateurs, à l'exception d'Internet Explorer.

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 />"; };

Explication de l'exemple :

Créez un nouvel objet EventSource, puis précisez 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, le L'événement onmessage se produira

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

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

Dans ce qui précède Exemple TIY, nous écrivons un morceau de code supplémentaire pour détecter la prise en charge du navigateur pour les é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 Il faut également pouvoir envoyer des mises à jour de données à des serveurs (tels que 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.

Code PHP (demo_sse.php) :

<?php header(&#39;Content-Type: text/event-stream&#39;); header(&#39;Cache-Control: no-cache&#39;); $time = date(&#39;r&#39;); 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

Objet EventSource

Dans l'exemple ci-dessus, 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 Lorsqu'un message est reçu

onerror Lorsqu'une erreur se produit

Ce qui précède est le contenu de l'événement envoyé par le serveur HTML 5. Pour plus de contenu connexe, veuillez. faites attention au site Web PHP chinois (www.php.cn ) !