Real-Time AI Streaming with Server-Sent Events (SSE) and WebSockets

When an AI model generates an extensive response (e.g., 500 words of complex code or legal analysis), traditional synchronous HTTP requests force the user to stare at a blank screen or loading spinner for 10 to 20 seconds. This creates a terrible user experience. In contrast, Real-Time Streaming delivers tokens to the user interface the instant they are calculated by the GPU, reducing Time-to-First-Token (TTFT) to under 300 milliseconds!

Technology Comparison: SSE vs WebSockets vs HTTP Polling

How Server-Sent Events (SSE) Works Under the Hood

1. The client initiates an HTTP POST or GET request with Accept: text/event-stream.
2. The server keeps the HTTP connection open, setting response headers:
   Content-Type: text/event-stream
   Cache-Control: no-cache
   Connection: keep-alive
3. As the LLM emits each token chunk, the server writes structured text lines:
   data: {"token": "Artificial"}
   data: {"token": " Intelligence"}
   data: [DONE]
4. The client reads the incoming chunks using ReadableStream and updates the UI state in real-time.

Full-Stack Code Implementation

1. Backend: Node.js (Express SSE Streamer)

// server_sse.js
const express = require('express');
const OpenAI = require('openai');
require('dotenv').config();

const app = express();
app.use(express.json());

const openai = new OpenAI();

app.post('/api/chat-stream', async (req, res) => {
    const { prompt } = req.body;

    // Set mandatory SSE Streaming Headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.flushHeaders(); // Establish stream immediately

    try {
        const stream = await openai.chat.completions.create({
            model: 'gpt-4o-mini',
            messages: [{ role: 'user', content: prompt }],
            stream: true, // Enable streaming chunk response
        });

        for await (const chunk of stream) {
            const token = chunk.choices[0]?.delta?.content || '';
            if (token) {
                // Send standard SSE event format
                res.write('data: ' + JSON.stringify({ token }) + '

');
            }
        }

        res.write('data: [DONE]

');
        res.end();
    } catch (err) {
        console.error("Streaming error:", err);
        res.write('data: ' + JSON.stringify({ error: err.message }) + '

');
        res.end();
    }
});

app.listen(3001, () => console.log("SSE Server running on port 3001"));

2. Frontend: Modern JavaScript / React Stream Consumer

// client_stream.js (Browser / React)
async function streamAIResponse(userPrompt, onChunkReceived) {
    const response = await fetch('/api/chat-stream', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: userPrompt })
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let fullResponse = "";

    while (true) {
        const { value, done } = await reader.read();
        if (done) break;

        const chunkText = decoder.decode(value);
        const lines = chunkText.split('
');

        for (const line of lines) {
            if (line.startsWith('data: ')) {
                const dataStr = line.replace('data: ', '').trim();
                if (dataStr === '[DONE]') {
                    console.log("Streaming completed successfully!");
                    return fullResponse;
                }
                try {
                    const parsed = JSON.parse(dataStr);
                    if (parsed.token) {
                        fullResponse += parsed.token;
                        onChunkReceived(parsed.token, fullResponse);
                    }
                } catch (e) {
                    // Ignore partial chunks
                }
            }
        }
    }
    return fullResponse;
}

// Example usage: Update UI dynamically as tokens arrive
// streamAIResponse("Write a quick Python sort function", (token, fullText) => {
//     document.getElementById("output").innerText = fullText;
// });