What is HTML5 Server-Sent Events

In this article I have describe about HTML5 Events.
  • 2203

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

 Clipboard01.jpg

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

© 2020 DotNetHeaven. All rights reserved.