This chapter explains basics about the Server-Sent Event (SSE). To learn and practice this technique in greater details refer to the Server-sent events in HTML topic.

In a simple HTTP request-response scenario a user opens a connection & sends a HTTP request to the server (for example a HTTP GET request), and then receives a HTTP response back from the server. Then server closes the connection with the user once the response is fully sent/received. This SSE connection always starts by a user when the user requests all the data. Actually, Server-Sent Event (SSE) is mechanism that enables server to asynchronously send the data from the server to the user once the user-server connection is established by the user. Once the user established the connection, the server continuously sends data and decides to send it to the user whenever a new "piece" of data is available. 

Imagine that your country’s national football team is playing for the World football Championship & unfortunately you can’t watch it but still want to keep track of the event. Then SSE is the elixir for you in such bad times, your national news service may have built a sport's portal that updates you with every goal. You visit its URL and then the real magic begins the SSE send live updates directly to your browser. You always wonder how they did that; the answer is Server-sent events...
The Server keeps on sending data-events to the user, whenever new “chunk” of data is available on the server. That is why it got the name the Server-Sent Events.

Server-side considerations

Because SSEs are streams of data, it is important for the client/user to have long-lived connections. You are going to use a server which can handle large numbers of simultaneous connections.
Event-driven servers are, of course, well-congruent to streaming events. These include Juggernaut, Node.js, and Twisted. There is an nginx-push-stream-module for Nginx. Server configuration is not a part of this article; however, it can vary with the server used by the client.

Possible Applications

A few examples of applications using of SSE:

  • You can see SSE in a real-time chart streaming live stock prices,
  • a live Twitter/Fb wall receiving live updates by Twitter’s streaming API,
  • a monitor for server stats like health, uptime, and other running processes,
  • a sports portal using SSE push live updates right to your browser.

Overview of the API

The main points of interest:

  • new EventSource(url) - It creates EventSource object, which immediately starts looking for new events on the visited URL.
  • readyState - It is for the EventSource & tells us whether we are connecting (0), open (1), or closed (2).
  • onopen - When the EventSource connection opens it will send an open event to the client's browser. Event can be handled by defining a function by setting the onopen attribute.
  • onmessage - By default, Streamed events are message events. onmessage use to define a handler function in order to manage message events.
  • addEventListener - We can also use addEventListener() to listen for new events and it is the only way to handle custom events.
  • event.data - It Returns the data or message sent to the client as part of the message event.
  • close - it closes the connection from the client/user side.

Simple Example of SSE

var source = new EventSource('/stats'); source.onopen = function () { connectionOpen(true); }; 

source.onerror = function () { connectionOpen(false); }; 

source.addEventListener('connections', updateConnections, false);

source.addEventListener('requests', updateRequests, false); source.addEventListener('uptime', updateUptime, false); 

source.onmessage = function (event) { // a message without a type was fired };

 

›› go to examples ››