Server-Sent Events (SSE)

SSE adalah one-way stream dari server ke client via HTTP. Simpler than WebSocket, built-in browser API, auto-reconnect.

Server (Express)

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 events
  const sendEvent = (data, event = "message") => {
    res.write(`event: ${event}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  // Initial data
  sendEvent({ type: "connected", timestamp: Date.now() });

  // Periodic updates
  const interval = setInterval(() => {
    sendEvent({ type: "heartbeat", timestamp: Date.now() });
  }, 30000);

  // Listen for new messages (from other sources)
  const onMessage = (msg) => sendEvent(msg, "new-message");
  eventEmitter.on("message", onMessage);

  // Cleanup on disconnect
  req.on("close", () => {
    clearInterval(interval);
    eventEmitter.off("message", onMessage);
  });
});

Client

const source = new EventSource("/api/events");

// Default "message" event
source.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Message:", data);
};

// Named events
source.addEventListener("new-message", (event) => {
  const msg = JSON.parse(event.data);
  appendMessage(msg);
});

// Error handling + auto-reconnect
source.onerror = (error) => {
  console.log("SSE error, will auto-reconnect");
  // EventSource automatically reconnects!
};

// Close connection
source.close();

SSE Format

# Setiap event dipisah double newline
event: notification\n
data: {"text": "Pesan baru!"}\n
id: 123\n              # Last event ID (for reconnect)
retry: 5000\n          # Reconnect interval (ms)
\n                     # End of event

SSE vs WebSocket

• SSE — Notifications, live feed, stock prices, server logs. Simple, HTTP-based.
• WebSocket — Chat, gaming, collaborative editing. Bidirectional needed.