We use the HTML5 server-sent event to enable a browser to receive automatic updates from a server. A server-sent event occurs when a server automatically sends some updates to the browser. It is one-way messaging or mono-directional.
Receiving events from the server:
We use the EventSource object to receive events from a server. The URI of the script is thus specified to generate the events.
Example:
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("Example.php");
source.onmessage = function(event) {
document.getElementById("sse").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("sse").innerHTML = "Server-sent events is not supported by the browser.";
}
</script>
Explanation:
In the above example, the new EventSource object is used to define the URI of the page which sends server updates, and the Example.php is used for sending the updates to the web browser. The onmessage event occurs when an update from the server occurs. The message is then printed on the web page.
To check the browser support for Server-sent Event:
To check the browser support for the Server-sent event, the EventSource object is checked to be true or not. An alert is displayed for supporting if it is true else it will be displayed alert for not supporting.
Example:
<!DOCTYPE html>
<html>
<body>
<div id="op"></div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined"){
alert("Server-sent events is supported by the browser.");
}
else{
alert("Server-sent events is not supported by the browser.");
}
</script>
</body>
</html>
Explanation:
In the above example, we are checking the browser support for Server-sent Event.
To send events from the server:
A server is needed to send updates to the browser to work with server-sent. Creating a file in ASP, PHP, or any dynamic language is required.
Example: 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();
?>
Explanation:
In the above example, the “Content-type” header is set to “text/event-stream” which is needed for server-side event standards. The server is then informed to turn off caching. In any other case, the server updates may be cached. The echo “data: The Current Server time is: {$time}\n\n” is used to create the output of data to be sent. The flush () method is used to ensure that the data is sent right away to the web page.
Example: Complete Example.
<!DOCTYPE html>
<html>
<body>
<h1>Retrieving server updates</h1>
<div id="sse"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("Example.php");
source.onmessage = function(event) {
document.getElementById("sse").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("sse").innerHTML = "Server-sent events is not supported by the browser.";
}
</script>
</body>
</html>
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.