System Design (HLD)Server-Sent Events (SSE)

Server-Sent Events (SSE)

LevelIntermediate

Duration60 mins

TopicServer-Sent Events (SSE)

5 / 5

Use Cases

Where SSE Shines

Understanding where Server-Sent Events excel is as important as understanding how they work. SSE's one-way, text-based, HTTP-native design makes it ideal for certain use cases while less suitable for others. The difference between a successful SSE implementation and an over-engineered one often comes down to matching the technology to the problem.

In this comprehensive guide, we'll explore the most common SSE use cases, examining why SSE is the right choice, how to implement each pattern, and what architectural considerations apply at scale.

What You Will Learn

By the end of this page, you will understand which applications are best suited for SSE, implementation patterns for notifications, live feeds, dashboards, and progress tracking, scaling considerations for each use case, and when to use SSE versus alternatives.

SSE Use Case Categories

SSE excels in scenarios where the server needs to push updates to clients, but clients don't need to send frequent messages back through the same channel. Let's categorize the primary use cases:

SSE Use Case Classification
Category	Examples	Why SSE Is Ideal
Real-Time Notifications	Alerts, mentions, system messages	Server pushes; clients just receive. Perfect one-way fit.
Live Data Feeds	News, social media, stock tickers	Continuous stream of updates. No client→server needed.
Dashboard Updates	Metrics, monitoring, admin panels	Periodic refresh without polling. Low complexity.
Progress Tracking	File uploads, job status, builds	Long-running operations with status updates.
Collaborative Cursors	Document editing positions	High-frequency updates, one direction per stream.
AI/LLM Streaming	ChatGPT-style token streaming	Server generates tokens continuously; client displays.

The Common Thread

All ideal SSE use cases share these characteristics:

SSE-Ideal Characteristics

•Server-initiated updates — The server knows when something changes and pushes it out.
•Text-compatible data — JSON, XML, or plain text payloads (not binary).
•Client actions via separate channel — When clients do need to act, regular HTTP POST/PUT suffices.
•Tolerance for reconnection gaps — Brief disconnects are acceptable; message recovery handles gaps.
•Standard infrastructure compatibility — Must work through proxies, CDNs, and standard load balancers.

The 80/20 Rule

SSE handles 80% of real-time use cases with 20% of the complexity of WebSockets. Only reach for WebSockets when you genuinely need bidirectional messaging (chat, games) or binary data (audio, video). For most dashboard and notification needs, SSE is the simpler, more maintainable choice.

Use Case: Real-Time Notifications

Notifications are perhaps the most common SSE use case. Users expect instant alerts for mentions, messages, system events, and activity updates. SSE delivers these reliably without complex infrastructure.

Notification System Architecture

Converting Mermaid diagram...

Notification System Implementation

// notification-service.ts
import express from 'express';
import Redis from 'ioredis';
 
const app = express();
const redis = new Redis();
const subscriber = new Redis();
 
// User -> Response mapping
const userConnections = new Map<string, express.Response[]>();
 
// Subscribe to notification channel
subscriber.subscribe('notifications');
subscriber.on('message', (channel, message) => {
    const notification = JSON.parse(message);
    deliverToUser(notification.userId, notification);
});
 
function deliverToUser(userId: string, notification: Notification) {
    const connections = userConnections.get(userId) || [];
    const eventData = formatSSE('notification', notification);
    
    connections.forEach(res => {
        if (!res.writableEnded) {
            res.write(eventData);
        }
    });
}
 
function formatSSE(event: string, data: any): string {
    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    return `id: ${id}
event: ${event}
data: ${JSON.stringify(data)}
 
`;
}
 
// SSE endpoint
app.get('/api/notifications/stream', authenticateUser, (req, res) => {
    const userId = req.user.id;
    
    // 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');
    
    // Register connection
    if (!userConnections.has(userId)) {
        userConnections.set(userId, []);
    }
    userConnections.get(userId)!.push(res);
    
    // Send unread notifications on connect
    sendUnreadNotifications(userId, res);
    
    // Keepalive
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    // Cleanup
    req.on('close', () => {
        clearInterval(keepalive);
        const connections = userConnections.get(userId);
        if (connections) {
            const index = connections.indexOf(res);
            if (index > -1) connections.splice(index, 1);
            if (connections.length === 0) {
                userConnections.delete(userId);
            }
        }
    });
});
 
async function sendUnreadNotifications(userId: string, res: express.Response) {
    const unread = await getUnreadNotifications(userId);
    for (const notification of unread) {
        res.write(formatSSE('notification', notification));
    }
}
 
// Publish notification (called by other services)
async function createNotification(notification: Notification) {
    // Store in database
    await saveNotification(notification);
    
    // Publish for SSE delivery
    await redis.publish('notifications', JSON.stringify(notification));
    
    // Also send push notification for mobile/offline users
    await sendPushNotification(notification);
}
 
interface Notification {
    id: string;
    userId: string;
    type: 'mention' | 'like' | 'follow' | 'system';
    title: string;
    body: string;
    data?: Record<string, any>;
    createdAt: string;
    read: boolean;
}

