Learn HTML SSE API

Tips (Total 7)

1. What is HTML SSE API

2. How to add Server-Sent Events - One Way Messaging

3. What types of browsers will support HTML SSE API

4. How to Receive Server-Sent Event Notifications

5. How to Check Server-Sent Events Support

6. What is Server-Side Code Example

7. What are The EventSource Object

# Tips-1) What is HTML SSE API

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

Whenever we perform some event and send it to the server such as by submitting the form to the server. So such type of event which flows from web browser to web-server are called as a client-side events. But if the server sent some updates or information to the browser, then such events are called server-sent events. Hence A server sent event occurs when the browser automatically updated from the Server.

The Server-sent events are mono-directional (always come from server to client). Or it may be called as one-way messaging.

# Tips-2) How to add 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.

Example of Server-Sent Events - One Way Messaging

To work with server-sent, we need a server which can send data updates to the web browser. For this, we need to create a file in ASP, PHP or any dynamic language. Following is the example to show the server updates: ServerUpdate.php:

ServerUpdate.php

Example: HTML

    <?php  
     header('Content-Type: text/event-stream');  
     header('Cache-Control: no-cache');  
    /Get the current time of server  
      $time = date('r');  
     echo "data: The Current Server time is: {$time}\n\n";  
     flush();  
     ?>

Code Explanation: Server-Sent Events - One Way Messaging

ServerUpdate.php

Example: HTML

       <!DOCTYPE html>  
    <html>  
    <head>  
      <style type="text/css">  
        div{  
          text-align: center;  
          background-color: #98f5ff;  
        }  
      </style>  
    </head>  
    <body>  
      
    <h1 align="center">Dynamic Server Updates</h1>  
    <div id="output"></div>  
    <script>  
    if(typeof(EventSource) !== "undefined") {  
      var source = new EventSource("ServerUpdate.php");  
      source.onmessage = function(event) {  
        document.getElementById("output").innerHTML += event.data + "<br>";  
      }  
    } else {  
      alert("Sorry, your browser does not support the server sent updates");}  
    </script>  
    </body>  
    </html>

# Tips-3) What types of browsers will support HTML SSE API

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

# Tips-4) How to Receive Server-Sent Event Notifications

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

Example of Receiving Server-Sent Event Notifications

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

index.html

Example: HTML

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

Output should be:

Example explained: Receive Server-Sent Event Notifications

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

# Tips-5) How to 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:

Example of Browsing Support check HTML SSE API

First we need to check the browser support for server-sent event. So to check the browser support for Server-sent event we will check the EventSource object is true or not. If it is true then it will give alert for supporting else it will give alert for not supporting.

index.html

Example: HTML

<script>
if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
} 
</script>

Output should be:

# Tips-6) What is Server-Side Code Example

For the example above to work, you 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.

Example of Server-Side Code Example Code in PHP

Code in PHP

demo_sse.php

Example: 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();
?>

Example of Server-Side Code Example Code in PHP Code in ASP

Code in ASP

demo_sse.asp

Example: ASP

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

Code explained: Server-Side Code Example

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

# Tips-7) What are 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