How HTML5 Server-Sent Events Works

Discover how to establish a permanent, unidirectional interaction between such a website page and servers using the HTML5 server-sent event capability in this article.

What is Server-Sent Event?

HTML5 server-sent events introduce a novel way for web pages to establish communication with the web server. While the XMLHttpRequest object enables JavaScript code to request data from the web server, it operates on a one-for-one exchange basis, concluding the communication once the server responds. The XMLHttpRequest object serves as the foundation for all Ajax operations.

Nevertheless, certain scenarios demand a persistent connection between web pages and the web server. This need arises in situations such as live stock quotes on finance websites or news tickers on media platforms.

HTML5 server-sent events offer a solution to such requirements. They allow a web page to maintain an open connection to the web server, enabling the server to automatically send new responses at any time. Unlike traditional approaches that involve repeated reconnections and the execution of the same server script, server-sent events eliminate the need for these redundant steps.

Note: It is important to note that server-sent events are unidirectional, delivering data from the server to the client (typically a web browser).

Tip: Notably, the server-sent events feature in HTML5 is supported by major modern web browsers like Firefox, Chrome, Safari, and Opera, except for Internet Explorer.

Remember, when implementing server-sent events, ensure compatibility with the target browsers and leverage the capabilities of this HTML5 feature to enhance real-time communication between web pages and web servers.

Sending Messages with a Server Script

Let's proceed with the creation of a PHP file named server_time.php and insert the following script into it. This script serves the purpose of periodically reporting the current time of the web server's built-in clock. In the subsequent steps of this tutorial, we will retrieve this time and update the web page accordingly.

<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
 
// Get the current time on server
$currentTime = date("h:i:s", time());
 
// Send it in a message
echo "data: " . $currentTime . "\n\n";
flush();
?>

The initial two lines of the PHP script hold significance. The first line sets the MIME type to text/event-stream, as mandated by the server-side event standard. The second line instructs the web server to disable caching to prevent potential caching of the script's output.

In compliance with the HTML5 server-sent events protocol, each message transmitted must begin with the data: prefix, followed by the actual message content and concluded with the newline character sequence (\n\n).

Lastly, we have incorporated the PHP flush() function to ensure that the data is immediately sent rather than being buffered until the completion of the PHP code execution. This ensures timely transmission of the server-sent event data.

Processing Messages in a Web Page

The EventSource object serves the purpose of receiving server-sent event messages from the web server.

Next, we will proceed to create an HTML document named demo_sse.html and position it within the same project directory where the server_time.php file resides. This HTML document is designed to retrieve the current time information communicated by the web server and present it to the user in a readable format.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Server-Sent Events</title>
<script>
    window.onload = function () {
        var source = new EventSource("server_time.php");
        source.onmessage = function (event) {
            document.getElementById("result").innerHTML += "New time received from web server: " + event.data + "<br>";
        };
    };
</script>
</head>
<body>
    <div id="result">
        <!--Server response will be inserted here-->
    </div>
</body>
</html>

Try this code

The above code uses HTML5 Server-Sent Events (SSE) to receive real-time updates from a web server. The code initializes an EventSource object to establish a connection with the server_time.php endpoint and then appends the received time data to an HTML element with the ID result. This is a common example of using SSE to display server-generated updates on a web page in real-time.

Efficiently processing messages in a web page is crucial for optimal functionality. By leveraging a server script event in HTML, developers can handle message processing effectively. This event-driven approach enables seamless message handling in a web page, facilitating smooth communication and data processing. By understanding how to process messages using a server script event in HTML, developers can enhance interactivity and create dynamic web applications.

HTML5 SSE Vs XMLHttpReqeust Vs WebSocket

Let's compare HTML5 Server-Sent Events (SSE), WebSockets, and XMLHttpRequest (XHR) across various aspects:

1. Communication Type:

SSE: SSE facilitates one-way communication from the server to the client, pushing real-time updates or events over a long-lived HTTP connection.
WebSockets: WebSockets provide full-duplex, bidirectional communication between the server and the client, enabling real-time interaction and messaging.
XMLHttpRequest: XHR enables client-initiated communication by sending requests to the server and receiving responses.

2. Connection Persistence:

SSE: SSE maintains a persistent connection between the server and the client, designed for continuous data streaming.
WebSockets: WebSockets establish a single, long-lived connection that allows data to be sent and received in both directions without the need for reestablishing connections.
XMLHttpRequest: Each XHR request opens a new connection to the server, and the connection is closed after receiving a response.

3. Data Format:

