# Build Streaming APIs With SSE and WebSockets

Real-time features often fail because streaming protocols, reconnection, and backpressure are handled inconsistently. This skill gives Claude, Codex, and Claude Code practical patterns for SSE, WebSockets, ReadableStream, and LLM token streaming.

## Install

```bash
npx skillstore add ai agent hub/ariegoldkin-streaming-api-patterns
```

## Metadata

- - Slug: ariegoldkin-streaming-api-patterns
- - Version: 1.0.0
- - Author: AI Agent Hub
- - GitHub username: ArieGoldkin
- - License: MIT
- - Repository: https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/streaming-api-patterns
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: network
- - Quality score: 78
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/ariegoldkin-streaming-api-patterns
- - Manifest: https://skillstore.pages.dev/api/skills/ariegoldkin-streaming-api-patterns/manifest

## Capabilities

- Explains when to choose SSE, WebSockets, or ReadableStream for real-time application flows.
- Provides TypeScript patterns for Next.js streaming route handlers and browser clients.
- Covers LLM token streaming with completion markers and client-side stream parsing.
- Describes reconnection, keepalive, heartbeat, and exponential backoff strategies.
- Includes a checklist for security, performance, testing, and production readiness.

## Use Cases

- Stream LLM Responses: Build chat interfaces that show model output as tokens arrive, with completion markers and client parsing.
- Add Live Product Updates: Choose SSE or WebSockets for notifications, dashboards, progress updates, and collaborative application events.
- Review Streaming Readiness: Use the checklist to verify reconnection, backpressure, rate limits, testing, and memory behavior.

## Prompt Templates

### Choose a Streaming Protocol

```
Help me choose between Server-Sent Events, WebSockets, and ReadableStream for my feature. Ask about direction, scale, authentication, and browser support.
```

### Design an SSE Endpoint

```
Design a production-ready SSE endpoint for a Next.js application. Include headers, keepalive behavior, disconnect handling, and client parsing steps.
```

### Improve LLM Token Streaming

```
Review my LLM streaming flow for latency, partial chunks, completion handling, error events, and user cancellation.
```

### Audit a Real-Time Architecture

```
Audit my real-time architecture for backpressure, reconnect storms, rate limits, message validation, observability, and long-running connection limits.
```

## Limitations

- Examples are educational and need adaptation before use in production systems.
- It does not provide a complete authentication or authorization framework.
- It does not benchmark specific hosting providers or infrastructure limits.
- The included SSE template should sanitize error output before production use.

## Best Practices

- Match the protocol to message direction, connection count, and browser support.
- Validate messages, authenticate connections, and rate limit real-time endpoints.
- Test slow networks, reconnect paths, concurrent clients, and long-lived memory behavior.

## Anti Patterns

- Using WebSockets for one-way updates when SSE would be simpler.
- Streaming raw internal errors or unsanitized user content to clients.
- Ignoring backpressure, browser connection limits, and reconnect storm behavior.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T10:33:39.24\+00:00
- - Summary: Static analysis reported external command and weak cryptography patterns, but review found those were false positives from Markdown code fences, inline code, metadata text, and checklist wording. The network patterns are expected educational examples for SSE, WebSocket, fetch, and documentation links. One low-severity template issue remains because an error message is interpolated directly into an SSE JSON event.

## Stats

- - Views: 278
- - Downloads: 4
- - Favorites: 0
- - Popularity score: 0