skills.rest
yutna
yutnaCOMMUNITY
Explore all skills by this author →
GitHub

realtime-channels

Implement SSE and WebSocket channels with React hooks and authentication.

2|Updated Feb 13, 2026
Search Tags:#real-time#presence#websockets#sse#channel-management#pusher#actioncable
One-click install
npx skills add https://github.com/yutna/vibe-next-template --skill realtime-channels
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: realtime-channels
Source: https://github.com/yutna/vibe-next-template/tree/main/.claude/skills/realtime-channels
Command: npx skills add https://github.com/yutna/vibe-next-template --skill realtime-channels

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Real-time communication patterns are essential for modern web apps. This skill consolidates SSE for simple server-to-client updates and Pusher/Ably-based WebSocket solutions, offering consistent channel abstractions and authentication flows.

Core Features & Use Cases

  • SSE-based streaming for lightweight updates and simple notifications across clients.
  • WebSocket support via Pusher for bi-directional communication, presence channels, and private channels.
  • Channel definitions and adapters (NotificationChannel, PresenceChannel) that map to Rails ActionCable concepts.
  • Client hooks and utilities to subscribe to channels and handle real-time events with automatic reconnection and error handling.
  • Authentication scaffolding for secure private/presence channels.

Quick Start

Wire up the SSE or Pusher client, then subscribe to channels and start receiving real-time events.

Frequently Asked Questions about realtime-channels

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

FAQPage Schema
How do I add real-time server-pushed updates to my web application?▼

Add real-time updates using SSE for lightweight server-to-client notifications or WebSockets via Pusher for bi-directional data. This provides consistent channel abstractions and authentication flows for live updates.

What's the best way to implement presence awareness across users in a web app?▼

Implement presence awareness using Pusher-based WebSocket solutions. This provides private and presence channels that map to Rails ActionCable concepts, enabling secure tracking of online users across clients.

How do I handle WebSocket reconnection and errors in React applications?▼

Handle WebSocket reconnection and errors using provided client hooks and utilities to subscribe to channels. These automatically manage reconnection logic and error handling for real-time events.

Can I use SSE instead of WebSockets for simple real-time chat-like channels?▼

Yes, you can use SSE for simple server-to-client updates and simple notifications. For bi-directional chat-like channels and presence features, WebSocket support via Pusher is recommended.

Do I need authentication endpoints for secure private channels?▼

Yes, secure private and presence channels require authentication scaffolding. This provides the necessary authentication endpoints to ensure secure channel access across users.

How do I define channels that map to Rails ActionCable concepts?▼

Define channels using provided adapters like NotificationChannel and PresenceChannel. These channel definitions map directly to Rails ActionCable concepts for consistent real-time communication patterns.

Related Skills

Explore More Software Engineering Skills→
gil00pitagil00pita

pusher

Implement real-time pub/sub messaging with Pusher Channels.

Community
Intermediate
cometchatcometchat
512

cometchat-flutter-conversations

Manage real-time chat conversation lists in Flutter with CometChat SDK and Bloc.

Official
Intermediate
RoleModelRoleModel
6

action-cable

Set up ActionCable connections, channels, and client consumers in Rails.

Official
Intermediate
ryasrkryasrk

realtime-patterns

Provide real-time communication patterns using WebSockets, SSE, pub/sub, and message queues.

Community
Intermediate