Server-Sent Events

Content-Type: *

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc. https://www.w3schools.com/htmL/html5_serversentevents.asp

Receive Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

var source = new EventSource("http://localhost:8080/handler");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

Check Server-Sent Events Support

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

Server-Side Code Example

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending event streams. The response messages starts with "data: " and ends with "\n\n".

  • Set the "Content-Type" header to "text/event-stream"

  • Specify that the page should not cache

  • Output the data to send (Always start with "data: ")

  • Flush the output data back to the web page

Last updated

Was this helpful?