Skip to main content

HTML Server-Sent Event

Server-Sent Events (SSE) allow a web page to get updates from a server.

What are the Server-Sent Events?​

Whenever we perform some event and send it to the server such as by submitting the form to the server. So such type of event which flows from web browser to web-server are called as a client-side events. But if the server sent some updates or information to the browser, then such events are called server-sent events. Hence, A server sent event occurs when the browser automatically updated from the Server.

The Server-sent events are mono-directional (always come from server to client). Or it may be called as one-way messaging.

The EventSource Object​

In the examples above we used the onmessage event to get messages. But other events are also available:

EventsDescription
onopenWhen a connection to the server is opened
onmessageWhen a message is received
onerrorWhen an error occurs

Server-Sent Events - One Way Messaging​

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.

Receive Server-Sent Event Notifications​

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

var source = new EventSource("demo_sse.php");  
source.onmessage = function(event) {  
	document.getElementById("result").innerHTML += event.data + "<br>";  
};

Example explained:

  • Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php")
  • Each time an update is received, the onmessage event occurs
  • When an onmessage event occurs, put the received data into the element with id="result"

Check Server-Sent Events Support​

In the example above there were some extra lines of code to check browser support for server-sent events:

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

Server-Side Code Example​

For the example above to work, you need a server capable of sending data updates (like PHP or ASP).

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending event streams.

Code in PHP (demo_sse.php):

<?php  
header('Content-Type: text/event-stream');  
header('Cache-Control: no-cache');  
  
$time = date('r');  
echo  "data: The server time is: {$time}\n\n";  
flush();  
?>

Code in ASP (VB) (demo_sse.asp):

<%  
Response.ContentType = "text/event-stream"  
Response.Expires = -1  
Response.Write("data: The server time is: " & now())  
Response.Flush()  
%>

Code explained:

  • 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

Table of Contents