Waarom zijn server-sent gebeurtenissen geïntroduceerd in HTML5?

Om een unidirectioneel communicatiekanaal tussen server en client te implementeren. De server kan op elk moment na het tot stand brengen van de verbinding gegevens naar de client sturen.

Belangrijkste kenmerken en voordelen:

• Efficiëntie: Er wordt een gewone HTTP-verbinding gebruikt, waardoor de overhead wordt geminimaliseerd in vergelijking met polling.
• Eenvoud: De API voor server-sent events (SSE) is eenvoudiger te gebruiken dan WebSockets voor unidirectionele communicatie.
• Automatisch opnieuw verbinden: De browser probeert automatisch opnieuw te verbinden bij onderbreking van de verbinding.
• Ondersteuning van datatypes: Het verzenden van tekstgegevens in het formaat text/event-stream wordt ondersteund.
• Browserondersteuning: Wordt breed ondersteund door moderne browsers.

Toepassingen:

• Real-time updates van nieuwskanalen.
• Meldingen over gebeurtenissen (bijvoorbeeld nieuwe berichten).
• Monitoring van gegevens in real-time (bijvoorbeeld beurskoersen).
• Voortgang van langdurige taken.

Dit is een alternatief voor traditioneel polling, waarbij de client periodiek bij de server navraagt of er updates zijn. In tegenstelling tot WebSockets is SSE unidirectioneel, wat het gebruik vereenvoudigt wanneer gegevens alleen van de server naar de client worden verzonden.

Voorbeeld aan de clientzijde (JavaScript):

const eventSource = new EventSource('/events'); // URL voor het ontvangen van gebeurtenissen van de server

eventSource.onmessage = function(event) {
  // Verwerking van de ontvangen gegevens
  console.log('Ontvangen bericht:', event.data);
};

eventSource.onerror = function(error) {
  // Afhandeling van verbindingsfouten
  console.error('Server-Sent Events fout:', error);
};

eventSource.addEventListener('customEvent', function(event) {
  // Verwerking van een aangepast evenement van het type 'customEvent'
  console.log('Aangepast evenement ontvangen:', event.data);
});

Voorbeeld van het gegevensformaat aan de serverzijde:

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

data: Eenvoudig tekstbericht

id: 123 // Gebeurtenis-ID, wordt gebruikt voor automatische reconnection

retry: 5000 // Wachtduur voor de volgende reconnection in milliseconden