HTML5 APIs – Server Sent Events

What is Server-Sent Event?

HTML5 server-sent event enables a new way of communication between the web pages with the web server.

Server-Sent Events are received from web server to webpage client via HTTP connection.

Server-Sent Events can be updates or other information received by the browser.

Server-sent events always comes from server to client.

Server-sent events are called as mono-directional or one-way messaging.

How Server-Sent Event works ?

When we submit a form in the webpage, that event is called as client-side events.

That client-side events are pushed to server and the server send the response back to webpage.

Such events are called as server-sent events.

XMLHttpRequest object helps our JavaScript code make a request to the web server.

Once the web server sends the response the communication is over.

XMLHttpRequest object is the core of all Ajax operations.

Note : Server-sent events feature is supported in all major modern web browsers like Firefox, Chrome, Safari and Opera except Internet Explorer.

Tutorial on html !!!

Click to Learn More about – HTML Tutorial for beginners

1. Checking browser support for Server-Sent Event

We have to check the browser support for server-sent event.

This will check the EventSource object is true or not. If it is true then it supports or else it will not support.

Example :

<!DOCTYPE html>
  <title>Checking Browser SSE API</title>
<div id="output"></div>
<script type="text/javascript">

       alert("Your browser is supports.");
    alert("Your browser does not support.");

Output :

2. Sending Messages with a Server Script

We are creating a new example file “sse_example1.php”.

Example :

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";

1. “Content-type” is set as “text/event-stream”, its a standard server-side event.

2. “Cache-Control” is set as “no-cache” to turn off the caching else the server updates may be cached.

3. echo “data: The server time is: {$time}\n\n” creates data to send, it starts with data.

4. flush () method, makes sure that data is sent right away to the web page.

3. Processing Messages in a Web Page

EventSource object is used to receive server-sent event messages.

HTML document receives the current time reported by the web server and display it to the user.

Example :

<!DOCTYPE html>
<html lang="en">
<title>Using Server-Sent Events</title>
    window.onload = function() {
        var source = new EventSource("get_servertime.php");
        source.onmessage = function(event) {
            document.getElementById("result").innerHTML += "New time received from web server: " + + "<br>";
    <div id="result">
        <!--Server response will be inserted here-->

Output :