Latest web development tutorials

HTML5 Server-Sent Events (Server-Sent Events)

HTML5-Server senden Ereignisse (Server gesendet Ereignis) ermöglicht Web-Seiten-Updates vom Server zu erhalten.

Server-Sent Events - Wege-Messaging

Server-Sent Ereignis ist die Website automatisch Updates erhalten vom Server.

Zuvor es auch tun können, vorausgesetzt, dass die Seite zu stellen hatte, ob ein Update verfügbar ist. Der Server das Ereignis sendet, wird das Update automatisch ankommen.

Beispiele: Facebook / Twitter-Updates, Bewertungs-Updates, neue Blog, Turnierergebnisse und so weiter.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle gängigen Browser werden unterstützt von der Server das Ereignis sendet, zusätzlich zu den Internet Explorer.

Empfangen von Server-Sent Ereignisbenachrichtigung

Eventsource-Objekt wird verwendet, um den Server gesendet Ereignisbenachrichtigungen erhalten:

Beispiele

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

Versuchen »

Analyse Beispiele:

  • Eventsource ein neues Objekt erstellen, und dann das Update Vorschriften URL der Seite zu senden (in diesem Fall "demo_sse.php")
  • Jeder erhält ein Update, onmessage Ereignis eintritt
  • Wenn onmessage Ereignis eintritt, werden die empfangenen Daten in die ID "result" Element eingeschoben

Erkennung Server-Sent Events Support

Die folgenden Beispiele, schreiben wir einige zusätzliche Code, um den Browser an den Server zu erkennen Ereignisse unterstützt von zu senden:

if (typeof (Eventsource)! == "undefined")
{
// Browser unterstützt Server-Sent
Einige Code//.....
}
sonst
{
// Browser unterstützt keine Server-Sent ..
}

Beispiele für serverseitigen Code

Um das obige Beispiel zu machen, können Sie ausführen, müssen Sie auch in der Lage sein, Daten zu senden, um den Server (wie PHP und ASP) zu aktualisieren.

Syntax serverseitige Ereignisstrom ist sehr einfach. Die "Content-Type" Header auf "text / Event-Stream" gesetzt. Sie können nun das Ereignisablauf gesendet wird.

Beispiele

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

$ Time = date ( 'r' );
echo "Daten: Die Serverzeit ist : {$ time} \ n \ n";
flush ();
?>

ASP-Code (VB) (demo_sse.asp):

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

Code Erläuterung:

  • Der Header "Content-Type" auf "text / Event-stream"
  • Bereitstellung nicht Cache-Seiten
  • Ausgangsübertragungsdatum (immer "Daten:" am Anfang)
  • Aktualisieren Sie die Seite zur Ausgabe von Daten

Eventsource-Objekte

In dem obigen Beispiel haben wir die Nachricht onmessage Ereignis zu erhalten. Sie können jedoch auch andere Veranstaltungen nutzen:

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