45:"/_next/static/chunks/33yus346z0l_n.js" 46:"/_next/static/chunks/1r8ezocsukqp8.js" 47:"/_next/static/chunks/0iv56yrji_20j.js" 48:"/_next/static/chunks/0wa9m1-tphf9u.js" 49:"/_next/static/chunks/08cuqqn_f60pp.js" 4a:"/_next/static/chunks/3zdsl3f9b0--r.js" 4b:"/_next/static/chunks/2j22cxchii_xx.js" 4c:"/_next/static/chunks/3bgoyiso1rhn7.js" 4d:"/_next/static/chunks/01a-3hvnqu8wl.js" 4e:"/_next/static/chunks/3m1xjj5kw5fie.js" 4f:"/_next/static/chunks/0om3fkgfnicab.js" 50:"/_next/static/chunks/0gafyzg9j9yqj.js" 51:"/_next/static/chunks/20w4eaqlekefm.js" 52:"/_next/static/chunks/449--h5z1s6nq.js" 53:"/_next/static/chunks/3k2gyg36fnag_.js" 54:"/_next/static/chunks/18ggtgz2yf759.js" 55:"/_next/static/chunks/0hlb44ca7-4a2.js" 56:"/_next/static/chunks/253gnmj0-cj17.js" 57:"/_next/static/chunks/09nq57stwzkgf.js" 58:"/_next/static/chunks/082jo-0ajazgr.js" 59:"/_next/static/chunks/2ozcrjb_hh74t.js" 5a:"/_next/static/chunks/05i8en-x14ibi.js" 5b:"/_next/static/chunks/32izpn90gvm22.js" 5c:"/_next/static/chunks/0jbzid2v9xv3h.js" 5d:"/_next/static/chunks/0i3-eynrkvqi7.js" 5e:"/_next/static/chunks/1tn-0fivsxsv1.js" 5f:"/_next/static/chunks/34h36hyf_ggow.js" 60:"/_next/static/chunks/20329i6m_04t6.js" 61:"/_next/static/chunks/161uxd62cjny2.js" 62:"/_next/static/chunks/2k8pepwc4pxns.js" 63:I[593304,["$2b","$2c","$2d","$2e","$2f","$30","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62"],"OwnedHydration"] 64:T503,// Create connection to SSE endpoint const eventSource = new EventSource('/api/events'); // Handle generic messages (event: field omitted or set to 'message') eventSource.onmessage = (event) => { const data = JSON.parse(event.data); console.log('Message received:', data); console.log('Event ID:', event.lastEventId); }; // Handle specific event types eventSource.addEventListener('notification', (event) => { const notification = JSON.parse(event.data); showNotification(notification.title, notification.body); }); eventSource.addEventListener('stockUpdate', (event) => { const update = JSON.parse(event.data); updateStockTicker(update.symbol, update.price); }); // Connection lifecycle events eventSource.onopen = () => { console.log('SSE connection established'); updateConnectionStatus('connected'); }; eventSource.onerror = (error) => { if (eventSource.readyState === EventSource.CONNECTING) { console.log('Reconnecting to SSE...'); } else if (eventSource.readyState === EventSource.CLOSED) { console.error('SSE connection failed permanently'); handleConnectionFailure(); } }; // Clean up when no longer needed function cleanup() { eventSource.close(); console.log('SSE connection closed'); }65:T699,interface StockUpdate { symbol: string; price: number; change: string; timestamp: string; } interface Notification { type: 'info' | 'warning' | 'error'; title: string; body: string; priority: 'low' | 'medium' | 'high'; } class SSEClient { private eventSource: EventSource | null = null; private reconnectAttempts = 0; private maxReconnectAttempts = 5; constructor(private url: string) {} connect(): void { this.eventSource = new EventSource(this.url); this.eventSource.onopen = () => { console.log('SSE connected'); this.reconnectAttempts = 0; }; this.eventSource.onerror = this.handleError.bind(this); } onStockUpdate(handler: (update: StockUpdate) => void): void { this.eventSource?.addEventListener('stockUpdate', (event) => { const update: StockUpdate = JSON.parse(event.data); handler(update); }); } onNotification(handler: (notification: Notification) => void): void { this.eventSource?.addEventListener('notification', (event) => { const notification: Notification = JSON.parse(event.data); handler(notification); }); } private handleError(error: Event): void { if (this.eventSource?.readyState === EventSource.CLOSED) { if (this.reconnectAttempts < this.maxReconnectAttempts) { this.reconnectAttempts++; setTimeout(() => this.connect(), 1000 * this.reconnectAttempts); } } } disconnect(): void { this.eventSource?.close(); this.eventSource = null; } }66:T710,const express = require('express'); const app = express(); // Store connected clients const clients = new Map(); let clientIdCounter = 0; // SSE endpoint app.get('/api/events', (req, res) => { // Set SSE headers res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); res.setHeader('X-Accel-Buffering', 'no'); // Disable nginx buffering // Prevent request timeout req.setTimeout(0); // Send initial comment to establish connection res.write(': connected '); // Register client const clientId = ++clientIdCounter; clients.set(clientId, res); console.log(`Client ${clientId} connected. Total: ${clients.size}`); // Handle client disconnect req.on('close', () => { clients.delete(clientId); console.log(`Client ${clientId} disconnected. Total: ${clients.size}`); }); }); // Broadcast event to all clients function broadcast(event, data, id = null) { const message = formatSSE(event, data, id); for (const [clientId, res] of clients) { res.write(message); } } // Format SSE message function formatSSE(event, data, id = null) { let message = ''; if (id) message += `id: ${id} `; if (event) message += `event: ${event} `; message += `data: ${JSON.stringify(data)} `; return message; } // Send heartbeat every 30 seconds setInterval(() => { for (const [clientId, res] of clients) { res.write(': heartbeat '); } }, 30000); // Example: broadcast stock updates setInterval(() => { broadcast('stockUpdate', { symbol: 'AAPL', price: (170 + Math.random() * 10).toFixed(2), timestamp: new Date().toISOString() }); }, 5000); app.listen(3000);67:T9a9,from fastapi import FastAPI, Request from fastapi.responses import StreamingResponse from typing import AsyncGenerator import asyncio import json from datetime import datetime app = FastAPI() # Track connected clients clients: list[asyncio.Queue] = [] async def event_generator(request: Request) -> AsyncGenerator[str, None]: """Generate SSE events for a connected client.""" queue: asyncio.Queue = asyncio.Queue() clients.append(queue) try: # Send initial connection message yield ": connected " while True: # Check if client disconnected if await request.is_disconnected(): break try: # Wait for event with timeout (for heartbeat) event = await asyncio.wait_for(queue.get(), timeout=30.0) yield format_sse(event["type"], event["data"], event.get("id")) except asyncio.TimeoutError: # Send heartbeat comment yield ": heartbeat " finally: clients.remove(queue) def format_sse(event: str, data: dict, event_id: str = None) -> str: """Format event data as SSE message.""" message = "" if event_id: message += f"id: {event_id} " message += f"event: {event} " message += f"data: {json.dumps(data)} " return message @app.get("/api/events") async def sse_endpoint(request: Request): """SSE endpoint for real-time updates.""" return StreamingResponse( event_generator(request), media_type="text/event-stream", headers={ "Cache-Control": "no-cache", "Connection": "keep-alive", "X-Accel-Buffering": "no", } ) async def broadcast(event_type: str, data: dict, event_id: str = None): """Broadcast event to all connected clients.""" event = {"type": event_type, "data": data, "id": event_id} for queue in clients: await queue.put(event) # Background task to simulate stock updates @app.on_event("startup") async def start_stock_updates(): async def stock_updater(): import random while True: await asyncio.sleep(5) await broadcast("stockUpdate", { "symbol": "AAPL", "price": round(170 + random.random() * 10, 2), "timestamp": datetime.utcnow().isoformat() }) asyncio.create_task(stock_updater())68:Taef,package main import ( "encoding/json" "fmt" "log" "net/http" "sync" "time" ) type Client struct { id int events chan Event } type Event struct { Type string `json:"type"` Data interface{} `json:"data"` ID string `json:"id,omitempty"` } type Broker struct { clients map[int]*Client register chan *Client unregister chan *Client broadcast chan Event mu sync.RWMutex nextID int } func NewBroker() *Broker { b := &Broker{ clients: make(map[int]*Client), register: make(chan *Client), unregister: make(chan *Client), broadcast: make(chan Event), } go b.run() return b } func (b *Broker) run() { for { select { case client := <-b.register: b.mu.Lock() b.clients[client.id] = client b.mu.Unlock() case client := <-b.unregister: b.mu.Lock() delete(b.clients, client.id) close(client.events) b.mu.Unlock() case event := <-b.broadcast: b.mu.RLock() for _, client := range b.clients { select { case client.events <- event: default: // Client buffer full, skip } } b.mu.RUnlock() } } } func (b *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) { flusher, ok := w.(http.Flusher) if !ok { http.Error(w, "Streaming unsupported", http.StatusInternalServerError) return } // Set SSE headers w.Header().Set("Content-Type", "text/event-stream") w.Header().Set("Cache-Control", "no-cache") w.Header().Set("Connection", "keep-alive") w.Header().Set("X-Accel-Buffering", "no") // Create and register client b.mu.Lock() b.nextID++ client := &Client{ id: b.nextID, events: make(chan Event, 10), } b.mu.Unlock() b.register <- client defer func() { b.unregister <- client }() // Send initial connection comment fmt.Fprintf(w, ": connected ") flusher.Flush() // Stream events for { select { case event := <-client.events: data, _ := json.Marshal(event.Data) if event.ID != "" { fmt.Fprintf(w, "id: %s ", event.ID) } fmt.Fprintf(w, "event: %s ", event.Type) fmt.Fprintf(w, "data: %s ", data) flusher.Flush() case <-r.Context().Done(): return case <-time.After(30 * time.Second): fmt.Fprintf(w, ": heartbeat ") flusher.Flush() } } }44:["$","$L63",null,{"owner":"anonymous","state":{"mutations":[],"queries":[{"dehydratedAt":1792315929316,"state":{"data":{"json":{"id":"seed_281b84dce475edcb15ade69e93064f7d","slug":"server-sent-events","category":"System Design (HLD)","topic":"Server-Sent Events (SSE)","title":"Server-Sent Events (SSE)","description":"Master Server-Sent Events for efficient one-way real-time communication. Explore the SSE protocol, browser APIs, reconnection strategies, and when to choose SSE over WebSockets for streaming server updates to clients.","difficulty":"INTERMEDIATE","estimatedMinutes":60,"pages":[{"id":"seed_feb34e8de06ad9f8a1989de6d1f680f0","title":"One-Way Server Push","order":0,"content":[{"id":"opening-hook","title":"The Power of Server Push","content":[{"data":{"content":"In the traditional HTTP request-response model, clients are constantly asking: *\"Do you have anything new for me?\"* This polling approach is inefficient—wasting bandwidth when nothing has changed and introducing latency when updates do occur. But what if the server could simply tell the client when something happens?\n\n**Server-Sent Events (SSE)** represent a paradigm shift in client-server communication. Instead of clients repeatedly asking for updates, servers push data to clients as soon as it becomes available. This one-way streaming model is elegantly simple yet remarkably powerful, forming the backbone of live feeds, real-time dashboards, and notification systems across the modern web."},"type":"text"},{"data":{"icon":"Target","title":"What You Will Learn","content":"By the end of this page, you will understand the fundamental architecture of one-way server push, how SSE leverages HTTP to establish persistent streaming connections, the protocol mechanics that enable efficient real-time updates, and why this deceptively simple technology solves complex distributed systems challenges with elegance.","variant":"info"},"type":"callout"}]},{"id":"polling-problem","title":"The Polling Problem","content":[{"data":{"content":"To appreciate the elegance of server push, we must first understand the limitations of the request-response model and the various attempts to work around them.\n\n**Traditional Polling (Short Polling)**\n\nThe naive approach to real-time updates involves clients periodically requesting data:\n\n```\nClient → Server: GET /updates (every 5 seconds)\nServer → Client: 200 OK, { updates: [] }\n\nClient → Server: GET /updates (5 seconds later)\nServer → Client: 200 OK, { updates: [] }\n\n// ...99 empty responses later...\n\nClient → Server: GET /updates \nServer → Client: 200 OK, { updates: [{ message: \"Finally!\" }] }\n```\n\nThe problems with this approach are substantial:"},"type":"text"},{"data":{"items":["**Wasted Bandwidth** — Most requests return no new data, yet each request incurs full HTTP overhead (headers, TLS handshake for new connections, etc.)","**Latency Trade-off** — Short intervals waste resources; long intervals delay updates. There's no optimal frequency.","**Server Load** — Thousands of clients polling simultaneously creates significant server overhead, even when nothing has changed.","**Battery Drain** — Mobile devices suffer from constant network activity, preventing radio from entering low-power state.","**Scalability Ceiling** — At scale, polling traffic dominates actual useful traffic, limiting system capacity."],"title":{"icon":"AlertCircle","text":"Short Polling Limitations","type":"icon","color":"destructive","variant":"outline-circle"},"variant":"glass"},"type":"list"},{"data":{"content":"**Long Polling: A Step Forward**\n\nLong polling attempts to address the latency issue by holding the request open until data is available:\n\n```\nClient → Server: GET /updates\nServer: (holds connection open...)\nServer: (waits for event...)\nServer → Client: 200 OK, { updates: [{ message: \"New data!\" }] }\nClient → Server: GET /updates (immediately reconnects)\n```\n\nThis reduces latency to near-zero when events occur, but introduces its own problems:"},"type":"text"},{"data":{"items":["**Connection Churn** — Each response closes the connection, requiring a new request. High-frequency updates mean constant reconnection overhead.","**Proxy and Load Balancer Issues** — Many proxies timeout idle connections, requiring careful timeout tuning.","**Out-of-Order Delivery** — Multiple long-poll requests can complete out of order, complicating state management.","**Header Redundancy** — Full headers are re-sent with every request/response cycle.","**Sticky Sessions Complexity** — Maintaining consistent routing across reconnects is challenging in distributed environments."],"title":"Long Polling Challenges","variant":"accent"},"type":"list"},{"data":{"icon":"Lightbulb","title":"The Fundamental Insight","content":"Both polling approaches fight against HTTP's fundamental design as a request-response protocol. Server-Sent Events embrace HTTP's strengths (ubiquity, firewall-friendliness, simple caching semantics) while introducing a streaming capability that eliminates the need for repeated requests.","variant":"tip"},"type":"callout"}],"titleType":"number","titleNumber":1},{"id":"sse-architecture","title":"SSE Architecture: The Push Model","content":[{"data":{"content":"Server-Sent Events provide a standardized, browser-native way to receive a continuous stream of updates from a server over HTTP. Unlike bidirectional WebSockets, SSE focuses on a single, optimized use case: server-to-client streaming.\n\n**The Core Architecture**\n\nSSE establishes a unidirectional channel from server to client:"},"type":"text"},{"data":{"height":"350px","mermaidSyntax":"flowchart LR\n subgraph Client[\"Client (Browser)\"]\n ES[EventSource API]\n JS[JavaScript Handler]\n end\n \n subgraph Server[\"Server\"]\n EP[SSE Endpoint]\n EL[Event Loop / Stream]\n DS[Data Sources]\n end\n \n DS -->|Updates| EL\n EL -->|Format Events| EP\n EP -->|\"text/event-stream\"| ES\n ES -->|\"dispatch events\"| JS\n \n style ES fill:#3b82f6,stroke:#1d4ed8,color:#fff\n style EP fill:#22c55e,stroke:#16a34a,color:#fff"},"type":"mermaid-excalidraw"},{"data":{"content":"**How SSE Works Under the Hood**\n\n1. **Connection Establishment**: The client creates an `EventSource` object pointing to an SSE endpoint. This initiates a standard HTTP GET request.\n\n2. **Content-Type Negotiation**: The server responds with `Content-Type: text/event-stream`, signaling that the response will be a continuous stream rather than a single response body.\n\n3. **Keep-Alive**: The connection remains open. The server sends events whenever they occur, formatted according to the SSE protocol.\n\n4. **Automatic Parsing**: The browser's EventSource API automatically parses incoming events and dispatches them to JavaScript handlers.\n\n5. **Automatic Reconnection**: If the connection drops, EventSource automatically attempts to reconnect, resuming from the last received event."},"type":"text"},{"data":{"fileName":"SSE Protocol Example","languages":[{"code":"HTTP/1.1 200 OK\nContent-Type: text/event-stream\nCache-Control: no-cache\nConnection: keep-alive\n\n: This is a comment (lines starting with colon are ignored)\n\ndata: Simple message with just data field\n\nevent: userJoined\ndata: {\"userId\": \"123\", \"name\": \"Alice\"}\n\nid: 12345\nevent: stockUpdate \ndata: {\"symbol\": \"AAPL\", \"price\": 178.50}\ndata: {\"change\": \"+1.2%\"}\nretry: 5000\n\nid: 12346\nevent: stockUpdate\ndata: {\"symbol\": \"GOOG\", \"price\": 141.20}","label":"HTTP Stream","value":"http","language":"http"}],"showLineNumbers":true},"type":"code"},{"data":{"icon":"Info","title":"Protocol Simplicity","content":"The SSE protocol is intentionally minimal. Events are plain text, fields are separated by newlines, and messages are separated by blank lines. This simplicity means you can debug SSE with curl, test with any HTTP client, and implement servers in any language with minimal overhead.","variant":"note"},"type":"callout"}],"titleType":"number","titleNumber":2},{"id":"sse-protocol","title":"The SSE Protocol in Depth","content":[{"data":{"content":"The Server-Sent Events protocol defines a simple text-based format for streaming events. Understanding this format is crucial for implementing robust SSE systems.\n\n**Message Fields**\n\nEach event can contain the following fields:"},"type":"text"},{"data":{"rows":[["data:","Event payload (required)","Multiple data lines are concatenated with newlines. Triggers dispatch when message completes."],["event:","Event type name","Determines which event listener receives the message. Defaults to 'message' if omitted."],["id:","Event identifier","Sets lastEventId. Sent to server on reconnection via Last-Event-ID header."],["retry:","Reconnection delay (ms)","Tells client how long to wait before reconnecting after disconnect."],[":","Comment","Ignored by client. Useful for keep-alive pings to prevent connection timeout."]],"caption":"SSE Message Fields","headers":["Field","Purpose","Behavior"]},"type":"table"},{"data":{"content":"**Message Parsing Rules**\n\nThe SSE parser follows precise rules that enable reliable streaming:"},"type":"text"},{"data":{"type":"ordered","items":["**Line Parsing**: Stream is parsed line-by-line. Lines ending in LF, CR, or CRLF are recognized.","**Field Extraction**: Each line is split at the first colon. The text before is the field name; after (minus optional leading space) is the value.","**Data Accumulation**: Multiple `data:` lines within an event are joined with `\n` characters.","**Event Dispatch**: A blank line signals the end of an event. The accumulated data is dispatched to handlers.","**Buffer Reset**: After dispatch, the event data buffer is cleared for the next message."],"variant":"accent"},"type":"list"},{"data":{"fileName":"Multi-Line Data Example","languages":[{"code":"event: notification\nid: msg-001\ndata: {\ndata: \"type\": \"alert\",\ndata: \"title\": \"System Update\",\ndata: \"body\": \"Maintenance scheduled for 3:00 AM UTC\",\ndata: \"priority\": \"high\"\ndata: }\n\nevent: heartbeat\ndata: ping\n\n","label":"SSE Stream","value":"sse","language":"text"},{"code":"// The first event delivers this string as event.data:\n`{\n \"type\": \"alert\",\n \"title\": \"System Update\",\n \"body\": \"Maintenance scheduled for 3:00 AM UTC\",\n \"priority\": \"high\"\n}`\n\n// Note: Data lines are joined with newlines.\n// Application must parse JSON after receiving.","label":"Received Data","value":"js","language":"javascript"}],"showLineNumbers":true},"type":"code"},{"data":{"icon":"AlertCircle","title":"JSON Parsing Consideration","content":"While data fields can span multiple lines for readability in examples, production systems typically send each JSON object on a single data line to simplify parsing and avoid newline handling complexities. The multi-line format is more useful for human-readable messages or when streaming very large objects.","variant":"warning"},"type":"callout"}],"titleType":"number","titleNumber":3},{"id":"client-implementation","title":"Client-Side Implementation","content":[{"data":{"content":"The browser's `EventSource` API provides a robust, production-ready interface for consuming SSE streams. Understanding its features enables building reliable real-time applications.\n\n**Basic Usage**"},"type":"text"},{"data":{"fileName":"eventsource-basics.js","languages":[{"code":"$64","label":"JavaScript","value":"js","language":"javascript"},{"code":"$65","label":"TypeScript","value":"ts","language":"typescript"}],"showLineNumbers":true},"type":"code"},{"data":{"content":"**EventSource Ready States**\n\nThe `readyState` property indicates the connection status:"},"type":"text"},{"data":{"rows":[["CONNECTING","0","Connection is being established or reconnection is in progress."],["OPEN","1","Connection is active and receiving events."],["CLOSED","2","Connection is closed and will not reconnect automatically."]],"caption":"EventSource Connection States","headers":["State","Value","Description"]},"type":"table"},{"data":{"icon":"Lightbulb","title":"Authentication Consideration","content":"EventSource doesn't support custom headers, which complicates token-based authentication. Common workarounds include: (1) passing tokens as query parameters, (2) using cookies for authentication, or (3) establishing auth via a separate endpoint before SSE connection. For complex auth requirements, consider using a polyfill library like 'event-source-polyfill' that supports custom headers.","variant":"tip"},"type":"callout"}],"titleType":"number","titleNumber":4},{"id":"server-implementation","title":"Server-Side Implementation","content":[{"data":{"content":"Implementing an SSE server requires understanding HTTP streaming, connection management, and event formatting. Let's examine implementations across popular frameworks."},"type":"text"},{"data":{"fileName":"SSE Server Implementations","languages":[{"code":"$66","label":"Node.js (Express)","value":"node","language":"javascript"},{"code":"$67","label":"Python (FastAPI)","value":"python","language":"python"},{"code":"$68","label":"Go","value":"go","language":"go"}],"showLineNumbers":true},"type":"code"},{"data":{"icon":"AlertCircle","title":"Critical: Response Buffering","content":"Many web servers and reverse proxies buffer responses before sending them to clients. This defeats SSE's real-time nature. Always disable buffering with appropriate headers (X-Accel-Buffering: no for Nginx) and ensure your application framework flushes responses immediately.","variant":"warning"},"type":"callout"}],"titleType":"number","titleNumber":5},{"id":"one-way-tradeoffs","title":"Why One-Way Is Often Enough","content":[{"data":{"content":"At first glance, SSE's one-way nature might seem like a limitation. After all, WebSockets offer bidirectional communication. However, for many use cases, the one-way model is not just sufficient—it's preferable.\n\n**The Hybrid Architecture Pattern**\n\nIn practice, most real-time applications combine SSE for server push with regular HTTP for client-to-server communication:"},"type":"text"},{"data":{"height":"400px","mermaidSyntax":"sequenceDiagram\n participant C as Client\n participant S as Server\n participant DB as Database\n \n Note over C,S: Initial Setup\n C->>S: GET /api/events (SSE)\n S-->>C: : connected\n \n Note over C,S: Client Action\n C->>S: POST /api/messages\n S->>DB: Store message\n S-->>C: 201 Created\n \n Note over C,S: Server Broadcast\n S->>DB: Query new messages\n DB-->>S: Message data\n S-->>C: event: newMessage (SSE)\n S-->>C: event: newMessage (SSE)"},"type":"mermaid-excalidraw"},{"data":{"content":"This pattern offers significant advantages over pure WebSocket implementations:"},"type":"text"},{"data":{"left":[{"data":{"items":["**Familiar Request-Response** — Client actions use standard REST/HTTP, with proper status codes, caching, and error handling.","**Load Balancer Friendly** — SSE works through standard HTTP infrastructure without special configuration.","**Connection Efficiency** — One persistent SSE connection handles all server updates; HTTP/2 multiplexes client requests.","**Simple Authentication** — Client requests use standard auth headers; only SSE needs special handling.","**Automatic Retry Logic** — EventSource handles reconnection automatically, with exponential backoff."],"title":{"icon":"CheckCircle","text":"Benefits of SSE + HTTP","type":"icon","color":"primary","variant":"outline-circle"},"variant":"accent"},"type":"list"}],"right":[{"data":{"items":["**Live Feeds** — News, social media, sports scores—where updates flow in one direction.","**Dashboards** — Real-time metrics, monitoring UIs, admin panels.","**Notifications** — System alerts, user mentions, activity updates.","**Progress Tracking** — Long-running jobs, file processing, build pipelines.","**Stock Tickers** — Financial data where clients only consume, never produce."],"title":{"icon":"Target","text":"Ideal Use Cases","type":"icon","color":"primary","variant":"outline-circle"},"variant":"accent"},"type":"list"}]},"type":"two-column"},{"data":{"icon":"Lightbulb","title":"Design Principle","content":"Choose the simplest technology that solves your problem. If your real-time needs are server-to-client only, SSE's simplicity, native browser support, and HTTP compatibility make it the right choice. Reserve WebSockets for truly bidirectional scenarios like collaborative editing or multiplayer games.","variant":"tip"},"type":"callout"}],"titleType":"number","titleNumber":6},{"id":"summary","title":"Summary: One-Way Server Push","content":[{"data":{"content":"We've established the foundational concepts of Server-Sent Events and the one-way push model. Let's consolidate the key takeaways:"},"type":"text"},{"data":{"type":"ordered","items":["**Polling is inefficient** — Both short and long polling waste resources and introduce latency. Server push eliminates these problems.","**SSE uses standard HTTP** — No special protocols or ports. Works through firewalls, proxies, and existing infrastructure.","**The protocol is simple** — Text-based format with data, event, id, and retry fields. Easy to debug and implement.","**EventSource is built-in** — Browsers provide native, production-ready SSE client with automatic reconnection.","**One-way is often optimal** — Combined with HTTP for client-to-server communication, SSE covers most real-time scenarios.","**Hybrid architecture wins** — SSE for push + REST for actions gives you the best of both worlds."],"title":{"icon":"CheckCircle","text":"Key Takeaways","type":"icon","color":"primary","variant":"outline-circle"},"variant":"accent"},"type":"list"},{"data":{"content":"**What's Next:**\n\nNow that we understand the fundamentals of SSE and one-way server push, we'll examine how SSE compares to WebSockets in detail. Understanding the trade-offs between these technologies is crucial for making the right architectural decisions."},"type":"text"},{"data":{"icon":"CheckCircle","title":"Page Complete","content":"You now understand the architecture and mechanics of one-way server push with SSE. You can implement basic SSE servers and clients, and you understand when this pattern is preferable to bidirectional alternatives. Next, we'll explore SSE vs WebSocket trade-offs in detail.","variant":"success"},"type":"callout"}],"titleType":"number","titleNumber":7}],"isLocked":false},{"id":"seed_9dd37695808111c2bc6e68bafcad9db7","title":"SSE vs WebSocket","order":1,"content":null,"isLocked":true},{"id":"seed_88d7989626bb81369424904f86b719df","title":"Browser Support","order":2,"content":null,"isLocked":true},{"id":"seed_99d9f42213c7cef2fd7e070089b5aabe","title":"Reconnection Handling","order":3,"content":null,"isLocked":true},{"id":"seed_54e492f26b232eaa3246c74f7274f5d4","title":"Use Cases","order":4,"content":null,"isLocked":true}]}},"dataUpdateCount":1,"dataUpdatedAt":1792315929228,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["learningContent","getModule"],{"input":{"slug":"server-sent-events"},"type":"query"}],"queryHash":"[[\"learningContent\",\"getModule\"],{\"input\":{\"slug\":\"server-sent-events\"},\"type\":\"query\"}]"},{"dehydratedAt":1792315929317,"state":{"data":{"json":null},"dataUpdateCount":1,"dataUpdatedAt":1792315929313,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["learningContent","getProgress"],{"input":{"moduleId":"seed_281b84dce475edcb15ade69e93064f7d"},"type":"query"}],"queryHash":"[[\"learningContent\",\"getProgress\"],{\"input\":{\"moduleId\":\"seed_281b84dce475edcb15ade69e93064f7d\"},\"type\":\"query\"}]"},{"dehydratedAt":1792315929317,"state":{"data":{"json":null},"dataUpdateCount":1,"dataUpdatedAt":1792315929315,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["feedback","get"],{"input":{"contentType":"LEARNING_PAGE","contentId":"seed_9dd37695808111c2bc6e68bafcad9db7"},"type":"query"}],"queryHash":"[[\"feedback\",\"get\"],{\"input\":{\"contentId\":\"seed_9dd37695808111c2bc6e68bafcad9db7\",\"contentType\":\"LEARNING_PAGE\"},\"type\":\"query\"}]"},{"dehydratedAt":1792315929317,"state":{"data":{"json":null},"dataUpdateCount":1,"dataUpdatedAt":1792315929315,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["feedback","getUserLike"],{"input":{"contentType":"LEARNING_PAGE","contentId":"seed_9dd37695808111c2bc6e68bafcad9db7"},"type":"query"}],"queryHash":"[[\"feedback\",\"getUserLike\"],{\"input\":{\"contentId\":\"seed_9dd37695808111c2bc6e68bafcad9db7\",\"contentType\":\"LEARNING_PAGE\"},\"type\":\"query\"}]"},{"dehydratedAt":1792315929317,"state":{"data":{"json":[]},"dataUpdateCount":1,"dataUpdatedAt":1792315929315,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["highlights","getHighlights"],{"input":{"contentType":"LEARNING_PAGE","contentId":"seed_9dd37695808111c2bc6e68bafcad9db7"},"type":"query"}],"queryHash":"[[\"highlights\",\"getHighlights\"],{\"input\":{\"contentId\":\"seed_9dd37695808111c2bc6e68bafcad9db7\",\"contentType\":\"LEARNING_PAGE\"},\"type\":\"query\"}]"},{"dehydratedAt":1792315929317,"state":{"data":"$undefined","dataUpdateCount":0,"dataUpdatedAt":0,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"pending","fetchStatus":"fetching"},"queryKey":[["highlights","getPopularHighlights"],{"input":{"contentType":"LEARNING_PAGE","contentId":"seed_9dd37695808111c2bc6e68bafcad9db7","minCount":2},"type":"query"}],"queryHash":"[[\"highlights\",\"getPopularHighlights\"],{\"input\":{\"contentId\":\"seed_9dd37695808111c2bc6e68bafcad9db7\",\"contentType\":\"LEARNING_PAGE\",\"minCount\":2},\"type\":\"query\"}]","promise":"$@69"}]},"children":"$L6a"}]