HTML server-sent events are one of the scenarios included in HTML API for getting updates automatically from the server using a web page. This concept includes one kind of event that works between a web server and a web browser, known as a Server-sent event.
We first want to add some code to check whether our browser will support a server-sent event or not; after that, we will process other code to get the exact output. Unlike WebSockets, developing web applications that use server-sent events is always easier.
Earlier, we discussed the EventSource attribute; it’s also used with its object in receiving server event notifications.
The actual use of the EventSource attribute is in the following example:
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Receive Sever-sent Event</h1>
<div id="demo"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("ssedemo.html");
source.onmessage = function(event) {
document.getElementById("demo").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("demo").innerHTML = "Oops, your browser is not going to support Secure-sent event";
}
</script>
</body>
</html>Syntax:
if(typeof(EventSource) !== "undefined") {
// Server-sent event supported code
// Program code
}
else {
//Oops! Server-sent event is not supported code
}Syntax:
if(typeof(EventSource) !== "undefined") {
var object = new EventSource("File_URL");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
}Examples of html server-sent events are given below:
In this first example, we are going to check whether our browser is going to support the Server-send event or not. If everything is ok, it will display time in the output window, and if it’s not supporting the browser, it prints an error message on the browser window. Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Server-sent Event</title>
</head>
<body>
<div id="sse_demo">
</div>
<script type="text/javascript">
if(typeof(EventSource)!=="undefined")
{
alert("Yes Your browser is going to support Server-Sent Event");
}
else
{
alert("Sorry! Yes Your browser is not going to support Server-
Sent Event");
}
</script>
</body>
</html><strong> </strong>Output:
We see times in numbers on the output screen, which means our browser will support HTML Server-Send Event.
This example is for Server-send events, where we count the required time to load the server-sent event on the browser. This timestamp is in seconds.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML API _ Server-Sent Events</title>
<script>
window.onload = function()
{
var path = new EventSource("server_time.html");
path.onmessage = function(event)
{
document.getElementById("sse_output").innerHTML += "Required
timestamp received from web server: " + event.data + "<br>";
};
};
</script>
</head>
<body>
<div id="sse_output">
<!--This will display required time of server to load contents-->
</div>
</body>
</html>Output:
As seen in the below output screen, it shows 1 sec as loading time.
This is the example where we try to show the connection’s establishment. Let’s run the code and will what will be the output:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height" />
<title> Server-Sent Events </title>
<style type="text/css">
font-family: ‘Times new Roman’;
</style>
</head>
<body>
<h4> Server-Sent Events Example </h4>
<ul></ul>
<script>
(function()
{ "use strict";
var ev_check = document.querySelector('ul');
var ssl = new EventSource('/events');
function li(text) {
var li = document.createElement('li');
li.innerText = text;
ev_check.appendChild(li);
}
ssl.addEventListener('open', function()
{
li('Server connection done succussfully.');
});
ssl.addEventListener('my-custom-event', function(event)
{
li(event.data);
});
ssl.addEventListener('error', function()
{
li('Server connection failed.');
});
})();
</script>
</body>
</html>Output:
As soon above code runs on the browser window, it will generate output where the server connection fails.
From all the above information, the HTML Server-send Event is a new API used as a mono-directional event process where users can create an event from a web server to a web browser. It uses the attribute EventSource. One can be able to see event load time using it. This is used on Facebook, news feeds, stock price update, etc.
The above is the detailed content of HTML Server-Sent Events. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
