Server-Sent Events (SSE)
Server-Sent Events (SSE) is a standard allowing servers to push real-time updates to clients over a single, long-lived HTTP connection. Unlike WebSockets, which provide full-duplex communication, SSE is unidirectional, meaning data flows from the server to the client only. Here's a brief overview of how it works:
How SSE Works
- Client Requests Updates: The client makes an HTTP request to the server, indicating it wants to receive updates.
- Server Keeps Connection Open: The server keeps this connection open and sends updates as they become available.
- Client Receives Updates: The client listens for incoming messages and processes them as they arrive.
(image credits- geeksforgeeks.org)
Key Features
- Unidirectional: Data flows from server to client.
- Automatic Reconnection: The client automatically attempts to reconnect if the connection is lost.
- Event-Driven: The server can send named events, allowing the client to handle different types of messages.
- Long-Lived Connection: It's a long live unidirectional communication.
- Single HTTP Connection: Uses a single HTTP connection.
- Connection: keep-alive: The connection is kept alive.
- Event-Stream Type Data: Data is sent in the event-stream format.
-
Event Data Structure: The event data structure includes
event | data | id, whereidis needed when there is a retry connection.
Use Cases
- Real-time notifications (e.g., social media updates, news feeds)
- Live sports scores
- Stock price updates
- Monitoring dashboards
Example Implementation
Server-Side (Node.js with Express)
const express = require('express');
const app = express();
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// Send an initial message
res.write('data: Connected\n\n');
// Send updates every 5 seconds
const intervalId = setInterval(() => {
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 5000);
// Clean up when the client disconnects
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Client-Side (HTML + JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events Example</h1>
<div id="events"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const newElement = document.createElement("div");
newElement.textContent = `New event: ${event.data}`;
document.getElementById("events").appendChild(newElement);
};
eventSource.onerror = function() {
console.error("EventSource failed.");
};
</script>
</body>
</html>
Explanation
-
Server-Side:
- The server sets the appropriate headers to indicate an SSE connection.
- It sends an initial message and then periodically sends updates.
- It handles client disconnection by cleaning up resources.
-
Client-Side:
- The client creates an
EventSourceobject to listen for updates from the server. - It handles incoming messages by appending them to the DOM.
- It handles errors, such as connection failures.
- The client creates an
Challenges
- Browser Compatibility: Not all browsers support SSE, which can limit its use.
- Connection Limit: Browsers and servers may limit the number of open connections.
- Connection Timeout: Long-lived connections can time out, requiring reconnection.
- Background Tab Behavior: Browsers may throttle or suspend connections in background tabs.
- Resource Utilization: Keeping many connections open can consume server resources.
- Load Balancer: Load balancers need to support long-lived connections.
- Sticky Connection: Ensuring the same client connects to the same server instance.
- Proxy/Firewall: Proxies and firewalls may interfere with long-lived connections.
- Testing: Simulating and testing long-lived connections can be challenging.
- Broadcasting: Efficiently broadcasting messages to many clients can be complex.
In short, SSE is a simple and efficient way to implement real-time updates in web applications where only the server needs to push data to the client.
Top comments (0)