sse-frontend-patterns

Implement SSE reconnect patterns with exponential backoff for browser dashboards.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/Toqsick/MaxClaw --skill sse-frontend-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sse-frontend-patterns
Source: https://github.com/Toqsick/MaxClaw/tree/main/.claude/skills/sse-frontend-patterns
Command: npx skills add https://github.com/Toqsick/MaxClaw --skill sse-frontend-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides battle-tested patterns to optimize real-time browser dashboards using native EventSource / Server-Sent Events, solving issues like flaky connections, 429 errors, and console noise.

Core Features & Use Cases

  • Real-time Dashboard Patterns: Offers patterns for secure token handling, auto-reconnect logic, and error handling.
  • Auth via URL: Handles authentication by including tokens in the URL, as EventSource cannot send headers.
  • API Fetch Wrapper: Ensures consistent token handling across fetch calls.
  • Exponential Backoff: Implements an auto-reconnect mechanism with exponential backoff to avoid rate limit issues.
  • Use Case: For a developer building a real-time dashboard that requires secure, reliable communication with a backend server.

Quick Start

Implement the exponential backoff pattern for SSE reconnection in your dashboard using the provided JavaScript template.

Frequently Asked Questions about sse-frontend-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle authentication with EventSource in a real-time dashboard?

EventSource cannot send custom headers, so authentication must be handled by including secure tokens directly in the URL. This Skill provides patterns for secure token handling to ensure consistent authorization across your real-time dashboard's SSE connections.

Why does my Server-Sent Events connection fail with 429 Too Many Requests?

Server-Sent Events connections fail with 429 Too Many Requests when reconnect logic aggressively retries without delays. This Skill implements an auto-reconnect mechanism with exponential backoff to avoid rate limit issues and prevent flaky dashboard connections.

What is the best way to implement SSE reconnect logic with exponential backoff?

The best way to implement SSE reconnect logic is using an exponential backoff pattern that progressively delays retries. This Skill provides a JavaScript template to implement this auto-reconnect mechanism, ensuring reliable real-time browser dashboard communication.

Can I use native EventSource for real-time dashboards without WebSocket?

Yes, you can use native EventSource for real-time dashboards without WebSocket by leveraging Server-Sent Events. This Skill focuses on building robust browser dashboards using native EventSource, handling error scenarios, and reducing console noise.

Do I need vanilla HTML and JavaScript to use Server-Sent Events patterns?

Yes, you need an understanding of vanilla HTML and JavaScript to use these Server-Sent Events patterns. The Skill requires basic SSE concepts and provides JavaScript templates for implementing secure, reliable browser dashboard communication.

How does this Skill reduce console noise from flaky SSE connections?

This Skill reduces console noise from flaky SSE connections by providing battle-tested patterns for error handling and auto-reconnect logic. It implements exponential backoff to manage rate limits and ensures stable real-time dashboard communication without constant errors.