HTML5 Server-Sent Events

In this chapter we learn Server Sent Events. it is very helpful allow web page to get update from server.

Server-Sent Events - One Way Messaging

Server side event web page automatic gat update from server.

Server side event update are very populer this field such as Facebook Twitter News feed stock price sport result etc

Browser Support

The numbers in the table specify the first browser version that fully support server-sent events.

SSE 6.0 Not supported 6.0 5.0 11.5

Receive Server-Sent Event Notifications

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


var source = new EventSource("test_file.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
Try it yourself »

Example explained:

  • Create a new EventSource object, and specify the URL of the page sending the updates (in this example "test_file.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 tryit 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

we are already learn , we 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.

Demo Code in PHP (test_cod.php):

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";

Demo Code in ASP (test_cod.asp):

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

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

The EventSource Object

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

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs