• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML SSE API
• How to Receive Server-Sent Event Notifications

Example of Receiving Server-Sent Event Notifications

The EventSource object is used to receive server-sent event notifications:

index.html

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
  var source = new EventSource("demo_sse.php");
  source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
  };
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

Output should be:

Example explained: Receive Server-Sent Event Notifications

• Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php")
• Each time an update is received, the onmessage event occurs
• When an onmessage event occurs, put the received data into the element with id="result"

Reffered: https://www.w3schools.com/html/html5_serversentevents.asp