SSE: SSE uses a simple event-driven format where the server sends events with associated data.
WebSockets: WebSockets allow for arbitrary data exchange, supporting various formats including text and binary data.
XMLHttpRequest: XHR can handle different data formats based on the Content-Type header, including text, JSON, XML, and more.

4. Use Cases:

SSE: SSE is suitable for scenarios where the server needs to push updates to clients, like live notifications, stock updates, or news feeds.
WebSockets: WebSockets are ideal for interactive applications such as online gaming, real-time collaboration tools, chat applications, and anything requiring bidirectional communication.
XMLHttpRequest: XHR is commonly used for fetching data from the server or submitting form data in scenarios where real-time updates aren't the primary concern.

5. Browser Support:

SSE: SSE is supported in modern browsers but might not be available in older versions and Internet Explorer.
WebSockets: WebSockets are supported in modern browsers, including Internet Explorer, offering more consistent cross-browser compatibility.
XMLHttpRequest: XHR is well-supported in most browsers, including older versions, making it a reliable choice for various scenarios.

6. Implementation Complexity:

SSE: Implementing SSE is relatively simple, especially on the client side using the EventSource API.
WebSockets: WebSockets require more setup and management due to their bidirectional nature, involving handling both sending and receiving messages on both the server and client sides.
XMLHttpRequest: XHR is straightforward to use for making requests and receiving responses, but might involve additional handling for error states and asynchronous communication.

7. Latency and Efficiency:

SSE: SSE is efficient for sending textual data updates, but it's unidirectional and might have slightly higher latency compared to WebSockets.
WebSockets: WebSockets offer lower latency due to their bidirectional nature and efficient communication over a single connection.
XMLHttpRequest: XHR latency depends on the nature of the requests, but it might involve more overhead for frequent data updates.

In the last, SSE, WebSockets, and XMLHttpRequest serve different purposes in web development. SSE is ideal for pushing updates from the server to the client, WebSockets are designed for interactive real-time applications, and XMLHttpRequest is suitable for fetching data and making requests initiated by the client. The choice depends on the specific requirements and nature of your application.

FAQ

What are Server-Sent Events (SSE) in HTML5?

Server-Sent Events (SSE) is a technology in HTML5 that allows a server to send real-time updates to a web browser over a single HTTP connection. It's a simple and efficient way to enable server-to-client communication without requiring the client to constantly poll the server for updates.

How do Server-Sent Events work?

SSE works by establishing a persistent connection between the client (web browser) and the server. The server sends data to the client as a stream of events, which the client can listen to and process as they arrive. The data is transmitted using a standard HTTP response with a text/event-stream MIME type.

What's the MIME type used for Server-Sent Events?

The MIME type used for Server-Sent Events is text/event-stream.

What's the advantage of using Server-Sent Events over other real-time communication methods?

Server-Sent Events are easier to implement compared to technologies like WebSockets, which require a more complex setup. SSE uses a simple HTTP connection, making it suitable for scenarios where you need one-way communication from the server to the client without the need for bidirectional communication.

Can SSE be used to send data in both directions (client to server and server to client)?

No, SSE is designed primarily for server-to-client communication. If you need bidirectional communication, you'd typically use WebSockets or other technologies.

Are there any browser compatibility concerns with SSE?

SSE is well-supported in modern browsers, including Chrome, Firefox, Safari, and Edge. However, older versions of Internet Explorer do not support SSE.

What's the recommended use case for Server-Sent Events?

SSE is best suited for scenarios where you want to push real-time updates from the server to the client, such as displaying live notifications, stock price updates, or social media feeds without the overhead of constant polling.

Conclusion

HTML5 Server-Sent Events (SSE) provide a straightforward and efficient mechanism for establishing real-time communication between servers and clients. By enabling servers to push updates to web browsers over a persistent HTTP connection, SSE eliminates the need for clients to repeatedly poll the server for new data. This technology is particularly well-suited for scenarios where one-way communication, from the server to the client, is sufficient, and where a simpler alternative to more complex bidirectional communication technologies like WebSockets is preferred.

SSE's ease of use, compatibility with modern browsers, and lightweight nature make it a valuable tool for implementing various real-time features such as live notifications, dynamic content updates, and streaming data displays. While SSE does have certain limitations, such as its inability to support bidirectional communication or the requirement for a modern browser, it remains a versatile option for developers seeking a reliable way to deliver timely updates to web applications without the overhead of continuous polling.

HTML5 Server-Sent Events stand as a dependable choice for achieving efficient server-to-client communication and enhancing user experiences through the seamless delivery of real-time information.

All Tutorials