What is Server-Sent Event?
HTML5 server-sent event enables a new way of communication between the web pages with the web server.
Server-Sent Events are received from web server to webpage client via HTTP connection.
Server-Sent Events can be updates or other information received by the browser.
Server-sent events always comes from server to client.
Server-sent events are called as mono-directional or one-way messaging.
How Server-Sent Event works ?
When we submit a form in the webpage, that event is called as client-side events.
That client-side events are pushed to server and the server send the response back to webpage.
Such events are called as server-sent events.
XMLHttpRequest object helps our JavaScript code make a request to the web server.
Once the web server sends the response the communication is over.
XMLHttpRequest object is the core of all Ajax operations.
Note : Server-sent events feature is supported in all major modern web browsers like Firefox, Chrome, Safari and Opera except Internet Explorer.
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
1. Checking browser support for Server-Sent Event
We have to check the browser support for server-sent event.
This will check the EventSource object is true or not. If it is true then it supports or else it will not support.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Checking Browser SSE API</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined"){
alert("Your browser is supports.");
}
else{
alert("Your browser does not support.");
}
</script>
</body>
</html>
Output :
2. Sending Messages with a Server Script
We are creating a new example file “sse_example1.php”.
Example :
<?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();
?>
1. “Content-type” is set as “text/event-stream”, its a standard server-side event.
2. “Cache-Control” is set as “no-cache” to turn off the caching else the server updates may be cached.
3. echo “data: The server time is: {$time}\n\n” creates data to send, it starts with data.
4. flush () method, makes sure that data is sent right away to the web page.
3. Processing Messages in a Web Page
EventSource object is used to receive server-sent event messages.
HTML document receives the current time reported by the web server and display it to the user.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
window.onload = function() {
var source = new EventSource("get_servertime.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="result">
<!--Server response will be inserted here-->
</div>
</body>
</html>
Output :
