Did you find this useful?
Socialize it today.


HTML5 Server-Sent Events

Thursday, November 08, 2012

For most web developers, communicating with a web server is dependent upon the client browser initiating an HTTP request. With this model, the client sends the HTTP request and waits until the HTTP response is received. The server cannot initiate the communication with the client unless it is requested. This makes it challenging to develop web applications that behave like traditional desktop clients. For example, developing a web application to monitor a real-time status is very challenging. HTML5 is designed to with a component known as Server-Sent Events. HTML 5 defines an application programming interface (API) for opening an HTTP connection for receiving push notifications from the web server. Using Server-Sent Events, a web page automatically gets updates from a server without the client having to request the information.


Browser Support

Server-Sent Events are supported by all major browsers, such as Firefox, Chrome, Safari and Opera. Server-Sent Events are not supported by Internet Explorer.


Client-side JavaScript API

Server-Sent Events are sent over the HTTP protocol. No special protocols or ports are required to get this working. However, we do need the help of client-side and server-side scripting so that the client browser can interact with the web server. To subscribe to an event stream, create an EventSource object and pass it the URL of your stream. You also should consider checking to make sure the browser can support Server-Sent Events.


<script>
    if (typeof (EventSource) !== "undefined") {
        var source = new EventSource('html5sse.php');
        source.onmessage = function (e) {
            document.getElementById("sseResult").innerHTML += e.data + '<br />';
        };
    } else {
        document.getElementById("sseResult").innerHTML = "Your browser does not support Server Sent Events.";
    }
<script>


The script first checks whether the browser supports Server-Sent events. If it does not, feedback is provided back to the user instead. If the browser does support the function, the Server-Sent Events will begin. The script creates an object of the EventSource class, passing it the URL of the server side script that will be providing the streamed data updates. Then the script sets up an event listener function to execute when the EventSource object receives an update from the server. When this happens, the script simply gets a reference to the update page element and writes the new data to it. In this example, we only used the onmessage event. However, there are other events that you can use.



EventDescription
onerrorThis event is triggered when an error occurs
onmessageThis event is triggered when a message is received from the web server
onopenThis event is triggered when a connection to the server is opened.


Server-side Scripts

On the server-side, you will need to have the web server capable of sending data updates. This is not possible with HTML code alone. You will need to incorporate a server-side scripting language such as ASP.NET, Classic ASP, or PHP. The syntax for the event stream coming from the web server is fairly simple. You should note that you will need to set the "Content-Type" header to "text/event-stream". In the following PHP example, stream back to the web client, the time configured on the server.


<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>



html5 server sent events




Conclusion

In this tutorial we have covered the basics of using Server-Sent events with HTML5, JavaScript and PHP. In our example, we used our server-side script to generate the time on the web server. Of course, while not very useful, it does provide you with a starting point that you can incorporate into your own projects.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML5: The Missing Manual The Definitive Guide to HTML5 Head First HTML5 Programming: Building Web Apps with JavaScript