LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML server sent events


HTML5 Server-Sent Events

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


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.

Browser Support

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

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • NOT SUPPORTED
  • YES
  • YES

Version

  • 6.0
  • 6.0
  • NOT SUPPORTED
  • 5.0
  • 11.5

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.

<?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.

<!DOCTYPE html>
<html lang="en">
<head>
       <title>HTML5 Server-Sent Events</title>

       <script>
       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>


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

x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine