A Beginner's Guide to Server-Sent Events (SSE)
Preet MungaraServer-Sent Events (SSE) is a web standard that lets a server push data to a browser in real-time over a single, long-lived HTTP connection. Think of it as a one-way communication channel where the server can continuously send updates to the client without the client having to repeatedly ask for them.
How ChatGPT uses Server-Sent Events to give answer of one prompt.
You write one prompt.
Server keeps pushing updates to you as they happen from model.
Here i’ve asked one simple question.
Inspect the request that we’ve sent.
Now, we can see the EventStream result. It keeps pushing data to the connection as it receives it. Look at the time, many metadata-related responses and the actual response are being sent.
What's the difference between Polling, WebSocket and Server-Sent Events?
Polling is about client sending requests to the server at regular intervals to check if there are any new updates. sometimes there is no new data at server side, resulting in unnecessary request.
WebSocket is generally suitable for bidirectional communication on single active connection, for example: collaboration tools, real time polling app.
Server-Sent Event is lightweight, one directional communication from server to client over HTTP, it’s unidirectional only.
Example:
Here is simple SSE Example, the API endpoint gives the current Date & Time in response at every second.
app.MapGet("/stream-time", async (HttpContext context) =>
{
var response = context.Response;
response.Headers.Append("Content-Type", "text/event-stream");
response.Headers.Append("Cache-Control", "no-cache");
response.Headers.Append("Connection", "keep-alive");
while (!context.RequestAborted.IsCancellationRequested)
{
var message = $"The time on the server is: {DateTime.Now:T}";
await response.WriteAsync($"data: {message}\n\n");
await response.Body.FlushAsync();
await Task.Delay(1000);
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minimal SSE Demo</title>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<p>
<strong>Connection Status:</strong>
<span id="status">Connecting...</span>
</p>
<p>
<strong>Latest Server Message:</strong>
</p>
<div id="live-data">
Waiting for data...
</div>
<script>
const statusElement = document.getElementById('status');
const dataElement = document.getElementById('live-data');
const SSE_ENDPOINT = 'http://localhost:5139/stream-time';
// This is the key line. Browser provides EventSource API to implement SSE.
const eventSource = new EventSource(SSE_ENDPOINT);
eventSource.onopen = function () {
console.log("Connection to server opened.");
statusElement.textContent = 'Connected';
};
eventSource.onmessage = function (event) {
console.log("Received data:", event.data);
dataElement.textContent = event.data;
};
eventSource.onerror = function (error) {
console.error("EventSource failed:", error);
statusElement.textContent = 'Error / Disconnected';
};
</script>
</body>
</html>
So when we load the page, API get’s hit and Single HTTP Connection gets established which gives date and time and on UI we get date and time.
Now you might realize how ChatGPT and other AI applications use the same concept of Server-Sent Events to take advantage of this browser feature for their needs, instead of choosing WebSocket, which might be too complex for the same purpose.
For more understanding and real-world use cases, you can refer to the list of blogs below.
https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events
https://shopify.engineering/server-sent-events-data-streaming
https://germano.dev/sse-websockets
Subscribe to my newsletter
Read articles from Preet Mungara directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by