Multi-Device Notifications

Users often have multiple tabs or devices open. The userConnections map stores an array of responses per user, broadcasting to all connected sessions. When a user marks a notification as read on one device, consider publishing a 'read' event to sync all devices.

Use Case: Live Data Feeds

Live feeds—stock tickers, sports scores, social media timelines, news updates—represent a classic SSE application. The server continuously generates updates that all interested clients receive.

Feed Architecture Considerations

High Throughput Feeds

•Stock tickers: 100+ updates/second
•Sports scores: Bursts during games
•Gaming leaderboards: Continuous changes
•Challenge: Message volume
•Solution: Batching, sampling, or per-client filtering

Moderate Throughput Feeds

•Social media: Posts, comments, likes
•News: Article publications
•Auction sites: Bid updates
•Challenge: Fan-out to many users
•Solution: Topic-based channels, pub/sub infrastructure

Stock Ticker Implementation

// stock-feed-service.ts
import express from 'express';
import Redis from 'ioredis';
 
const app = express();
const subscriber = new Redis();
 
interface StockUpdate {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
    volume: number;
    timestamp: string;
}
 
// Client subscriptions: symbol -> responses
const subscriptions = new Map<string, Set<express.Response>>();
 
// Subscribe to stock updates from market data service
subscriber.psubscribe('stocks:*');
subscriber.on('pmessage', (pattern, channel, message) => {
    const symbol = channel.split(':')[1];
    const update: StockUpdate = JSON.parse(message);
    
    broadcastToSymbol(symbol, update);
});
 
function broadcastToSymbol(symbol: string, update: StockUpdate) {
    const clients = subscriptions.get(symbol);
    if (!clients) return;
    
    const eventData = formatSSE('stockUpdate', update);
    
    for (const res of clients) {
        if (!res.writableEnded) {
            res.write(eventData);
        } else {
            clients.delete(res);
        }
    }
}
 
function formatSSE(event: string, data: any, id?: string): string {
    const eventId = id || `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    return `id: ${eventId}
event: ${event}
data: ${JSON.stringify(data)}
 
`;
}
 
// SSE endpoint with symbol subscription
app.get('/api/stocks/stream', (req, res) => {
    const symbolsParam = req.query.symbols as string;
    const symbols = symbolsParam?.split(',').map(s => s.trim().toUpperCase()) || [];
    
    if (symbols.length === 0) {
        res.status(400).json({ error: 'Provide symbols parameter' });
        return;
    }
    
    if (symbols.length > 50) {
        res.status(400).json({ error: 'Maximum 50 symbols per connection' });
        return;
    }
    
    // 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');
    
    // Subscribe to requested symbols
    for (const symbol of symbols) {
        if (!subscriptions.has(symbol)) {
            subscriptions.set(symbol, new Set());
        }
        subscriptions.get(symbol)!.add(res);
    }
    
    // Send current prices immediately
    sendCurrentPrices(symbols, res);
    
    // Confirmation
    res.write(`event: subscribed
data: ${JSON.stringify({ symbols })}
 
`);
    
    // Keepalive
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    // Cleanup
    req.on('close', () => {
        clearInterval(keepalive);
        for (const symbol of symbols) {
            subscriptions.get(symbol)?.delete(res);
        }
    });
});
 
async function sendCurrentPrices(symbols: string[], res: express.Response) {
    for (const symbol of symbols) {
        const price = await getCurrentPrice(symbol);
        if (price) {
            res.write(formatSSE('stockUpdate', price));
        }
    }
}

High-Frequency Updates

For very high-frequency feeds (100+ updates/second), consider client-side throttling or server-side batching. Sending every tick wastes bandwidth and overwhelms the UI. Batch updates every 100ms or sample to key price levels for a better user experience.

Use Case: Dashboards and Monitoring

Operational dashboards—metrics, logs, health status, admin panels—benefit greatly from SSE. Rather than polling for updates, dashboards receive changes as they happen, reducing server load while improving responsiveness.

Dashboard SSE Patterns

Common Dashboard Update Types

•Metric Updates — CPU, memory, request rates, error counts pushed every few seconds.
•Alert Triggers — Threshold breaches streamed immediately for rapid response.
•Log Streaming — Real-time log tailing for debugging and monitoring.
•Status Changes — Service health, deployment status, feature flag updates.
•Activity Feeds — User actions, admin events, audit logs.

Monitoring Dashboard

// metrics-stream.ts
import express from 'express';
import os from 'os';
 
const app = express();
 
interface SystemMetrics {
    timestamp: string;
    cpu: {
        usage: number;
        load: number[];
    };
    memory: {
        total: number;
        used: number;
        free: number;
        usagePercent: number;
    };
    requests: {
        total: number;
        errorRate: number;
        p50: number;
        p99: number;
    };
}
 
// Track connected dashboard clients
const dashboardClients = new Set<express.Response>();
 
// Push metrics to all connected dashboards
function broadcastMetrics(metrics: SystemMetrics) {
    const eventData = `event: metrics
data: ${JSON.stringify(metrics)}
 
`;
    
    for (const client of dashboardClients) {
        if (!client.writableEnded) {
            client.write(eventData);
        } else {
            dashboardClients.delete(client);
        }
    }
}
 
// Collect and broadcast metrics every 2 seconds
setInterval(async () => {
    const metrics = await collectMetrics();
    broadcastMetrics(metrics);
}, 2000);
 
async function collectMetrics(): Promise<SystemMetrics> {
    const cpuUsage = os.loadavg()[0] / os.cpus().length * 100;
    const totalMem = os.totalmem();
    const freeMem = os.freemem();
    
    return {
        timestamp: new Date().toISOString(),
        cpu: {
            usage: Math.min(100, cpuUsage),
            load: os.loadavg(),
        },
        memory: {
            total: totalMem,
            used: totalMem - freeMem,
            free: freeMem,
            usagePercent: ((totalMem - freeMem) / totalMem) * 100,
        },
        requests: await getRequestMetrics(),
    };
}
 
// Alert streaming
interface Alert {
    id: string;
    severity: 'info' | 'warning' | 'critical';
    title: string;
    description: string;
    metric: string;
    value: number;
    threshold: number;
    timestamp: string;
}
 
const alertThresholds = {
    'cpu.usage': { warning: 70, critical: 90 },
    'memory.usagePercent': { warning: 80, critical: 95 },
    'requests.errorRate': { warning: 1, critical: 5 },
    'requests.p99': { warning: 500, critical: 1000 },
};
 
function checkThresholds(metrics: SystemMetrics) {
    const alerts: Alert[] = [];
    
    for (const [path, thresholds] of Object.entries(alertThresholds)) {
        const value = getNestedValue(metrics, path);
        
        if (value >= thresholds.critical) {
            alerts.push(createAlert('critical', path, value, thresholds.critical));
        } else if (value >= thresholds.warning) {
            alerts.push(createAlert('warning', path, value, thresholds.warning));
        }
    }
    
    for (const alert of alerts) {
        broadcastAlert(alert);
    }
}
 
function broadcastAlert(alert: Alert) {
    const eventData = `event: alert
data: ${JSON.stringify(alert)}
 
`;
    
    for (const client of dashboardClients) {
        if (!client.writableEnded) {
            client.write(eventData);
        }
    }
}
 
// SSE endpoint
app.get('/api/dashboard/stream', requireAdmin, (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    dashboardClients.add(res);
    
    // Send current state immediately
    collectMetrics().then(metrics => {
        res.write(`event: metrics
data: ${JSON.stringify(metrics)}
 
`);
    });
    
    const keepalive = setInterval(() => {
        res.write(': keepalive
 
');
    }, 25000);
    
    req.on('close', () => {
        clearInterval(keepalive);
        dashboardClients.delete(res);
    });
});

Dashboard Best Practice

Send the full current state on connection, then stream only deltas. This ensures dashboards are immediately useful without waiting for the next update cycle, while keeping ongoing bandwidth low.

Use Case: Progress Tracking

Long-running operations—file uploads, video processing, CI/CD builds, data imports—benefit from real-time progress updates. SSE provides a simple way to stream progress without polling.

Progress Tracking Architecture

Converting Mermaid diagram...

Job Progress Implementation

// job-progress.ts
import express from 'express';
import Redis from 'ioredis';
import { v4 as uuid } from 'uuid';
 
const app = express();
const redis = new Redis();
const subscriber = new Redis();
 
interface JobProgress {
    jobId: string;
    status: 'pending' | 'processing' | 'completed' | 'failed';
    progress: number; // 0-100
    message?: string;
    result?: any;
    error?: string;
}
 
// Start a new job
app.post('/api/jobs', async (req, res) => {
    const jobId = uuid();
    
    // Initialize job status
    await redis.hset(`job:${jobId}`, {
        status: 'pending',
        progress: 0,
        createdAt: Date.now(),
    });
    
    // Queue the job
    await redis.lpush('job:queue', JSON.stringify({
        id: jobId,
        type: req.body.type,
        params: req.body.params,
    }));
    
    res.status(202).json({ 
        jobId,
        progressUrl: `/api/jobs/${jobId}/progress`,
    });
});
 
// Stream job progress
app.get('/api/jobs/:jobId/progress', async (req, res) => {
    const { jobId } = req.params;
    
    // Verify job exists
    const exists = await redis.exists(`job:${jobId}`);
    if (!exists) {
        res.status(404).json({ error: 'Job not found' });
        return;
    }
    
    // SSE headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    // Send current status immediately
    const currentStatus = await redis.hgetall(`job:${jobId}`);
    res.write(`event: progress
data: ${JSON.stringify(currentStatus)}
 
`);
    
    // If job already complete, close connection
    if (currentStatus.status === 'completed' || currentStatus.status === 'failed') {
        res.end();
        return;
    }
    
    // Subscribe to job updates
    const jobSubscriber = new Redis();
    await jobSubscriber.subscribe(`job:${jobId}:updates`);
    
    jobSubscriber.on('message', (channel, message) => {
        const update: JobProgress = JSON.parse(message);
        
        if (update.status === 'completed') {
            res.write(`event: complete
data: ${JSON.stringify(update)}
 
`);
            cleanup();
            res.end();
        } else if (update.status === 'failed') {
            res.write(`event: error
data: ${JSON.stringify(update)}
 
`);
            cleanup();
            res.end();
        } else {
            res.write(`event: progress
data: ${JSON.stringify(update)}
 
`);
        }
    });
    
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    function cleanup() {
        clearInterval(keepalive);
        jobSubscriber.unsubscribe();
        jobSubscriber.disconnect();
    }
    
    req.on('close', cleanup);
});
 
// Worker publishes progress updates
async function updateJobProgress(
    jobId: string, 
    progress: number, 
    message?: string
) {
    const update: JobProgress = {
        jobId,
        status: 'processing',
        progress,
        message,
    };
    
    await redis.hset(`job:${jobId}`, {
        status: 'processing',
        progress,
        ...(message && { message }),
    });
    
    await redis.publish(`job:${jobId}:updates`, JSON.stringify(update));
}
 
async function completeJob(jobId: string, result: any) {
    const update: JobProgress = {
        jobId,
        status: 'completed',
        progress: 100,
        result,
    };
    
    await redis.hset(`job:${jobId}`, {
        status: 'completed',
        progress: 100,
        result: JSON.stringify(result),
        completedAt: Date.now(),
    });
    
    await redis.publish(`job:${jobId}:updates`, JSON.stringify(update));
}

Connection Lifecycle

Progress SSE connections are naturally short-lived—they close when the job completes. This differs from notification SSE which stays open indefinitely. Design your server to handle both patterns: some connections last seconds, others last hours.

Use Case: AI/LLM Streaming

The rise of large language models (LLMs) has created a new killer use case for SSE: streaming AI-generated content token by token. Users expect the ChatGPT-style experience of seeing responses appear in real-time.

Why SSE for LLM Streaming

SSE Advantages for LLM

•Perceived speed — First token appears in <500ms vs waiting 5-30s for complete response.
•Natural fit — Server (LLM) generates, client (UI) displays. Perfect one-way flow.
•Text payload — Tokens are text. No need for binary WebSocket.
•HTTP compatibility — Works through CDNs, proxies, and serverless platforms.
•Standard implementation — OpenAI, Anthropic, and other APIs use SSE for streaming.

LLM Streaming Implementation

// llm-stream.ts
import express from 'express';
import OpenAI from 'openai';
 
const app = express();
const openai = new OpenAI();
 
app.post('/api/chat', async (req, res) => {
    const { messages } = req.body;
    
    // Set SSE headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    try {
        const stream = await openai.chat.completions.create({
            model: 'gpt-4-turbo-preview',
            messages,
            stream: true,
        });
        
        let fullContent = '';
        
        for await (const chunk of stream) {
            const content = chunk.choices[0]?.delta?.content || '';
            
            if (content) {
                fullContent += content;
                
                // Stream token to client
                res.write(`event: token
data: ${JSON.stringify({ content })}
 
`);
            }
            
            // Check for finish reason
            if (chunk.choices[0]?.finish_reason) {
                res.write(`event: done
data: ${JSON.stringify({
                    finish_reason: chunk.choices[0].finish_reason,
                    usage: chunk.usage,
                })}
 
`);
            }
        }
        
        // Save conversation to database
        await saveMessage(req.user.id, 'assistant', fullContent);
        
        res.end();
        
    } catch (error) {
        console.error('LLM error:', error);
        res.write(`event: error
data: ${JSON.stringify({
            error: 'Failed to generate response',
        })}
 
`);
        res.end();
    }
});
 
// Alternative: Anthropic Claude streaming
app.post('/api/chat/claude', async (req, res) => {
    const { messages } = req.body;
    
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    
    const anthropic = new Anthropic();
    
    const stream = await anthropic.messages.stream({
        model: 'claude-3-opus-20240229',
        max_tokens: 4096,
        messages,
    });
    
    stream.on('text', (text) => {
        res.write(`event: token
data: ${JSON.stringify({ content: text })}
 
`);
    });
    
    stream.on('message', (message) => {
        res.write(`event: done
data: ${JSON.stringify({
            stop_reason: message.stop_reason,
            usage: message.usage,
        })}
 
`);
        res.end();
    });
    
    stream.on('error', (error) => {
        res.write(`event: error
data: ${JSON.stringify({ error: error.message })}
 
`);
        res.end();
    });
});

POST with SSE

Notice that LLM streaming uses POST with an SSE response. While EventSource only supports GET, you can use fetch() with response.body.getReader() to stream POST responses. Libraries like @microsoft/fetch-event-source simplify this pattern.

Summary: SSE Use Cases

We've comprehensively explored the primary use cases for Server-Sent Events. Let's consolidate the key insights:

Key Takeaways

•SSE excels for server→client updates — Notifications, feeds, dashboards, progress tracking, AI streaming. One-way flow matches most real-time needs.
•Notifications are the classic use case — Instant alerts with multi-device sync. SSE + HTTP for marking as read.
•Live feeds scale with topic-based channels — Subscribe to specific stocks, teams, or topics. Server routes updates to interested clients.
•Dashboards benefit from immediate state + deltas — Send current metrics on connect, then stream changes.
•Progress tracking connections are short-lived — Open for job duration only. Handle natural connection close on completion.
•LLM streaming is a killer use case — Token-by-token streaming creates engaging UX. SSE is the standard approach.

Module Complete

You now have comprehensive knowledge of Server-Sent Events—from protocol mechanics to browser support, reconnection handling, and practical use cases. SSE provides a powerful, simple solution for server-to-client real-time communication that works with standard HTTP infrastructure.

Module Complete

Congratulations! You've mastered Server-Sent Events. You understand when SSE is the right choice, how to implement it across various use cases, and the architectural patterns that make SSE applications scale. Apply this knowledge to build efficient, maintainable real-time features.

5 / 5

Loading learning content...

System Design (HLD)Server-Sent Events (SSE)

Server-Sent Events (SSE)

LevelIntermediate

Duration60 mins

TopicServer-Sent Events (SSE)

5 / 5

Use Cases

Where SSE Shines

In this comprehensive guide, we'll explore the most common SSE use cases, examining why SSE is the right choice, how to implement each pattern, and what architectural considerations apply at scale.

What You Will Learn

SSE Use Case Categories

SSE excels in scenarios where the server needs to push updates to clients, but clients don't need to send frequent messages back through the same channel. Let's categorize the primary use cases:

SSE Use Case Classification
Category	Examples	Why SSE Is Ideal
Real-Time Notifications	Alerts, mentions, system messages	Server pushes; clients just receive. Perfect one-way fit.
Live Data Feeds	News, social media, stock tickers	Continuous stream of updates. No client→server needed.
Dashboard Updates	Metrics, monitoring, admin panels	Periodic refresh without polling. Low complexity.
Progress Tracking	File uploads, job status, builds	Long-running operations with status updates.
Collaborative Cursors	Document editing positions	High-frequency updates, one direction per stream.
AI/LLM Streaming	ChatGPT-style token streaming	Server generates tokens continuously; client displays.

The Common Thread

All ideal SSE use cases share these characteristics:

SSE-Ideal Characteristics

•Server-initiated updates — The server knows when something changes and pushes it out.
•Text-compatible data — JSON, XML, or plain text payloads (not binary).
•Client actions via separate channel — When clients do need to act, regular HTTP POST/PUT suffices.
•Tolerance for reconnection gaps — Brief disconnects are acceptable; message recovery handles gaps.
•Standard infrastructure compatibility — Must work through proxies, CDNs, and standard load balancers.

The 80/20 Rule

Use Case: Real-Time Notifications

Notification System Architecture

Converting Mermaid diagram...

Notification System Implementation

// notification-service.ts
import express from 'express';
import Redis from 'ioredis';
 
const app = express();
const redis = new Redis();
const subscriber = new Redis();
 
// User -> Response mapping
const userConnections = new Map<string, express.Response[]>();
 
// Subscribe to notification channel
subscriber.subscribe('notifications');
subscriber.on('message', (channel, message) => {
    const notification = JSON.parse(message);
    deliverToUser(notification.userId, notification);
});
 
function deliverToUser(userId: string, notification: Notification) {
    const connections = userConnections.get(userId) || [];
    const eventData = formatSSE('notification', notification);
    
    connections.forEach(res => {
        if (!res.writableEnded) {
            res.write(eventData);
        }
    });
}
 
function formatSSE(event: string, data: any): string {
    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    return `id: ${id}
event: ${event}
data: ${JSON.stringify(data)}
 
`;
}
 
// SSE endpoint
app.get('/api/notifications/stream', authenticateUser, (req, res) => {
    const userId = req.user.id;
    
    // 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');
    
    // Register connection
    if (!userConnections.has(userId)) {
        userConnections.set(userId, []);
    }
    userConnections.get(userId)!.push(res);
    
    // Send unread notifications on connect
    sendUnreadNotifications(userId, res);
    
    // Keepalive
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    // Cleanup
    req.on('close', () => {
        clearInterval(keepalive);
        const connections = userConnections.get(userId);
        if (connections) {
            const index = connections.indexOf(res);
            if (index > -1) connections.splice(index, 1);
            if (connections.length === 0) {
                userConnections.delete(userId);
            }
        }
    });
});
 
async function sendUnreadNotifications(userId: string, res: express.Response) {
    const unread = await getUnreadNotifications(userId);
    for (const notification of unread) {
        res.write(formatSSE('notification', notification));
    }
}
 
// Publish notification (called by other services)
async function createNotification(notification: Notification) {
    // Store in database
    await saveNotification(notification);
    
    // Publish for SSE delivery
    await redis.publish('notifications', JSON.stringify(notification));
    
    // Also send push notification for mobile/offline users
    await sendPushNotification(notification);
}
 
interface Notification {
    id: string;
    userId: string;
    type: 'mention' | 'like' | 'follow' | 'system';
    title: string;
    body: string;
    data?: Record<string, any>;
    createdAt: string;
    read: boolean;
}

Multi-Device Notifications

Use Case: Live Data Feeds

Live feeds—stock tickers, sports scores, social media timelines, news updates—represent a classic SSE application. The server continuously generates updates that all interested clients receive.

Feed Architecture Considerations

High Throughput Feeds

•Stock tickers: 100+ updates/second
•Sports scores: Bursts during games
•Gaming leaderboards: Continuous changes
•Challenge: Message volume
•Solution: Batching, sampling, or per-client filtering

Moderate Throughput Feeds

•Social media: Posts, comments, likes
•News: Article publications
•Auction sites: Bid updates
•Challenge: Fan-out to many users
•Solution: Topic-based channels, pub/sub infrastructure

Stock Ticker Implementation

// stock-feed-service.ts
import express from 'express';
import Redis from 'ioredis';
 
const app = express();
const subscriber = new Redis();
 
interface StockUpdate {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
    volume: number;
    timestamp: string;
}
 
// Client subscriptions: symbol -> responses
const subscriptions = new Map<string, Set<express.Response>>();
 
// Subscribe to stock updates from market data service
subscriber.psubscribe('stocks:*');
subscriber.on('pmessage', (pattern, channel, message) => {
    const symbol = channel.split(':')[1];
    const update: StockUpdate = JSON.parse(message);
    
    broadcastToSymbol(symbol, update);
});
 
function broadcastToSymbol(symbol: string, update: StockUpdate) {
    const clients = subscriptions.get(symbol);
    if (!clients) return;
    
    const eventData = formatSSE('stockUpdate', update);
    
    for (const res of clients) {
        if (!res.writableEnded) {
            res.write(eventData);
        } else {
            clients.delete(res);
        }
    }
}
 
function formatSSE(event: string, data: any, id?: string): string {
    const eventId = id || `${Date.now()}-${Math.random().toString(36).slice(2)}`;
    return `id: ${eventId}
event: ${event}
data: ${JSON.stringify(data)}
 
`;
}
 
// SSE endpoint with symbol subscription
app.get('/api/stocks/stream', (req, res) => {
    const symbolsParam = req.query.symbols as string;
    const symbols = symbolsParam?.split(',').map(s => s.trim().toUpperCase()) || [];
    
    if (symbols.length === 0) {
        res.status(400).json({ error: 'Provide symbols parameter' });
        return;
    }
    
    if (symbols.length > 50) {
        res.status(400).json({ error: 'Maximum 50 symbols per connection' });
        return;
    }
    
    // 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');
    
    // Subscribe to requested symbols
    for (const symbol of symbols) {
        if (!subscriptions.has(symbol)) {
            subscriptions.set(symbol, new Set());
        }
        subscriptions.get(symbol)!.add(res);
    }
    
    // Send current prices immediately
    sendCurrentPrices(symbols, res);
    
    // Confirmation
    res.write(`event: subscribed
data: ${JSON.stringify({ symbols })}
 
`);
    
    // Keepalive
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    // Cleanup
    req.on('close', () => {
        clearInterval(keepalive);
        for (const symbol of symbols) {
            subscriptions.get(symbol)?.delete(res);
        }
    });
});
 
async function sendCurrentPrices(symbols: string[], res: express.Response) {
    for (const symbol of symbols) {
        const price = await getCurrentPrice(symbol);
        if (price) {
            res.write(formatSSE('stockUpdate', price));
        }
    }
}

High-Frequency Updates

Use Case: Dashboards and Monitoring

Dashboard SSE Patterns

Common Dashboard Update Types

•Metric Updates — CPU, memory, request rates, error counts pushed every few seconds.
•Alert Triggers — Threshold breaches streamed immediately for rapid response.
•Log Streaming — Real-time log tailing for debugging and monitoring.
•Status Changes — Service health, deployment status, feature flag updates.
•Activity Feeds — User actions, admin events, audit logs.

Monitoring Dashboard

// metrics-stream.ts
import express from 'express';
import os from 'os';
 
const app = express();
 
interface SystemMetrics {
    timestamp: string;
    cpu: {
        usage: number;
        load: number[];
    };
    memory: {
        total: number;
        used: number;
        free: number;
        usagePercent: number;
    };
    requests: {
        total: number;
        errorRate: number;
        p50: number;
        p99: number;
    };
}
 
// Track connected dashboard clients
const dashboardClients = new Set<express.Response>();
 
// Push metrics to all connected dashboards
function broadcastMetrics(metrics: SystemMetrics) {
    const eventData = `event: metrics
data: ${JSON.stringify(metrics)}
 
`;
    
    for (const client of dashboardClients) {
        if (!client.writableEnded) {
            client.write(eventData);
        } else {
            dashboardClients.delete(client);
        }
    }
}
 
// Collect and broadcast metrics every 2 seconds
setInterval(async () => {
    const metrics = await collectMetrics();
    broadcastMetrics(metrics);
}, 2000);
 
async function collectMetrics(): Promise<SystemMetrics> {
    const cpuUsage = os.loadavg()[0] / os.cpus().length * 100;
    const totalMem = os.totalmem();
    const freeMem = os.freemem();
    
    return {
        timestamp: new Date().toISOString(),
        cpu: {
            usage: Math.min(100, cpuUsage),
            load: os.loadavg(),
        },
        memory: {
            total: totalMem,
            used: totalMem - freeMem,
            free: freeMem,
            usagePercent: ((totalMem - freeMem) / totalMem) * 100,
        },
        requests: await getRequestMetrics(),
    };
}
 
// Alert streaming
interface Alert {
    id: string;
    severity: 'info' | 'warning' | 'critical';
    title: string;
    description: string;
    metric: string;
    value: number;
    threshold: number;
    timestamp: string;
}
 
const alertThresholds = {
    'cpu.usage': { warning: 70, critical: 90 },
    'memory.usagePercent': { warning: 80, critical: 95 },
    'requests.errorRate': { warning: 1, critical: 5 },
    'requests.p99': { warning: 500, critical: 1000 },
};
 
function checkThresholds(metrics: SystemMetrics) {
    const alerts: Alert[] = [];
    
    for (const [path, thresholds] of Object.entries(alertThresholds)) {
        const value = getNestedValue(metrics, path);
        
        if (value >= thresholds.critical) {
            alerts.push(createAlert('critical', path, value, thresholds.critical));
        } else if (value >= thresholds.warning) {
            alerts.push(createAlert('warning', path, value, thresholds.warning));
        }
    }
    
    for (const alert of alerts) {
        broadcastAlert(alert);
    }
}
 
function broadcastAlert(alert: Alert) {
    const eventData = `event: alert
data: ${JSON.stringify(alert)}
 
`;
    
    for (const client of dashboardClients) {
        if (!client.writableEnded) {
            client.write(eventData);
        }
    }
}
 
// SSE endpoint
app.get('/api/dashboard/stream', requireAdmin, (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    dashboardClients.add(res);
    
    // Send current state immediately
    collectMetrics().then(metrics => {
        res.write(`event: metrics
data: ${JSON.stringify(metrics)}
 
`);
    });
    
    const keepalive = setInterval(() => {
        res.write(': keepalive
 
');
    }, 25000);
    
    req.on('close', () => {
        clearInterval(keepalive);
        dashboardClients.delete(res);
    });
});

Dashboard Best Practice

Send the full current state on connection, then stream only deltas. This ensures dashboards are immediately useful without waiting for the next update cycle, while keeping ongoing bandwidth low.

Use Case: Progress Tracking

Long-running operations—file uploads, video processing, CI/CD builds, data imports—benefit from real-time progress updates. SSE provides a simple way to stream progress without polling.

Progress Tracking Architecture

Converting Mermaid diagram...

Job Progress Implementation

// job-progress.ts
import express from 'express';
import Redis from 'ioredis';
import { v4 as uuid } from 'uuid';
 
const app = express();
const redis = new Redis();
const subscriber = new Redis();
 
interface JobProgress {
    jobId: string;
    status: 'pending' | 'processing' | 'completed' | 'failed';
    progress: number; // 0-100
    message?: string;
    result?: any;
    error?: string;
}
 
// Start a new job
app.post('/api/jobs', async (req, res) => {
    const jobId = uuid();
    
    // Initialize job status
    await redis.hset(`job:${jobId}`, {
        status: 'pending',
        progress: 0,
        createdAt: Date.now(),
    });
    
    // Queue the job
    await redis.lpush('job:queue', JSON.stringify({
        id: jobId,
        type: req.body.type,
        params: req.body.params,
    }));
    
    res.status(202).json({ 
        jobId,
        progressUrl: `/api/jobs/${jobId}/progress`,
    });
});
 
// Stream job progress
app.get('/api/jobs/:jobId/progress', async (req, res) => {
    const { jobId } = req.params;
    
    // Verify job exists
    const exists = await redis.exists(`job:${jobId}`);
    if (!exists) {
        res.status(404).json({ error: 'Job not found' });
        return;
    }
    
    // SSE headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    // Send current status immediately
    const currentStatus = await redis.hgetall(`job:${jobId}`);
    res.write(`event: progress
data: ${JSON.stringify(currentStatus)}
 
`);
    
    // If job already complete, close connection
    if (currentStatus.status === 'completed' || currentStatus.status === 'failed') {
        res.end();
        return;
    }
    
    // Subscribe to job updates
    const jobSubscriber = new Redis();
    await jobSubscriber.subscribe(`job:${jobId}:updates`);
    
    jobSubscriber.on('message', (channel, message) => {
        const update: JobProgress = JSON.parse(message);
        
        if (update.status === 'completed') {
            res.write(`event: complete
data: ${JSON.stringify(update)}
 
`);
            cleanup();
            res.end();
        } else if (update.status === 'failed') {
            res.write(`event: error
data: ${JSON.stringify(update)}
 
`);
            cleanup();
            res.end();
        } else {
            res.write(`event: progress
data: ${JSON.stringify(update)}
 
`);
        }
    });
    
    const keepalive = setInterval(() => {
        if (!res.writableEnded) {
            res.write(': keepalive
 
');
        }
    }, 25000);
    
    function cleanup() {
        clearInterval(keepalive);
        jobSubscriber.unsubscribe();
        jobSubscriber.disconnect();
    }
    
    req.on('close', cleanup);
});
 
// Worker publishes progress updates
async function updateJobProgress(
    jobId: string, 
    progress: number, 
    message?: string
) {
    const update: JobProgress = {
        jobId,
        status: 'processing',
        progress,
        message,
    };
    
    await redis.hset(`job:${jobId}`, {
        status: 'processing',
        progress,
        ...(message && { message }),
    });
    
    await redis.publish(`job:${jobId}:updates`, JSON.stringify(update));
}
 
async function completeJob(jobId: string, result: any) {
    const update: JobProgress = {
        jobId,
        status: 'completed',
        progress: 100,
        result,
    };
    
    await redis.hset(`job:${jobId}`, {
        status: 'completed',
        progress: 100,
        result: JSON.stringify(result),
        completedAt: Date.now(),
    });
    
    await redis.publish(`job:${jobId}:updates`, JSON.stringify(update));
}

Connection Lifecycle

Use Case: AI/LLM Streaming

Why SSE for LLM Streaming

SSE Advantages for LLM

•Perceived speed — First token appears in <500ms vs waiting 5-30s for complete response.
•Natural fit — Server (LLM) generates, client (UI) displays. Perfect one-way flow.
•Text payload — Tokens are text. No need for binary WebSocket.
•HTTP compatibility — Works through CDNs, proxies, and serverless platforms.
•Standard implementation — OpenAI, Anthropic, and other APIs use SSE for streaming.

LLM Streaming Implementation

// llm-stream.ts
import express from 'express';
import OpenAI from 'openai';
 
const app = express();
const openai = new OpenAI();
 
app.post('/api/chat', async (req, res) => {
    const { messages } = req.body;
    
    // Set SSE headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    
    try {
        const stream = await openai.chat.completions.create({
            model: 'gpt-4-turbo-preview',
            messages,
            stream: true,
        });
        
        let fullContent = '';
        
        for await (const chunk of stream) {
            const content = chunk.choices[0]?.delta?.content || '';
            
            if (content) {
                fullContent += content;
                
                // Stream token to client
                res.write(`event: token
data: ${JSON.stringify({ content })}
 
`);
            }
            
            // Check for finish reason
            if (chunk.choices[0]?.finish_reason) {
                res.write(`event: done
data: ${JSON.stringify({
                    finish_reason: chunk.choices[0].finish_reason,
                    usage: chunk.usage,
                })}
 
`);
            }
        }
        
        // Save conversation to database
        await saveMessage(req.user.id, 'assistant', fullContent);
        
        res.end();
        
    } catch (error) {
        console.error('LLM error:', error);
        res.write(`event: error
data: ${JSON.stringify({
            error: 'Failed to generate response',
        })}
 
`);
        res.end();
    }
});
 
// Alternative: Anthropic Claude streaming
app.post('/api/chat/claude', async (req, res) => {
    const { messages } = req.body;
    
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    
    const anthropic = new Anthropic();
    
    const stream = await anthropic.messages.stream({
        model: 'claude-3-opus-20240229',
        max_tokens: 4096,
        messages,
    });
    
    stream.on('text', (text) => {
        res.write(`event: token
data: ${JSON.stringify({ content: text })}
 
`);
    });
    
    stream.on('message', (message) => {
        res.write(`event: done
data: ${JSON.stringify({
            stop_reason: message.stop_reason,
            usage: message.usage,
        })}
 
`);
        res.end();
    });
    
    stream.on('error', (error) => {
        res.write(`event: error
data: ${JSON.stringify({ error: error.message })}
 
`);
        res.end();
    });
});

POST with SSE

Summary: SSE Use Cases

We've comprehensively explored the primary use cases for Server-Sent Events. Let's consolidate the key insights:

Key Takeaways

•SSE excels for server→client updates — Notifications, feeds, dashboards, progress tracking, AI streaming. One-way flow matches most real-time needs.
•Notifications are the classic use case — Instant alerts with multi-device sync. SSE + HTTP for marking as read.
•Live feeds scale with topic-based channels — Subscribe to specific stocks, teams, or topics. Server routes updates to interested clients.
•Dashboards benefit from immediate state + deltas — Send current metrics on connect, then stream changes.
•Progress tracking connections are short-lived — Open for job duration only. Handle natural connection close on completion.
•LLM streaming is a killer use case — Token-by-token streaming creates engaging UX. SSE is the standard approach.

Module Complete

Module Complete

5 / 5

Server-Sent Events (SSE) - Page 5 of 5 | OneNoughtOne