skills.rest
lunaticwithaduck
lunaticwithaduckCOMMUNITY
Explore all skills by this author →
GitHub

realtime

Implement WebSocket, SSE, Web Worker, and Service Worker patterns for real-time and offline web apps.

2|Updated Jun 8, 2026
Search Tags:#real-time#service worker#pwa#server-sent events#websocket#comlink#web worker
One-click install
npx skills add https://github.com/lunaticwithaduck/easytech3d --skill realtime-lunaticwithaduck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: realtime
Source: https://github.com/lunaticwithaduck/easytech3d/tree/main/.claude/skills/realtime
Command: npx skills add https://github.com/lunaticwithaduck/easytech3d --skill realtime-lunaticwithaduck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires comlink, socket.io, socket.io-client, workbox-precaching, workbox-routing, workbox-strategies, workbox-expiration, workbox-background-sync, web-push, ws, and includes references (resource) components.

What problem does it solve? Choosing and correctly implementing real-time transports, off-main-thread processing, and offline support is error-prone: developers struggle with reconnection logic, transport selection, worker messaging, and Service Worker caching pitfalls. This Skill provides decision trees, comparison tables, and production-ready code patterns for each. ## Core Features & Use Cases - Transport Selection & Implementation: Decision trees and comparison tables for WebSocket, SSE, long polling, and socket.io, plus typed React hooks with exponential backoff reconnection and heartbeat. - Off-Main-Thread Processing: Patterns for Dedicated/Shared Workers, Comlink RPC, transferable objects, and worker pools for heavy computation. - Offline & PWA Support: Service Worker lifecycle, Workbox cache strategies, background sync, push notifications with VAPID, and update flows. - Use Case: Build a live chat feature with a typed WebSocket protocol and auto-reconnect, then add an offline-capable PWA shell with background sync for failed mutations. ## Quick Start Ask how to add real-time updates to your app, for example: "Set up a WebSocket connection in React with automatic reconnection and a typed message protocol."

Frequently Asked Questions about realtime

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

FAQPage Schema
How do I choose between WebSocket and Server-Sent Events?▼

Choose WebSocket when you need bidirectional communication like chat or collaborative editing. Choose SSE for server-to-client streams like notifications and dashboards, since it offers automatic reconnection and works over standard HTTP.

How do I add reconnection logic to a WebSocket in React?▼

Wrap the WebSocket in a hook that listens for onclose and retries with exponential backoff capped at 30 seconds plus jitter. Queue outgoing messages while disconnected and flush them on reconnect.

When should I use socket.io instead of native WebSocket?▼

Use socket.io when you need automatic transport fallback to HTTP long-polling, built-in reconnection, rooms, and acknowledgments. Use the native WebSocket API when you want zero dependencies and only need WebSocket transport.

How do I run heavy computation without blocking the UI?▼

Move the work into a Web Worker, optionally wrapped with Comlink for a typed async API. Transfer large ArrayBuffers using transferable objects for zero-copy messaging instead of structured cloning.

Why is my Service Worker not updating after deployment?▼

The new Service Worker stays in a waiting state until old tabs close. Call skipWaiting and clients.claim in the worker, or show an update banner that posts a SKIP_WAITING message and reloads on controllerchange.

Does EventSource support custom authentication headers?▼

EventSource does not support custom headers. Use cookie-based authentication, pass a token in the URL, or switch to a fetch-based SSE parser that reads the response stream with an Authorization header.

Related Skills

Explore More Software Engineering Skills→
GaryOcean428GaryOcean428

auth-setup

Standardize authentication, token issuance, and authorization across repositories with a single OAuth provider.

Community
Advanced
iii-hqiii-hq

iii-realtime-streaming

Stream real-time data via WebSocket and SSE endpoints with Redis state management.

Official
Intermediate
saint2706saint2706

performance-optimization

Optimizes frontend and backend bottlenecks using Lighthouse and Web Vitals profiling.

Community
Advanced
2nth-ai2nth-ai
1

tech/cloudflare/durable-objects

Manage persistent, globally-unique JavaScript objects with storage on Cloudflare Workers.

Official
Advanced