0Pricing
Frontend Academy · Lekcja

Server-Sent Events do strumieniowania jednokierunkowego

Użyje Pan/Pani EventSource do odbierania strumienia zdarzeń wysyłanych przez serwer, przeanalizuje typy i dane zdarzeń oraz automatycznie połączy się ponownie po przerwach w sieci.

Server-Sent Events do strumieniowania jednokierunkowego to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym są Server-Sent Events?

SSE to oparty na HTTP standardowy protokół, który umożliwia serwerowi wysyłanie zdarzeń do przeglądarki za pośrednictwem pojedynczego, długotrwałego połączenia. Jednokierunkowość: tylko serwer → klient. Jest prostszy niż WebSocket, gdy nie ma potrzeby wysyłania danych w drugą stronę.

EventSource API

Przeglądarkowy interfejs EventSource łączy się z adresem URL i nasłuchuje zdarzeń. Jest standardowy i wbudowany, więc nie wymaga biblioteki.

const es = new EventSource('/api/events');

es.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

es.addEventListener('error', () => {
  console.error('Connection error');
});

Format odpowiedzi serwera

Serwer wysyła strumień zwykłego tekstu z nagłówkiem Content-Type: text/event-stream. Każda wiadomość zaczyna się od data: i kończy pustym wierszem.

// Server response:
Content-Type: text/event-stream
Cache-Control: no-cache

data: hello\n\n
data: another message\n\n
data: {"type":"chat","text":"Hi"}\n\n

Nazwane zdarzenia

Serwer może nadawać zdarzeniom nazwy za pomocą event:. Przeglądarka wywołuje je z użyciem tej nazwy.

// Server:
event: chat
data: {"user":"Alice","text":"Hi"}\n\n

event: user-joined
data: {"name":"Bob"}\n\n

// Client:
es.addEventListener('chat', (e) => { /* ... */ });
es.addEventListener('user-joined', (e) => { /* ... */ });

Automatyczne ponowne łączenie

EventSource automatycznie ponownie łączy się po rozłączeniu, po około 3 sekundach. Serwer może zasugerować opóźnienie za pomocą retry: 5000.

// Server:
retry: 5000\n
data: hello\n\n

Identyfikatory zdarzeń i wznawianie

Serwer wysyła id: wraz z każdym zdarzeniem. Po ponownym połączeniu przeglądarka wysyła identyfikator ostatnio odebranego zdarzenia w nagłówku Last-Event-ID — serwer może wznowić wysyłanie od tego miejsca.

// Server:
id: 42
event: chat
data: {"text":"Hi"}\n\n

id: 43
event: chat
data: {"text":"How are you?"}\n\n

// Client reconnect sends: Last-Event-ID: 43

Analizowanie JSON

event.data zawsze jest ciągiem znaków. JSON należy przeanalizować samodzielnie.

es.addEventListener('chat', (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.user, msg.text);
});

Zamykanie połączenia

Należy wywołać es.close(), aby zatrzymać połączenie. Przeglądarki zamykają je również po zamknięciu karty.

es.close();

// In React, close in useEffect cleanup:
useEffect(() => {
  const es = new EventSource('/events');
  es.onmessage = (e) => setData(d => [...d, e.data]);
  return () => es.close();
}, []);

Przypadki użycia

Pulpity na żywo (metryki, monitorowanie). Powiadomienia (nowe wiadomości e-mail, alerty). Notowania giełdowe. Uzupełnienia czatu AI (każdy token to osobne zdarzenie). Wyniki sportowe na żywo. Aktualizacje stanu długotrwałych zadań.

Praktyczny przykład: strumieniowanie AI

Uzupełnienia OpenAI i Anthropic są przesyłane strumieniowo jako SSE. Każdy token pojawia się jako zdarzenie danych — należy renderować je stopniowo, aby uzyskać efekt pisania.

const es = new EventSource('/api/chat?prompt=hello');
let text = '';
es.addEventListener('message', (e) => {
  if (e.data === '[DONE]') {
    es.close();
    return;
  }
  const { delta } = JSON.parse(e.data);
  text += delta;
  setMessage(text);
});

SSE a WebSocket i polling

SSE: oparty na HTTP, tylko z serwera do klienta, z automatycznym ponownym łączeniem i prosty. WebSocket: pełny dupleks, mniejszy narzut na wiadomość, ale większa złożoność. Polling: najprostszy, lecz zapewnia największe opóźnienia i obciążenie. SSE należy wybrać do jednokierunkowego strumieniowania, a WS do komunikacji dwukierunkowej, na przykład w czacie.

Ograniczenia przeglądarek i serwery proxy

Przeglądarki ograniczają liczbę jednoczesnych połączeń SSE dla jednego źródła do około 6. Niektóre firmowe serwery proxy i starsze moduły równoważenia obciążenia buforują odpowiedzi, co powoduje nieprawidłowe działanie SSE — należy testować w docelowych środowiskach. Użycie HTTPS pozwala ominąć buforowanie przez większość serwerów proxy.

CORS dla SSE

EventSource respektuje zasady CORS. Serwer musi wysyłać nagłówek Access-Control-Allow-Origin. W przypadku danych uwierzytelniających należy przekazać { withCredentials: true } do konstruktora EventSource i ustawić po stronie serwera Access-Control-Allow-Credentials: true.

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między Server-Sent Events a WebSocket?

Podsumowanie: Server-Sent Events

EventSource otwiera strumień HTTP zdarzeń o typie text/event-stream. Serwer wysyła wiadomości „data:” z opcjonalną nazwą event: i identyfikatorem id:. Automatyczne ponowne łączenie umożliwia wznowienie za pomocą Last-Event-ID. Komunikacja jest jednokierunkowa (serwer → klient). SSE świetnie sprawdza się w przypadku pulpitów na żywo, strumieniowania AI i powiadomień. Jest prostszy niż WebSocket, gdy nie jest potrzebna komunikacja dwukierunkowa. Należy pamiętać o limitach jednoczesnych połączeń i buforowaniu przez serwery proxy.

Często zadawane pytania

Czy lekcja „Server-Sent Events do strumieniowania jednokierunkowego” jest bezpłatna?

Tak — pełny tekst „Server-Sent Events do strumieniowania jednokierunkowego” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Server-Sent Events do strumieniowania jednokierunkowego”?

Użyje Pan/Pani EventSource do odbierania strumienia zdarzeń wysyłanych przez serwer, przeanalizuje typy i dane zdarzeń oraz automatycznie połączy się ponownie po przerwach w sieci. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Server-Sent Events do strumieniowania jednokierunkowego”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. WebSocket API: open, message, close, error
  2. Integracja klienta Socket.io
  3. Server-Sent Events do strumieniowania jednokierunkowego
  4. Wzorce interfejsów czasu rzeczywistego
← Powrót do Frontend Academy