Sobes.tech
Middle+

Po co wprowadzono zdarzenia server-sent w HTML5?

sobes.tech AI

Odpowiedź od AI

Aby zaimplementować jednokierunkowy kanał komunikacji między serwerem a klientem. Serwer może wysyłać dane do klienta w dowolnym momencie po nawiązaniu połączenia.

Kluczowe cechy i zalety:

  • Wydajność: Używa zwykłego połączenia HTTP, minimalizując koszty w porównaniu do polling.
  • Prostota: API serwer-sent events (SSE) jest prostsze w użyciu niż WebSockets dla komunikacji jednokierunkowej.
  • Automatyczne ponowne łączenie: Przeglądarka automatycznie próbuje się ponownie połączyć w przypadku przerwania połączenia.
  • Obsługa typów danych: Wysyłanie danych tekstowych w formacie text/event-stream jest obsługiwane.
  • Obsługa przez przeglądarki: Szeroko wspierane przez nowoczesne przeglądarki.

Zastosowania:

  • Aktualizacje kanałów informacyjnych w czasie rzeczywistym.
  • Powiadomienia o zdarzeniach (np. nowe wiadomości).
  • Monitorowanie danych w czasie rzeczywistym (np. notowania giełdowe).
  • Postęp wykonywania długotrwałych zadań.

Jest to alternatywa dla tradycyjnego polling, gdzie klient okresowo pyta serwer o aktualizacje. W przeciwieństwie do WebSockets, SSE jest jednokierunkowe, co upraszcza ich zastosowanie, gdy dane są przesyłane tylko z serwera do klienta.

Przykład po stronie klienta (JavaScript):

const eventSource = new EventSource('/events'); // URL do odbierania zdarzeń z serwera

eventSource.onmessage = function(event) {
  // Obsługa odebranych danych
  console.log('Odebrano wiadomość:', event.data);
};

eventSource.onerror = function(error) {
  // Obsługa błędów połączenia
  console.error('Błąd Server-Sent Events:', error);
};

eventSource.addEventListener('customEvent', function(event) {
  // Obsługa niestandardowego zdarzenia typu 'customEvent'
  console.log('Odebrane niestandardowe zdarzenie:', event.data);
});

Przykład formatu danych po stronie serwera:

event: customEvent
data: {"message": "Cześć!"}

data: Prosty tekst wiadomości

id: 123 // Identyfikator zdarzenia, używany do automatycznego ponownego łączenia

retry: 5000 // Opóźnienie przed kolejnym ponownym połączeniem w milisekundach