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

3 votes
737 views
Anonymous User asked 13-Dec-2018 in programming by Anonymous User

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

1 Answer

1 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'
Rahul Roi commented 16-Jan-2019 by Rahul Roi
Nice Answer....!
       0