HTML Server Sent Events

HTML Server Sent Events: Server-Sent Events (SSE) allow a web page to get updates from a server.

HTML SSE(Server-Sent Event) API allows updating the front end content from a server without refreshing or re-requesting the page.

In this tutorial, you will learn-

In this article, you will learn-

0.1 Server-Sent Events – One Way Messaging
0.2 Receive Server-Sent Event Notifications

1 Getting server updates

Server-Sent Events – One Way Messaging

A server-sent event is when a web page automatically gets updates from a server.

This was additionally conceivable previously, but the website page would need to inquire as to whether any updates were accessible. With server-sent events, the updates come automatically.

Example: Facebook/Twitter updates, stock price updates, news feeds, sport results, and so forth

Receive Server-Sent Event Notifications

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

Example

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

Getting server updates

Example explained:

• Create another 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 happens

• When an onmessage event happens, put the received data into the element with id=”result”

Check Server-Sent Events Support

In the tryit example above there were some additional lines of code to check browser support for server sent events:

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

Worker-Side Code Example

For the example above to work, you need a server capable for sending data updates (like PHP or ASP).

The server-side event stream syntax is straightforward. Set the “Content-Type” header to “text/event-stream”. Presently you can begin sending event streams.

Code in PHP (demo_sse.php):

<?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();
?>

Code in ASP (VB) (demo_sse.asp):

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Code explained:

• Set the “Content-Type” header to “text/event-stream”

• Specify that the page ought not cache

• Output the data to send (Always start with “data: “)

• Flush the output data back to the web page

The EventSource Object

In the example above we used the onmessage event to get messages. However, different events are additionally accessible:

Events	Description
onopen	When a connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.