What is HTML5 Server-Sent Events

In this article I have described the Server-Sent Events in HTML5
  • 2281

INTRODUCTION

We will work through the process, with the Event Source object handling received data and writing it to the page. We will use HTML5 and JavaScript at client side, with PHP at server side. The idea behind SSEs may be familiar: a web app "subscribes" to a stream of updates generated by a server and, whenever a new event occurs, a notification is sent to the client. Server-Sent Events in a web application, you would need to add an <eventsource> element to the document.

Browser Support

Server Sent Events are supported by the following browsers.

Browser SSE supporting
Chrome v3 Yes
Fire fox v6.. Yes
IE v9 No
Opera v11 Yes
Safari v5.0 Yes

Note: Browser Earlier versions, do not support Server-Sent Events.

Example of Server-Sent Events

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
            document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
             function eventHandler(event)
            {
                       document.querySelector('#ticker').innerHTML = event.data;
             }
 </script>
</head>
<body>
<div id="sse">
           <eventsource src="demo_sse.php"/>
</div>
 <div id="ticker" name="ticker">
[TIME]
</div>
</body>
</html>

 

The EventSource Object

Events        Description
onopen :      When a request connection to the server is opened
onmessage : When a request  message is received
onerror :      When an error occurs

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.