HTML SSE API - Alien Programmer

Spread the love

HTML SSE API – Server-Sent Events

Server-sent events (SSE) is a technology used to enable servers to push data updates to web clients, over standard HTTP connections, without the need for the clients to request the data periodically. This makes it a one-way messaging system.

With the SSE API, you can receive real-time updates from the server as they happen, without having to manually refresh the page. This can be useful for many applications, such as live scoreboards, chat applications, stock prices, and more.

SSE works by opening an HTTP connection to the server and keeping it open. The server can then send updates as needed, and the client receives them automatically. Unlike WebSockets, SSE only allows for one-way communication.

The following is an example of an SSE event stream:

css

data: {"message": "Hello, World!"}\n\n

The data is sent as a text string, with each line representing a new event. The “data:” prefix indicates that the data is a message. The “\n\n” sequence indicates the end of the message.

Using HTML SSE API

To receive server-sent events, you can use the EventSource object in JavaScript. The EventSource object is created using the URL of the server-side script that sends the events.

Here’s an example of how to use the EventSource object:

html

<!DOCTYPE html>
<html>
<head>
	<title>Server-Sent Events Example</title>
</head>
<body>
	<div id="output"></div>
	<script>
		var source = new EventSource("sse.php");
		source.onmessage = function(event) {
			var data = JSON.parse(event.data);
			document.getElementById("output").innerHTML += data.message + "<br>";
		};
	</script>
</body>
</html>

In this example, we create an EventSource object using the URL “sse.php”. When an event is received, the “onmessage” function is called, which adds the message to the “output” div.

Handling Errors and Rejections

If the server-side script returns an HTTP error code or sends invalid data, the EventSource object’s “onerror” function is called. You can handle errors by adding an “onerror” function to your EventSource object:

html

<script>
	var source = new EventSource("sse.php");
	source.onmessage = function(event) {
		var data = JSON.parse(event.data);
		document.getElementById("output").innerHTML += data.message + "<br>";
	};
	source.onerror = function(event) {
		console.log("EventSource error: " + event);
	};
</script>

Location-specific Information

In addition to sending data, the server-side script can also include location-specific information, such as the last modified date of the data being sent. This information is sent in the HTTP headers, and can be accessed using the EventSource object’s “lastEventId” property:

php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Last-Event-ID: ' . time());

echo "data: {\"message\": \"Hello, World!\"}\n\n";

Geolocation Object get location

To check whether SSE is supported in the user’s browser, you can use the “EventSource” property of the “window” object:

javascript

if (window.EventSource) {
	// SSE is supported
} else {
	// SSE is not supported
}

Server-Side Code Example

HTML Server-Side Includes (SSI) is a simple server-side scripting language used to include common content into multiple web pages. It is commonly used for website headers, footers, and menus, which are included in multiple pages of a website.

Here’s an example of how to use SSI in HTML code:

php

<!DOCTYPE html>
<html>
<head>
	<title>SSI Example</title>
</head>
<body>
	<!--#include virtual="/includes/header.html" -->
	
	<h1>Welcome to my website!</h1>
	<p>This is an example of using SSI to include a header file.</p>
	
	<!--#include virtual="/includes/footer.html" -->
</body>
</html>

In this example, the  line includes the header.html file located in the /includes directory. Similarly,  includes the footer.html file.

The SSI directives are enclosed in  tags. The include directive is used to include the content of another file into the current file. The virtual attribute specifies the path to the file to be included.

To use SSI, the web server must support it and the file extension should be .shtml or .shtm. Additionally, the Options +Includes directive must be enabled in the server configuration file.

Overall, SSI is a simple and efficient way to include common content into multiple pages of a website, reducing the amount of repetitive code that needs to be written.

HTML Web Workers API