What is Handling Server-Sent Events in HTML5
In this article I have describe about HTML5 Handling Events.
Handling Server-Sent Events:
- Every events are basically message events.
- Event have three attributes in message event, defined by Message Event interface.
- event.data: Returns the data or message sent as part of the message event.
- event.origin: Returns the origin of the message and string containing the scheme (ex: http, https), and sent message was port.
- event.lastEventId: Returns the unique identifier of the last event received.
- The message event is automatically stoped, then onmessage function will be invoked.
- Handling a startingfive event using addEventListener.
- Limitations become obvious if we send score or startingfive events as in our example.
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>
|
Output
Define the code
- We create a new object in Event Source, then URL page sending the updates.
- Message event receive update for each time.
- Message put data into the element id="Sse".
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here