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

3 votes
304 views
Rahul Ahuja asked 13-Dec-2018 in programming by Rahul Ahuja

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

1 Answer

0 votes
Arti Mishra answered 13-Dec-2018 by Arti Mishra
"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"
RahulRajpoot commented 16-Jan-2019 by RahulRajpoot
Nice Answer....!
       0