HTML Tutorial
HTML Server-Sent Events (SSE)
Server-Sent Events (SSE) allow a web page to receive continuous updates from a server over a single long-lasting HTTP connection. Unlike WebSockets, SSE is one-way: the server can send updates to the client, but the client cannot send data back through the same channel.
SSE is commonly used for:
- Real-time notifications
- Live score updates
- Stock/price updates
- Chat message feeds
- Live system monitoring
SSE is easy to implement and works automatically in modern browsers using the EventSource API.
How Server-Sent Events Work
- The browser creates an EventSource connection to a server URL.
- The server keeps the connection open and continuously sends events.
- The browser listens and reacts to those events in real time.
Basic SSE Example
Client-side (HTML + JavaScript)
<!DOCTYPE html>
<html>
<body>
<h2>Live Server Updates</h2>
<div id="result">Waiting for updates...</div>
<script>
const source = new EventSource("server.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
source.onerror = function() {
console.log("Connection lost or failed.");
};
</script>
</body>
</html>
Server-side (Example in PHP)
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
echo "data: Server time: " . date("h:i:s") . "\n\n";
flush();
?>
This will continuously send the current time to the browser.
SSE Event Types
| Event Type | Purpose |
|---|---|
| message | Default event for receiving data |
| open | Fired when the connection begins |
| Error | Fired when there is a connection issue |
Advantages of SSE
- Simple and lightweight
- Built-in reconnection support
- Uses standard HTTP
- Works well for one-way real-time data
- Less overhead compared to WebSockets
Limitations of SSE
- One-way communication only
- Not supported in older Internet Explorer versions
- Maximum connection limits on some browsers