What are Server-Sent Events (SSE)?

SSE is a standard HTTP-based protocol that allows servers to push real-time, unidirectional data updates to web clients without the overhead of WebSockets.

Does this skill support LLM response streaming?

Yes, it includes specific patterns for fetch-based streaming and message parsing designed specifically for token-by-token AI outputs.

When should I use SSE instead of WebSockets?

Use SSE when you only need one-way communication (server-to-client), require automatic reconnection, or need to work through restrictive firewalls and proxies.

How does this skill handle connection failures?

It implements robust error handling using the EventSource readyState and provides patterns for exponential backoff and Last-Event-ID recovery.

Real-time SSE Patterns

Name: Real-time SSE Patterns
Author: agents-inc

byagents-inc

0•

API Development

Implements robust Server-Sent Events (SSE) for unidirectional real-time data streaming and automatic reconnection.

The web-realtime-sse skill provides a comprehensive framework for implementing Server-Sent Events in web applications, enabling efficient server-to-client communication. It covers everything from basic EventSource setup and custom event handling to advanced patterns like fetch-based streaming for LLM responses and exponential backoff for reconnections. By following these standardized patterns, developers can build resilient real-time features such as live dashboards, notification systems, and AI chat interfaces with built-in message recovery and proper resource cleanup.

Key Features

01Optimized React hooks for seamless integration into frontend components

02Standardized EventSource API implementation with full lifecycle management

03Type-safe message parsing using TypeScript discriminated unions

04Advanced fetch-based streaming for custom headers and POST requests

050 GitHub stars

06Automatic reconnection logic using Last-Event-ID for message recovery

Use Cases

01Implementing persistent server-push notification systems for web apps

02Building live financial dashboards and real-time sports tickers

03Streaming token-by-token AI responses from Large Language Models

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-realtime-sse

For use in Claude.ai and ChatGPT

Download Skill