Perché sono stati introdotti gli eventi server-sent in HTML5?

Per implementare un canale di comunicazione unidirezionale tra server e client. Il server può inviare dati al client in qualsiasi momento dopo aver stabilito la connessione.

Caratteristiche e vantaggi principali:

• Efficienza: Si utilizza una normale connessione HTTP, minimizzando i costi rispetto al polling.
• Semplicità: L'API degli eventi inviati dal server (SSE) è più semplice da usare rispetto ai WebSocket per comunicazioni unidirezionali.
• Riconnessione automatica: Il browser tenta di riconnettersi automaticamente in caso di interruzione della connessione.
• Supporto dei tipi di dati: Supporta l'invio di dati testuali in formato text/event-stream.
• Compatibilità con i browser: Ampiamente supportato dai browser moderni.

Applicazioni:

• Aggiornamento in tempo reale dei feed di notizie.
• Notifiche di eventi (ad esempio, nuovi messaggi).
• Monitoraggio dei dati in tempo reale (ad esempio, quotazioni di borsa).
• Progresso di compiti lunghi.

Questa è un'alternativa al polling tradizionale, dove il client richiede periodicamente al server se ci sono aggiornamenti. A differenza dei WebSocket, SSE è unidirezionale, semplificando il loro utilizzo quando i dati vengono trasmessi solo dal server al client.

Esempio lato client (JavaScript):

const eventSource = new EventSource('/events'); // URL per ricevere eventi dal server

eventSource.onmessage = function(event) {
  // Elaborazione dei dati ricevuti
  console.log('Messaggio ricevuto:', event.data);
};

eventSource.onerror = function(error) {
  // Gestione degli errori di connessione
  console.error('Errore Server-Sent Events:', error);
};

eventSource.addEventListener('customEvent', function(event) {
  // Elaborazione dell'evento personalizzato di tipo 'customEvent'
  console.log('Evento personalizzato ricevuto:', event.data);
});

Esempio del formato dati lato server:

event: customEvent
data: {"message": "Ciao!"}

data: Messaggio di testo semplice

id: 123 // Identificatore dell'evento, usato per il riconnessione automatica

retry: 5000 // Ritardo prima della prossima riconnessione in millisecondi