Hello, world!

HTML 5 Server Sent Events HTML

In the HTML tutorial you will be taught more details about the HTML5 - Server Sent Events, supported browsers and the server-side code example.



HTML5 - Server Sent Events

The type of event that allows a web browser to get updates from a web server is called Server-Sent Events.

Server-Sent Events - One Way Messaging

Using a server-sent event allows web page automatically gets latest data from a server.
Though previously this was also possible, however the web page would have to inquire first if any updates were available. When the server-sent events are created, all the updates come automatically.
Some of the examples are: Facebook/Twitter/Instagram updates, stock price updates, news feeds, sport results and others.

Browser Support

This table indicates the number of the first browser version that fully supports server-sent events.
API SSE
Chrome 6.0
Internet Explorer Not supported
Firefox 6.0
Safari 5.0
Opera 11.5


The EventSource Object

We applied the onmessage event to acquire messages in the illustrations above. But there are also other events available:
onopen - Function to call when the connection to the server has opened
onmessage - Function to call when a message arrived
onerror - Function to call when an error takes place

The Receive Server-Sent Event Notifications

The EventSource object allows you to receive server-sent event notifications:
 
Example:
var source = new EventSource("sample_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

Details of the Example above:
Build a new EventSource object, and identify the web address (URL) of the page transferring the updates (in this example "sample_sse.php")
The onmessage event takes place every time an update is acquired.
Place the acquired data into the element with id="result" after an onmessage event takes place.

Check Server-Sent Events Support

In example above there were some additional lines of code to verify browser support for server-sent events:
 
if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Put some code.....
} else {
    // Sorry! No server-sent events support..
}
Check Server-Sent Events Support

Server-Side Code Example

You will need a server that is capable of sending data updates such PHP or ASP in order to execute the example above.
The syntax is easy for server-side event stream. Set the "Content-Type" header to "text/event-stream". You can begin sending event streams now.

Code in PHP (sample_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) (sample_sse.asp):
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Details of the Code above:
Put "text/event-stream" on the "Content-Type" header
Indicate that the web page should not store
Output the data to submit (Always start with "data: ")
Load the output data back to the web page