`EventSource (Server-Sent Events)` în JavaScript

Cereri HTTP și comunicare Toate browserele moderne

Primește un flux de mesaje de la server printr-o conexiune HTTP deschisă, cu reconectare automată.

Sintaxă

const sursa = new EventSource("/api/flux");
sursa.onmessage = (e) => { ... };
sursa.close()

Ce face `EventSource (Server-Sent Events)`

EventSource deschide o conexiune pe care doar serverul trimite date (Server-Sent Events), în format text. Este mai simplu decât un WebSocket când clientul doar ascultă: știri, progresul unei operații, răspunsurile unui chatbot afișate pe măsură ce sunt generate.

Dacă legătura cade, browserul se reconectează singur. Mesajele ajung în evenimentul message (sau în evenimente cu nume, dacă serverul le trimite cu event:), iar close() oprește conexiunea definitiv.

Parametri

Parametru	Descriere
`url`	Adresa fluxului (serverul răspunde cu `Content-Type: text/event-stream`).
`optiuni`	Opțional. `{ withCredentials: true }` pentru cookie-uri pe alt domeniu.

Ce returnează

Un obiect EventSource.

Exemple

Exemplul 1: Progresul unui export

const sursa = new EventSource("/api/export/progres");

sursa.addEventListener("message", (e) => {
  const { procent } = JSON.parse(e.data);
  console.log(`progres: ${procent}%`);
  if (procent === 100) sursa.close();
});

Rezultat posibil (depinde de răspunsul serverului)

progres: 25%
progres: 60%
progres: 100%

Greșeli frecvente

Uiți close() la final. Browserul consideră închiderea de către server o întrerupere și se reconectează la nesfârșit.

Comenzi înrudite

WebSocket: O conexiune permanentă, în ambele sensuri, cu un server: chat, notificări, prețuri în timp real.
fetch: Trimite o cerere HTTP la un server și primește răspunsul, fără reîncărcarea paginii.
JSON.parse: Transformă un text JSON într-un obiect sau tablou JavaScript.

Ce face EventSource (Server-Sent Events)