Wydarzenia wysyłane serwerem w HTML

Wydarzenia wysyłane serwerem pozwalają stronie internetowej na otrzymywanie aktualizacji z serwera.

Wydarzenia wysyłane serwerem - Jednakowa wiadomość

Wydarzenia wysyłane serwerem to automatyczne otrzymywanie aktualizacji przez stronę internetową 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 wydarzeniom wysyłanym serwerem, aktualizacje mogą przychodzić automatycznie.

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

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwsze przeglądarki, które w pełni obsługują wydarzenia wysyłane serwerem.

API
SSE 6.0 Nie obsługuje się 6.0 5.0 11.5

Odbieranie powiadomień wydarzeń wysyłanych serwerem

Obiekt EventSource jest używany do odbierania powiadomień wydarzeń wysyłanych serwerem:

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:

  • Utwórz nowy obiekt EventSource, a następnie określ URL strony, która wysyła aktualizacje (w tym przykładzie to "demo_sse.php")
  • Każdy raz, gdy otrzymujemy aktualizację, zdarzenie onmessage się zdarza
  • Kiedy zdarzenie onmessage się zdarza, wstaw dane, które zostały już otrzymane, do elementu o id "result"

Wykrywanie obsługi wydarzeń wysyłanych serwerem

W przykładzie TIY napisaliśmy dodatkowy kod do wykrywania obsługi wydarzeń wysyłanych serwerem przez przeglądarkę:

if(typeof(EventSource) !== "undefined") {
    // Tak! Obsługuje się wydarzenia wysyłane serwerem!
    // Niektóry kod.....
} else {
    // Przykro mi! Nie obsługuje się wydarzeń wysyłanych serwerem!
}

Przykład kodu na serwerze

Aby uruchomić powyższy przykład, 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". Możesz teraz 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"
  • Nie cachej strony
  • 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żyliśmy zdarzenia onmessage, aby uzyskać wiadomość. Można również użyć innych zdarzeń:

Zdarzenie Opis
onopen Gdy połączenie z serwerem zostaje otwarte
onmessage Gdy otrzymuje wiadomość
onerror Gdy wystąpi błąd