## Why Streaming Matters
Without streaming, users wait for the entire response before seeing anything. Streaming shows tokens as they generate, reducing perceived latency from seconds to milliseconds.
### SSE Fundamentals
Server-Sent Events provide a simple, one-directional stream from server to client:
```typescript // Server (Express/Node) app.post("/api/chat", async (req, res) => { res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", "Connection": "keep-alive", });
const stream = await openai.chat.completions.create({ model: "gpt-4o", messages: req.body.messages, stream: true, });
for await (const chunk of stream) { const content = chunk.choices[0]?.delta?.content; if (content) { res.write(`data: ${JSON.stringify({ content })}\n\n`); } } res.write("data: [DONE]\n\n"); res.end(); }); ```
### Client-Side Consumption
```typescript const response = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ messages }), });
const reader = response.body.getReader(); const decoder = new TextDecoder();
while (true) { const { done, value } = await reader.read(); if (done) break; const text = decoder.decode(value); // Parse SSE data lines and update UI } ```
### SSE vs. WebSockets
| Feature | SSE | WebSockets | |---------|-----|------------| | Direction | Server → Client | Bidirectional | | Protocol | HTTP | WS | | Reconnection | Automatic | Manual | | Best for | AI streaming | Real-time chat |