”;
Server Sent Events are a way of sending data from a server to a web page, without requiring the page to refresh or make requests. These events are useful for creating real-time applications, such as chat, news feeds, or notifications. Using SSE, we can push DOM events continuously from our web server to the visitor”s browser.
The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling. Server-sent events standardize how we stream data from the server to the client.
How to use SSE in Web Application?
To use Server-Sent Events in a web application, we need to add an <eventsource> element to the document. The src attribute of <eventsource> element should point to an URL which provides a persistent HTTP connection that sends a data stream containing the events. Furthermore, the URL points to a PHP, PERL or any Python script which would take care of sending event data consistently.
Instance
Following is a sample HTML code of web application which would expect server time.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker">
<TIME>
</div>
</body>
</html>
Server Side Script for SSE
A server side script should send Content-type header specifying the type text/event-stream as follows.
print "Content-Type: text/event-streamnn";
After setting Content-Type, server side script would send an Event: tag followed by event name. Following code snippet would send Server-Time as event name terminated by a new line character.
print "Event: server-timen";
Final step is to send event data using Data: tag which would be followed by integer of string value terminated by a new line character as follows −
$time = localtime(); print "Data: $timen";
Finally, following is complete ticker.cgi written in Perl −
#!/usr/bin/perl
print "Content-Type: text/event-streamnn";
while(true){
print "Event: server-timen";
$time = localtime();
print "Data: $timen";
sleep(5);
}
Handle Server-Sent Events
Let us modify our web application to handle server-sent events. Following is the final example.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector(''#ticker'').innerHTML = event.data;
}
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker" name="ticker"> [TIME] </div>
</body>
</html>
Before testing Server-Sent events, I would suggest that you make sure your web browser supports this concept.
”;