The HTML5 server-sent event feature allows a web browser to receive real-time updates and information from a server using HTTP connections.
What are the Server-Sent Events?
When an action is executed and transmitted to the server, like submitting a form, these events are known as client-side events as they originate from the web browser and are sent to the web server. On the other hand, events where the server sends updates or data to the browser are referred to as server-sent events. Therefore, a server-sent event occurs when the browser is automatically updated by the server.
Server-sent events are unidirectional, meaning they exclusively flow from the server to the client, also known as one-way messaging.
Receiving events from the server
The Server-Sent Events feature utilizes the EventSource interface to fetch events from the server. It defines the Uniform Resource Identifier (URI) of the script responsible for producing the events.
Example:
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
Code Explanation:
- First, create the new EventSource object, and define the URI of the page which sends server updates. Here we have taken ServerUpdate.php for sending the updates to the web browser.
- Each time when an update occurs from the server, then the onmessage event occurs and print the message on the web page.
- The occurred message can be displayed on div using id "output".
Check browser support for Server-sent Event
Initially, it is necessary to verify the browser's compatibility with server-sent events. To confirm this compatibility, we can assess the validity of the EventSource object. If the object is deemed valid, a message indicating support will be displayed; conversely, if it is not valid, a message indicating lack of support will be displayed.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined"){
alert("Hey! Your browser is supporting.");
}
else{
alert("Sorry! Your browser is not supporting.");
}
</script>
</body>
</html>
Sending events from the server:
In order to utilize server-sent events, it is essential to have a server capable of transmitting data updates to the web browser. This can be achieved by developing a file using ASP, PHP, or any other dynamic programming language.
An illustration is provided below to demonstrate the updates on the server:
ServerUpdate.php:
Example:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
//Get the current time of server
$time = date('r');
echo "data: The Current Server time is: {$time}\n\n";
flush();
?>
Code Explanation:
- In the first line of the code, we have set the "Content-type" header to "text/event-stream". It is required for server-side event standard.
- The second line informs the server to turn off the caching else the server updates may be cached.
- echo "data: The Current Server time is: {$time}\n\n"; It creates the output of data to send, and it must always start with data: .
- Then, we have used the flush method, which makes sure that data is sent right away to the web page.
Complete Example:
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
text-align: center;
background-color: #98f5ff;
}
</style>
</head>
<body>
<h1 align="center">Dynamic Server Updates</h1>
<div id="output"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}
} else {
alert("Sorry, your browser does not support the server sent updates");}
</script>
</body>
</html>
Note: To execute the above code on your browser, you need a server installed on your system, and then run this on localhost. You can install any server such as MYSQL, XAMPP, etc.
Browser Support:
| API | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
SSE |
6.0 | Not Supported | 6.0 | 11.5 | 5.0 |