API HTML SSE
Zdarzenia wysyłane przez serwer (SSE) umożliwiają stronie internetowej pobieranie aktualizacji z serwera.
Zdarzenia wysyłane przez serwer — przesyłanie wiadomości w jedną stronę
Zdarzenie wysyłane przez serwer ma miejsce, gdy strona internetowa automatycznie pobiera aktualizacje z serwera.
Było to również możliwe wcześniej, ale strona internetowa musiałaby zapytać, czy dostępne są jakieś aktualizacje. W przypadku zdarzeń wysyłanych przez serwer aktualizacje przychodzą automatycznie.
Przykłady: aktualizacje na Facebooku/Twitterze, aktualizacje cen akcji, kanały informacyjne, wyniki sportowe itp.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje zdarzenia wysyłane przez serwer.
| API | |||||
|---|---|---|---|---|---|
| SSE | 6.0 | 79.0 | 6.0 | 5.0 | 11.5 |
Otrzymuj powiadomienia o zdarzeniach wysyłane przez serwer
Obiekt EventSource służy do odbierania powiadomień o zdarzeniach wysyłanych przez serwer:
Przykład
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
Wyjaśnienie przykładu:
- Utwórz nowy obiekt EventSource i określ adres URL strony wysyłającej aktualizacje (w tym przykładzie „demo_sse.php”)
- Za każdym razem, gdy odbierana jest aktualizacja, następuje zdarzenie onmessage
- Gdy wystąpi zdarzenie onmessage, umieść otrzymane dane w elemencie z id="result"
Sprawdź obsługę zdarzeń wysyłanych przez serwer
W powyższym przykładzie tryit było kilka dodatkowych linii kodu, aby sprawdzić obsługę przeglądarki dla zdarzeń wysyłanych przez serwer:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code.....
}
else {
// Sorry! No server-sent events support..
}
Przykład kodu po stronie serwera
Aby powyższy przykład działał, potrzebujesz serwera zdolnego do wysyłania aktualizacji danych (takiego jak PHP lub ASP).
Składnia strumienia zdarzeń po stronie serwera jest prosta. Ustaw nagłówek „Content-Type” na „text/event-stream”. Teraz możesz zacząć wysyłać strumienie wydarzeń.
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, że strona nie powinna być buforowana
- Wysłać dane do wysłania ( Zawsze zaczynaj od "dane:")
- Opróżnij dane wyjściowe z powrotem na stronę internetową
Obiekt EventSource
W powyższych przykładach użyliśmy zdarzenia onmessage do otrzymywania wiadomości. Ale dostępne są również inne wydarzenia:
| Events | Description |
|---|---|
| onopen | When a connection to the server is opened |
| onmessage | When a message is received |
| onerror | When an error occurs |