Server-Sent Events (SSE)

#react

🔹 Introduction

Have you ever wanted to update your frontend in real-time without complex WebSockets or wasteful polling? That’s where Server-Sent Events (SSE) shine.

SSE is a simple mechanism where the server pushes data to the client over a single, long-lived HTTP connection. It’s lightweight, reliable, and already built into browsers via the EventSource API.

🔹 Why Use SSE?

Here’s why SSE is awesome:

✅ Simple – just standard HTTP, no special protocol.
✅ One-way streaming – perfect when only server → client communication is needed.
✅ Automatic reconnection – handled by the browser.
✅ Low overhead – no repeated polling requests.
✅ Firewall-friendly – works over standard HTTP/HTTPS.

Use cases:

Stock price updates 📈
Notifications 🔔
Live dashboards 📊
Chat messages 💬
Streaming logs 🖥️

🔹 How SSE Works

The workflow is straightforward:

Client opens a connection using EventSource.
Server responds with Content-Type: text/event-stream.
Server pushes messages in a special format.
Browser delivers events to your JavaScript app.

Client (EventSource)  <--- HTTP Stream --->  Server

🔹 Basic Example

🖥️ Server (Node.js + Express)

import express from "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");

  let count = 0;

  // Send a message every 2 seconds
  const interval = setInterval(() => {
    res.write(`data: Hello ${count++} at ${new Date().toISOString()}\n\n`);
  }, 2000);

  // If client closes connection, stop sending
  req.on("close", () => {
    clearInterval(interval);
  });
});

app.listen(3000, () => console.log("SSE server running on http://localhost:3000"));

💻 Client (React Example)

import { useEffect, useState } from "react";

export default function Notifications() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource("http://localhost:3000/events");

    eventSource.onmessage = (event) => {
      setMessages((prev) => [...prev, event.data]);
    };

    eventSource.onerror = (err) => {
      console.error("SSE error:", err);
      eventSource.close();
    };

    return () => {
      eventSource.close(); // cleanup
    };
  }, []); // ✅ run only once

  return (
    <div>
      <h2>🔔 Notifications</h2>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{msg}</li>
        ))}
      </ul>
    </div>
  );
}

🔹 Sending Custom Events

SSE isn’t limited to message events. You can send custom event types:

Server:

event: priceUpdate
data: 123.45

Client:

eventSource.addEventListener("priceUpdate", (e) => {
  console.log("Price update:", e.data);
});

🔹 Handling Errors & Reconnection

By default, EventSource auto-reconnects if the connection drops.
You can control retry interval by sending:

retry: 5000

This tells the client to reconnect after 5 seconds.

Always handle errors gracefully in onerror.

🔹 SSE vs WebSockets vs Polling

Feature	Polling 🔄	SSE 📡	WebSockets 🔀
Direction	Client → Server only	Server → Client only	Full duplex
Complexity	Low	Medium	High
Overhead	High	Low	Medium
Browser Support	✅ All	✅ Modern	✅ Modern
Best For	Occasional updates	Server → client streams	Bidirectional chat/games

🔹 Limitations of SSE

Only supports server → client (not bidirectional).
Text only (no binary).
Browser connection limit (~6 per domain).
Not supported in IE (but works in all modern browsers).

🔹 Conclusion

If you need real-time server → client updates and don’t want the complexity of WebSockets, SSE is the perfect choice. It’s lightweight, browser-native, and great for things like notifications, dashboards, or logs.