DEV Community

Cover image for 🔥 Real-Time Data Streaming with Server-Sent Events (SSE)
Serif COLAKEL
Serif COLAKEL

Posted on

🔥 Real-Time Data Streaming with Server-Sent Events (SSE)

#javascript #react #reactnative #nextjs

A Complete Developer’s Guide with Node.js, React, React Native, and Next.js

🧠 1. What is Server-Sent Events (SSE)?

Server-Sent Events (SSE) is a unidirectional streaming protocol built into modern browsers. It allows servers to push real-time updates to the client over a single long-lived HTTP connection using the EventSource API.

Think of it as a reverse fetch—once initiated, the server keeps sending data as events happen.

🔑 Key Characteristics

  • Built on HTTP/1.1 (no WebSocket upgrade needed)
  • Text/event-stream content type
  • Auto-reconnect mechanism by the browser
  • Low overhead, lightweight, easy to implement

🎯 2. When to Use SSE?

SSE shines in server-to-client real-time delivery scenarios, especially where simplicity and HTTP compatibility are key.

🔧 Common Use Cases

Use Case Why SSE Fits Well
🔔 Notifications Push updates to logged-in users instantly
📊 Live Dashboards Periodic updates to analytics or KPIs
📰 Real-Time News Feeds Auto-refreshing breaking news
⏱️ Tickers & Clocks Update countdowns or current time
📡 IoT Device Updates Sensor streams without bidirectional need

⚠️ Use WebSocket when you require two-way communication (e.g. chat, multiplayer games).

⚙️ 3. How SSE Works

📤 Server Response 

HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
Enter fullscreen mode Exit fullscreen mode

Each message sent must:

  • Start with data: and end with two newlines
  • Optionally include: id:, event:, retry:

🔁 Message Format 

data: {"message":"Hello, client!"} data: {"time":"2025-08-02T12:00:00Z"}
Enter fullscreen mode Exit fullscreen mode

🧪 Basic JavaScript Client 

const es = new EventSource("http://localhost:4000/events"); es.onmessage = (event) => { const data = JSON.parse(event.data); console.log("Received:", data); }; es.onerror = () => { console.warn("Connection lost. Reconnecting..."); };
Enter fullscreen mode Exit fullscreen mode

🛠️ 4. Node.js Express SSE Server Example 

const express = require("express"); const cors = require("cors"); const app = express(); app.use(cors()); app.get("/events", (req, res) => { res.setHeader("Content-Type", "text/event-stream"); res.setHeader("Cache-Control", "no-cache"); res.setHeader("Connection", "keep-alive"); const send = () => { const payload = JSON.stringify({ time: new Date().toISOString() }); res.write(`data: ${payload}\n\n`); }; send(); // Send initial data immediately const interval = setInterval(send, 5000); req.on("close", () => { clearInterval(interval); console.log("Cleanup: Client disconnected"); }); }); app.listen(4000, () => console.log("SSE server running on port 4000"));
Enter fullscreen mode Exit fullscreen mode

✅ Tip: Add res.flush() if using compression middleware (to push chunks immediately).

💻 5. SSE Clients

🌐 React (Web) 

import { useEffect, useState } from "react"; export default function SSEComponent() { const [time, setTime] = useState(""); useEffect(() => { const es = new EventSource("http://localhost:4000/events"); es.onmessage = (e) => { const data = JSON.parse(e.data); setTime(data.time); }; es.onerror = () => { console.warn("SSE connection error"); }; return () => es.close(); }, []); return <div>Server Time: {time}</div>; }
Enter fullscreen mode Exit fullscreen mode

📱 React Native (Mobile) 

npm install react-native-event-source
Enter fullscreen mode Exit fullscreen mode

Alternative Packages:

import EventSource from "react-native-event-source"; import { useEffect } from "react"; export default function LiveStream() { useEffect(() => { const es = new EventSource("http://192.168.1.x:4000/events"); es.onmessage = (event) => { console.log("Data:", event.data); }; return () => es.close(); }, []); return null; }
Enter fullscreen mode Exit fullscreen mode

⚠️ Use IP instead of localhost and ensure both devices are on the same network.

⛓️ Next.js (Client Component) 

"use client"; import { useEffect, useState } from "react"; export default function Page() { const [data, setData] = useState(""); useEffect(() => { const es = new EventSource("/api/events"); es.onmessage = (e) => { setData(JSON.parse(e.data).time); }; return () => es.close(); }, []); return <div>Time: {data}</div>; }
Enter fullscreen mode Exit fullscreen mode

🧪 Next.js API Route (SSE Handler) 

export function GET(req: Request) { const encoder = new TextEncoder(); const stream = new ReadableStream({ start(controller) { const interval = setInterval(() => { const data = `data: ${JSON.stringify({ time: new Date().toISOString(), })}\n\n`; controller.enqueue(encoder.encode(data)); }, 5000); req.signal.addEventListener("abort", () => { clearInterval(interval); controller.close(); }); }, }); return new Response(stream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }, }); }
Enter fullscreen mode Exit fullscreen mode

🔍 6. Advanced SSE Features

Custom Event Types 

res.write("event: customEvent\n"); res.write(`data: {"message":"Custom event triggered!"}\n\n`);
Enter fullscreen mode Exit fullscreen mode 
es.addEventListener("customEvent", (e) => { console.log("Custom Event:", e.data); });
Enter fullscreen mode Exit fullscreen mode

Retry Delay Control 

retry: 10000 data: {"message":"Retry in 10s"}
Enter fullscreen mode Exit fullscreen mode

Client waits 10 seconds before reconnecting.

⚖️ 7. Pros and Cons

✅ Pros

  • Native browser API (EventSource)
  • No third-party library needed
  • Simple, scalable (good for thousands of clients)
  • Works well with HTTP infrastructure

❌ Cons

  • One-way only
  • Not supported in all mobile environments (needs polyfill)
  • Needs proxy tweaks (e.g., Cloudflare, Nginx)
  • No binary or structured message formats (text-only)

🔄 8. SSE vs WebSocket

Feature SSE WebSocket
Direction Server ➡️ Client Bidirectional
Protocol HTTP/1.1 WS (Upgrade from HTTP)
Browser Support Most browsers All modern browsers
Complexity Low Medium–High
Streaming Text-only Binary, JSON, Text
Mobile Support Polyfill required Native
Reconnect Built-in basic retry Manual handling required

🧱 9. Production Considerations

  • ✅ Disable compression middleware to prevent buffered messages
  • ✅ Turn off proxy buffering (e.g., Nginx) 
location /events { proxy_pass http://localhost:4000; proxy_buffering off; chunked_transfer_encoding off; }
Enter fullscreen mode Exit fullscreen mode
  • ✅ Use heartbeats (e.g., data:\n\n) to keep connections alive
  • ✅ Reconnection logic: Use es.onerror or es.readyState checks

🔄 10. Alternatives

Tech Direction Transport
WebSocket Two-way WebSocket
Socket.IO Two-way + fallback WebSocket, polling
GraphQL Subscriptions Two-way (GraphQL) WebSocket
Firebase Two-way Proprietary
Pusher / Ably Pub/Sub WebSocket / HTTP
Kafka REST Proxy One-way stream HTTP/REST

✅ 11. Conclusion

Server-Sent Events are a lightweight, simple, and scalable way to stream real-time data from server to client using nothing but HTTP and vanilla JavaScript.

They’re a perfect fit for dashboards, notifications, live feeds, and IoT monitoring—especially when you don’t need two-way communication.

Use SSE when simplicity and scalability matter. Use WebSocket when interaction matters.

📚 12. Resources

Top comments (0)