Sobes.tech
Middle

Dlaczego w HTML5 wprowadzono zdarzenia server-sent?

sobes.tech AI

Odpowiedź od AI

Wydarzenia wysyłane przez serwer (SSE) zostały wprowadzone w HTML5, aby przesyłać dane z serwera do klienta w jednym kierunku, w czasie rzeczywistym, za pomocą połączenia HTTP. Pozwala to na odbieranie aktualizacji od serwera bez konieczności ciągłego wysyłania żądań przez klienta (polling). Główne zalety w porównaniu z innymi technologiami:

  • Prostota: Używają zwykłego połączenia HTTP, co ułatwia integrację z istniejącymi technologiami i infrastrukturą webową.
  • Wydajność: Pozwalają serwerowi wysyłać dane, gdy są gotowe, zmniejszając obciążenie sieci i serwera w porównaniu do częstego pollingowania.
  • Automatyczne ponowne łączenie: Przeglądarka automatycznie próbuje przywrócić połączenie w przypadku zerwania.
  • Wbudowane przetwarzanie: API EventSource w przeglądarce zapewnia prosty interfejs do pracy z wydarzeniami i danymi.

Przykład użycia po stronie klienta:

// Tworzymy nowy obiekt EventSource, wskazując URL serwera dla SSE
const eventSource = new EventSource('/updates');

// Obsługa zdarzenia 'message' - odbiór danych od serwera
eventSource.onmessage = function(event) {
  // Wyświetlamy odebrane dane w konsoli
  console.log('Nowe dane od serwera:', event.data);
};

// Obsługa błędów połączenia
eventSource.onerror = function(error) {
  console.error('Wystąpił błąd:', error);
};

Na serwerze odpowiedź powinna mieć MIME typu text/event-stream i być sformatowana w następujący sposób:

data: To jest pierwszy wiersz danych\n
data: To jest drugi wiersz danych\n\n

Każda wiadomość kończy się dwoma znakami nowej linii (\n\n). Każdy wiersz danych zaczyna się od data: . Mogą występować także inne pola, np. event: do wskazania typu zdarzenia lub id: do identyfikatora wiadomości.

Wydarzenia wysyłane przez serwer są dobrym wyborem dla scenariuszy, w których serwer musi wysłać klientowi strumień aktualizacji, takich jak powiadomienia, kanały informacyjne, notowania akcji lub wyniki długotrwałych procesów. Są prostsze do implementacji niż WebSockets dla komunikacji jednokierunkowej.