What is HTML5 Server-Sent Events
In this article I have described the Server-Sent Events in HTML5
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