DEV Community

Saras Growth Space
Saras Growth Space

Posted on

How Server-Sent Events (SSE) Work Internally

#webdev #backend #sse #software

In the previous article, we understood why Server-Sent Events (SSE) exist.

Now let’s go deeper:

👉 How does SSE actually work under the hood?

⚙️ Step 1 — It Starts with a Normal HTTP Request

From the browser’s perspective, SSE begins like any other request:

GET /events
Enter fullscreen mode Exit fullscreen mode

But the server responds differently.

📡 Step 2 — Special Response Header

The server sends:

Content-Type: text/event-stream
Enter fullscreen mode Exit fullscreen mode

This header tells the browser:

“This response is not going to end. Keep listening.”

🔁 Step 3 — The Connection Stays Open

Unlike normal APIs:

Client → request → response → close

SSE does this:

Client → request
Server → response (never ends)

🧠 Mental Model

Think of it like opening a tap:

Client → open connection
Server → stream data continuously
Enter fullscreen mode Exit fullscreen mode

Instead of sending a bucket of water, the server sends a flow.

📦 Step 4 — Event Format

SSE sends data in a very specific format.

Example:

data: Order received

data: Cooking started

data: Out for delivery
Enter fullscreen mode Exit fullscreen mode

Important Rules:

  • Each message starts with data:
  • Each event ends with a blank line
  • Without the blank line, the browser keeps waiting

🧩 Multiple Lines in One Event 

data: hello
data: world
Enter fullscreen mode Exit fullscreen mode

This becomes a single message:

hello
world
Enter fullscreen mode Exit fullscreen mode

🏷️ Advanced Event Format

SSE supports more fields:

id: 101
event: order_update
data: cooking started
Enter fullscreen mode Exit fullscreen mode

Fields Explained:

  • data → actual message
  • event → custom event type
  • id → event identifier (used for reconnection)

🌐 Browser Support

Browsers provide a built-in API:

👉 EventSource

Example:

const source = new EventSource("/events")

source.onmessage = (event) => {
  console.log(event.data)
}
Enter fullscreen mode Exit fullscreen mode

🎯 Custom Event Handling

If the server sends:

event: order
data: shipped
Enter fullscreen mode Exit fullscreen mode

You can listen like this:

source.addEventListener("order", (event) => {
  console.log(event.data)
})
Enter fullscreen mode Exit fullscreen mode

🔄 Automatic Reconnection

One of the most powerful features of SSE:

👉 The browser automatically reconnects if the connection drops.

Even better, it sends:

Last-Event-ID: 101
Enter fullscreen mode Exit fullscreen mode

So the server can resume from where it left off.

🧠 Why SSE Is Simple

SSE works because it:

  • Uses standard HTTP
  • Requires no protocol upgrade
  • Has built-in browser support
  • Handles reconnection automatically

Compared to WebSocket, it is much simpler to implement.

⚠️ Common Mistake

A very common bug:

Forgetting the blank line at the end of an event.

data: hello
Enter fullscreen mode Exit fullscreen mode

This will not work properly.

Correct version:

data: hello
Enter fullscreen mode Exit fullscreen mode

🚀 What’s Next

In the next article, we’ll answer a very important question:

👉 When should you use SSE vs Polling vs WebSockets?

This is one of the most common interview questions — and also a critical design decision in real systems.

Top comments (0)