HTML5 Server-Sent Events

The HTML5 server-sent events allows a web page to get information from the web server automatically.

What is Server-Sent Events

HTML5 server-sent events is a new way for the web pages to communicating with the web server. It is also possible with the XMLHttpRequest object that lets your JavaScript code make a request to the web server. But its a one-for-one exchange — that means once the web server provides its response, the communication is over.

However, there are some situations where web pages require a longer-term connection to the web server. A typical example is stock quotes on finance websites where price updated automatically. Another example is a news ticker running on various media websites.

You can create such effect with the HTML5 server-sent events feature. It allows a web page to hold an open connection to the web server so that the web server can send a new response automatically at any time, and there's no need to reconnect, and run the same server script from scratch over and over again.

 

Tip:The HTML5's server-sent events feature is supported in all major modern browsers like Firefox, Chrome, Safari and Opera except Internet Explorer.

Sending Messages with a Server Script

Let's create a PHP file named 'server_time.php' and type the following script into it. It will simply reports the current time of the web server's built-in clock in regular intervals. Later we will receive this time and update the web page accordingly.

Example

Download
  • <?php
  • header("Content-Type: text/event-stream");
  • header("Cache-Control: no-cache");
  •  
  • // Get the current time on server
  • $currentTime = date("h:i:s", time());
  •  
  • // Send it in a message
  • echo "data: " . $currentTime . "\n\n";
  • flush();
  • ?>

The first two line of the PHP script sets two important headers. First, it sets the MIME type to text/event-stream, which is required by the server-side event standard. The second line tells the web server to turn off caching otherwise the output of your script may be cached.

Every message send through HTML5 server-sent events must start with the text data: followed by the actual message text and the new line character sequence (\n\n).

Finally, we have used the PHP flush() function to make sure that the data is sent right away, rather than buffered until the PHP code is complete.


Processing Messages in a Web Page

The EventSource object is used to receive server-sent event messages. Let's create an HTML document named 'demo_sse.html' and place it in the same project directory where the 'server_time.php' file is located. This HTML document simply receives the current time reported by the web server and display it to the user.

Example

Download
  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>HTML5 Server-Sent Events</title>
  • <script type="text/javascript">
  •     window.onload = function(){
  •         var source = new EventSource("server_time.php");
  •         source.onmessage = function(event){
  •             document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
  •         };
  •     };
  • </script>
  • </head>
  • <body>
  •     <div id="result">
  •         <!--Server response will be inserted here-->
  •     </div>
  • </body>
  • </html>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.