What is HTML5 Server-Sent Events
In this article I have describe about HTML5 Events.
What is HTML5 Server-Sent Events
- When a web page updates automatically from a server, it is a server-sent event.
- The web page would have to ask if any updates were available in server-sent events.
- The SSE servers can start data transmission for client, and send a message update.
- Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.
Example: Receive SSE notification
|
<!DOCTYPE html>
<html>
<body>
<h1>Update server</h1>
<div id="Show"></div>
<script>
if (typeof (EventSource) !== "undefined")
{
var source = new EventSource("Server.php");
source.onmessage = function (event)
{
document.getElementById("Show").innerHTML += event.data + "<br />";
};
}
else
{
document.getElementById("Show").innerHTML = "Sorry, browser does not support ";
}
</script>
</body>
</html>
|
Server.php file
|
<html>
<body>
<?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();
?>
</body>
</html>
|
Output
Define the code
- We create a new object in Event Source, then URL page sending the updates in "Server.php".
- Message event receive update for each time.
- Message put data into the element id="Show".
- When id is not match then show the message "browser does not support".
Further Readings
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