What is SSE in HTML5? And also describe the concept, how to automatically gets update a webpage from a server?

"SSE(Server-Sent Event) "

Server-Sent Event provides a mechanism By which, we can send the response from a server without any request. Because in the earlier time when the user asked some updates from a server (that’s called pooling) then this mechanism isn’t easily handled by the users, and for removing the burden of pooling html5 added the concept of SSE(Server-Sent Event).

What is SSE in HTML5? And also describe the concept, how to automatically gets update a webpage from a server?

Server-Sent Event is a technology that enabling a browser when a web page gets an update automatically from a server.

And in present time, a real example of SSE is- facebook /twitter updates, news feeds update, Gmail updates….etc.

Event of SSE :

It mainly has three events. And it’s called when-

onopen --- use for connection establish.
onmessage--- when any updates are available.
onerror --- when any error occurs.

Properties of SSE :

event.data
event.message

NOTE:

For SSE, on Server site, we must set the

Content-Type:text/event-stream

Cache-control:no-cache

During the response from the server, output must be prefixed with “data :” string (I mean information always starts from “data:” string).
After set the data you must add a flush() method for flushing the data and data go back to the web page.

Here we implement the simple example to gets the server response when a webpage is loaded.

<html>
<head><title> SSE Example</title>
<script>
function check_updates()
{
if(typeof(EventSource) !== "undefined") {
 var source = new EventSource("server.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, Your Browser doesn't support SSE...";
}
}
</script>

</head>
<body onload="check_updates();">
<h1>Get the updates from a Server</h1>
<div id="result"></div>
</body>
</html>

Server Site Code :

If you are using PHP language then write the below code.

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

$currentTime = date('r');
echo "data:Now, The server time is: {$ currentTime } \n";
flush();
?>

If you are using ASP.NET language then write the below code.

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

"Thanks!!! for Reading"

1

Nice Answer....! Rahul Roi | 7 years ago

What is SSE in HTML5? And also describe the concept, how to automatically gets update a webpage from a server?

1 Answer

Write Your Answer