Day 56

Server-Sent Events (SSE)

11 min

JavaScript 100 Days

SSE (Server-Sent Events) server se client tak one-way real-time data stream hai. WebSocket se simpler — sirf server-to-client data chahiye ho to SSE better choice hai. News feeds, stock tickers, notifications ke liye.

EventSource — Client Side

SSE se server events receive karo.

sse-client.js

javascript

// EventSource se SSE connect karo
const eventSource = new EventSource("/api/events");

// Default message event
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Update received:", data);
  updateUI(data);
};

// Custom event types
eventSource.addEventListener("notification", (event) => {
  const notif = JSON.parse(event.data);
  showNotification(notif.message);
});

eventSource.addEventListener("priceUpdate", (event) => {
  const { stock, price } = JSON.parse(event.data);
  updateStockPrice(stock, price);
});

eventSource.onerror = (error) => {
  console.error("SSE Error:", error);
  // EventSource automatically reconnects!
};

// Close when done
function stopListening() {
  eventSource.close();
}

SSE Server (Node.js)

Server se events bhejo.

sse-server.js

javascript

// Express.js server
app.get("/api/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  
  // Send event every 2 seconds
  const interval = setInterval(() => {
    const data = { time: new Date().toISOString(), value: Math.random() };
    
    res.write(`data: ${JSON.stringify(data)}

`);
    // Custom event type:
    // res.write(`event: priceUpdate
data: {...}

`);
  }, 2000);
  
  req.on("close", () => clearInterval(interval));
});

🎯 Practice Challenge

Live dashboard banao jisme SSE se server har 3 sec mein random stats bheje — CPU usage, memory, requests per second dikhao.

WebSocketsWebRTC Basics