Server-Sent wydarzenia pozwalają stronę internetową, aby uzyskać aktualizacje z serwera.
Server-Sent Events - One Way Wiadomości
Zdarzenie serwera wysyłany jest wtedy, gdy strona internetowa automatycznie pobiera aktualizacje z serwera.
To również było możliwe wcześniej, ale strona internetowa będzie musiał zapytać, czy jakiekolwiek aktualizacje były dostępne. Z wydarzeń serwerowych wysłany, aktualizacje są automatycznie.
Przykłady: Facebook/Twitter aktualizacje, aktualizacje cen akcji, Kanały, wyniki sportowe itp
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenia serwerowych wysłana.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | Nieobsługiwany | 6.0 | 5.0 | 11,5 |
Otrzymuj powiadomienia o zdarzeniach serwera Wysłane
EventSource przedmiot służy do odbierania powiadomień o zdarzeniach wysyłane 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 " Przykład wyjaśnia:
- Utwórz nowy EventSource obiekt i określić adres URL strony wysyłającej aktualizacje (in this example "demo_sse.php")
- Za każdym razem odebraniu aktualizacji, onmessage wystąpienia zdarzenia
- Gdy onmessage wystąpienia zdarzenia, umieścić odebranych danych do elementu o id="result"
Sprawdzić wydarzeń Wsparcie Server-Sent
W tryit powyższym przykładzie było kilka dodatkowych linii kodu, by sprawdzić przeglądarki wsparcie dla wydarzeń serwerowych wysłania:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
} else {
// Sorry! No server-sent events support..
}
Server-Side Przykład kodu
Dla powyższego przykładu do pracy, potrzebujesz serwera zdolnego do wysyłania aktualizacji danych (takich jak PHP lub ASP).
Składnia strumień zdarzeń po stronie serwera jest prosta. Ustaw "Content-Type" nagłówek "text/event-stream" . Teraz można zacząć wysyłać strumień 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()
%>
Kod wyjaśnił:
- Ustaw "Content-Type" nagłówek "text/event-stream"
- Określić, że strona nie powinna buforować
- Wyjście danych do wysłania ( Always start with "data: ")
- Przepłukać dane wyjściowe z powrotem do strony internetowej
Przedmiot EventSource
W przykładach powyżej użyliśmy onmessage zdarzenie, aby uzyskać wiadomości. Ale inne wydarzenia dostępne są również:
| Wydarzenia | Opis |
|---|---|
| onopen | Po nawiązaniu połączenia z serwerem jest otwierany |
| onmessage | Po odebraniu wiadomości |
| onerror | W przypadku wystąpienia błędu |