conexao-signalr

Manages the SignalR hub connection layer for a React chess frontend with typed invoke and event subscription.

Updated Jan 28, 2024
One-click install
npx skills add https://github.com/Thiago-Cruz-eng/KrockSide --skill conexao-signalr-thiago-cruz-eng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: conexao-signalr
Source: https://github.com/Thiago-Cruz-eng/KrockSide/tree/main/.agents/skills/conexao-signalr
Command: npx skills add https://github.com/Thiago-Cruz-eng/KrockSide --skill conexao-signalr-thiago-cruz-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @microsoft/signalr.

What problem does it solve? It prevents common SignalR integration bugs in the KrockSide React frontend: invoking hub methods before the connection is ready, duplicated event handlers from missing cleanup, connection loops caused by inline factory props, and silent contract mismatches with the ASP.NET Core backend hub. ## Core Features & Use Cases - Single shared connection pattern: A HubProvider mounted above the Router creates one connection for the whole app, exposed through HubContext and the useHubConnection hook with typed invoke and self-unsubscribing on. - Authentication and reconnection guidance: Documents the accessTokenFactory reading per-user tokens from storage, automatic reconnect with backoff, and the three things reconnection does not restore (room, color, board state). - Testing without a real hub: Provides createFakeHub and HubTestProvider so components that talk to the hub can be tested deterministically with setInvoke and emit. - Use Case: When adding a new hub event subscription to a chess component, follow the four rules (gate on Connected state, unsubscribe in cleanup, cast payload once at the boundary, always type invoke) and cover it with the fake hub. ## Quick Start Ask the assistant to add a new SignalR hub event subscription to a React component following the conexao-signalr connection pattern.

Frequently Asked Questions about conexao-signalr

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

FAQPage Schema
How do I subscribe to SignalR hub events in a React component?

Call the on function from useHubConnection inside a useEffect gated on HubConnectionState.Connected, and return the unsubscribe function it provides as the effect cleanup. Cast the payload once inside the handler to the DTO type.

How do I test React components that use a SignalR hub connection?

Use createFakeHub and HubTestProvider from the test utilities instead of a real connection. Configure responses with setInvoke using a switch on method name that throws on unexpected calls, and trigger events synchronously with emit wrapped in act().

Why does my SignalR connection never leave the Connecting state?

The accessTokenFactory returning an empty string causes the backend to reject the negotiate request with 401. Verify the factory reads the same sessionStorage user id and localStorage token keys used by the REST interceptor.

Why does my SignalR connection keep reconnecting in a loop?

Passing an inline factory function to HubProvider creates a new reference each render, and the provider effect depending on [url, factory] tears down and recreates the connection. Memoize the factory or pass a stable module-level function.

Does SignalR automatic reconnection restore game state?

No. Reconnection creates a new ConnectionId, so room membership, assigned color, and board state are lost. You must invoke JoinRoom again and fetch the board via GetBoardSnapshot to recover.