Back to: HTML Tutorials
Server-Sent Events (SSE) in HTML with Examples
In this article, I am going to discuss Server-Sent Events (SSE) in HTML with Examples. Please read our previous article, where we discussed Web Storage in HTML with Examples.
Server-Sent Events (SSE) in HTML
A server-sent event in HTML5 is a new technique for web pages to communicate with the webserver. Social media status updates, stock chart patterns, news feeds, and other automatic data push systems are a few examples of SSE.
Such things are possible due to HTML5 server-sent events. It enables a web page to maintain an open connection with a web server so that the webserver may automatically provide a fresh response at any moment, eliminating the need to reconnect and run the same server script from start.
The HTML5 server-sent event allows a browser to receive automatic updates and information from a server using HTTP connections.
What are the Server-Sent Events in HTML?
Whenever we perform some event and send it to the server, such an event that flows from web browser to web-server is called a client-side event. for example, submitting the form data to the server.
On the other hand, Server-sent events occur when the server sends updates or information to the browser. The server-sent events are unidirectional. It’s also known as one-way messaging. For example, a simple click on a button requests a new page from the server.
SSE Connection States
The following values are assigned to each SSE connection’s state:
- Connecting: The connection is yet to be established or is in the process of being established.
- Open: The connection is up and running, and it’s ready to send out events.
- Closed: The connection is not open and is not being restored at this time. This can be caused by an unrecoverable error or a call to the close() method.
Web Application for SSE
In order to use Server-Sent Events in a web application, the page must have an <eventsource> element. The <eventsource> element’s src property should link to a URL that provides a persistent HTTP connection that transmits a data stream containing the events. In the example below we have created an SSE that displays the current time on the screen.
<!DOCTYPE html>
<html>
<body>
<head>
<style>
body{
background-color:dodgerblue;
color:white;
font-family:arial;
}</style>
</head>
<h1>Received Server Events</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 = "Your browser Doesn't support the SSE";
}
</script>
</body>
</html>
Output:
In the first step, it checks if the browser supports the event source interface. Then the EventSource object is created using only the server script URL. The event handler will receive the server message and update the client’s website accordingly.
Events sent from Server
The text/event-stream format is used by the server-side script to send events. Every message is separated by two newline characters.
Handling the Errors
In case of any problems, such as network problems, network timeouts, access control issues, and so on. An onerror callback on the EventSource object is used to handle them.
source.onerror = function(error) {console.error(“EventSource failed:”, err);};
The following are some of the difficulties that have been encountered while using SSE:
- It is unidirectional with no means for a client to send messages to a server except when the connection is established.
- It does not allow the server to detect when the client-side connection has been lost.
In the next article, I am going to discuss Web Workers in HTML with Examples. Here, in this article, I try to explain Server-Sent Events (SSE) in HTML with Examples and I hope you enjoy this Server-Sent event (SSE) in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.