Latest web development tutorials

HTML5 serveur-Sent Events (Serveur-Sent Events)

serveur HTML5 envoyer des événements (événement de serveur envoyé) permet des pages Web pour obtenir des mises à jour à partir du serveur.

Serveur-Sent Events - messagerie façon

événement Server Sent est le site obtenir automatiquement les mises à jour à partir du serveur.

Auparavant peut également le faire, à condition que la page a dû demander si une mise à jour est disponible. Le serveur envoie l'événement, la mise à jour arrivera automatiquement.

Exemples: les mises à jour Facebook / Twitter, mises à jour de l'évaluation, le nouveau blog, les résultats du tournoi et ainsi de suite.

support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Tous les principaux navigateurs sont pris en charge par le serveur envoie l'événement, en plus d'Internet Explorer.

Réception d'une notification d'événement serveur-Envoyés

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

Exemples

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

Essayez »

Des exemples d'analyse:

  • EventSource créer un nouvel objet, puis envoyer le règlement de mise à jour URL de la page (dans ce cas, "demo_sse.php")
  • Chacun reçoit une mise à jour, l'événement se produit onmessage
  • Si l'événement se produit onmessage, les données reçues est poussé dans l'élément id "résultat" à

Détection serveur-Sent Events Soutien

Les exemples suivants, nous écrivons du code supplémentaire pour détecter le navigateur vers le serveur pour envoyer des événements pris en charge par:

if (typeof (EventSource)! == "undefined")
{
// Browser supporte Envoyés serveur
// Unepartieducode .....
}
autre
{
// Navigateur ne supporte pas envoyées par le serveur ..
}

Des exemples de code côté serveur

Pour l'exemple ci-dessus, vous pouvez exécuter, vous devez également être en mesure d'envoyer des données à mettre à jour le serveur (comme PHP et ASP).

flux d'événements côté serveur Syntaxe est très simple. Le "Content-Type" en-tête est réglé sur "text / event-stream". Vous pouvez maintenant commencer à envoyer le flux d'événements.

Exemples

<? Php
header ( "Content-Type: text / event-stream ');
header ( "Cache-Control: no -cache ');

$ Time = date ( 'r' );
echo "données: Le temps de serveur est : {$ time} \ n \ n";
flush ();
?>

code ASP (VB) (de demo_sse.asp):

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

Code de l'explication:

  • L'en-tête "Content-Type" est réglé sur "text / event-stream"
  • Disposition ne pages de cache
  • Date de transmission de sortie (toujours "data:" au début)
  • Actualisez la page pour les données de sortie

objets EventSource

Dans l'exemple ci-dessus, nous avons utilisé pour obtenir l'événement message onmessage. Cependant, vous pouvez également utiliser d'autres événements:

事件 描述
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误