HTML Zdarzenia Server-Sent

Zdarzenia Server-Sent pozwalają stronie na automatyczne otrzymywanie aktualizacji z serwera.

Zdarzenia Server-Sent - Jednakowa wiadomość

Zdarzenia Server-Sent to automatyczne otrzymywanie aktualizacji przez stronę z serwera.

Można było to również zrobić wcześniej, pod warunkiem, że strona musiała pytać, czy są dostępne aktualizacje. Dzięki zdarzeniom Server-Sent, aktualizacje mogą przychodzić automatycznie.

Na przykład: aktualizacje Facebook/Twitter, aktualizacje cen akcji, nowe wpisy, wyniki wydarzeń, itp.

Obsługa przeglądarek

Liczby w tabeli wskazują pierwsze przeglądarki, które w pełni wspierają zdarzenia server-sent.

API
SSE 6.0 Nie wspierane 6.0 5.0 11.5

Odbieranie powiadomień zdarzeń Server-Sent

Obiekt EventSource służy do odbierania powiadomień zdarzeń wysyłanych przez serwer:

Przykład

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

Spróbuj sam!

Wyjaśnienie przykładu:

  • Tworzenie nowego obiektu EventSource, a następnie określenie URL strony wysyłającej aktualizacje (w tym przykładzie "demo_sse.php")
  • Każdy raz, gdy otrzymywana jest aktualizacja, ma miejsce zdarzenie onmessage
  • Każdy raz, gdy ma miejsce zdarzenie onmessage, wprowadzane są dane do elementu o id "result"

Wykrywanie obsługi zdarzeń Server-Sent

W przykładzie TIY napisaliśmy dodatkowy kod do wykrywania obsługi zdarzeń wysyłanych przez serwer przeglądarki:

if(typeof(EventSource) !== "undefined") {
    // Tak! Wspieramy zdarzenia wysyłane przez serwer!
    // Niektóry kod.....
} else {
    // Przepraszamy! Nie wspieramy zdarzeń wysyłanych przez serwer!
}

Przykład kodu serwerowego

Aby uruchomić przykład powyżej, musisz mieć możliwość wysyłania aktualizacji danych serwera (np. PHP lub ASP).

Gramatyka strumieni zdarzeń serwerowych jest bardzo prosta. Ustaw nagłówek "Content-Type" na "text/event-stream". Teraz możesz zacząć wysyłać strumienie zdarzeń.

Kod w PHP (demo_sse.php):

<?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();
?>

Kod w ASP (VB) (demo_sse.asp):

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

Wyjaśnienie kodu:

  • Ustaw nagłówek "Content-Type" na "text/event-stream"
  • Określ, aby strona nie była缓存owana
  • Wysyłaj datę do wysyłania (zawsze zaczynając od "data: ")
  • Wysyłanie danych do odświeżenia strony

Obiekt EventSource

W przykładzie używamy zdarzenia onmessage, aby uzyskać wiadomość. Można również użyć innych zdarzeń:

Wydarzenie Opis
onopen Gdy połączenie z serwerem zostanie otwarte
onmessage Gdy otrzymamy wiadomość
onerror Gdy wystąpi błąd