typescript-websocket

Name: typescript-websocket
Availability: InStock
Author: anicdh

Guide WebSocket and SSE integration in TypeScript with NestJS and React.

1|Updated Mar 30, 2026

Search Tags:#typescript #react #realtime #sse #websocket #nestjs #socket.io

Ready to run

npx skills add https://github.com/anicdh/agstack --skill typescript-websocket

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typescript-websocket
Source: https://github.com/anicdh/agstack/tree/main/.claude/skills/typescript/typescript-websocket
Command: npx skills add https://github.com/anicdh/agstack --skill typescript-websocket

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline real-time communication integration in TypeScript by providing a unified guide for WebSocket servers (NestJS Gateway/Socket.io), WebSocket clients (React), and SSE, including authentication, reconnection, and subscription patterns for production readiness.

Core Features & Use Cases

NestJS WebSocket Gateway: Socket.io integration with per-connection authentication and room-based messaging.
React WebSocket Client Hook: Robust connection lifecycle management, message handling, and optional subscriptions.
Server-Sent Events (SSE): Unidirectional server-to-client streams for notifications and progress updates.
Reliability Patterns: Heartbeat, exponential backoff reconnect, and subscription restoration across disconnects for a seamless experience.

Quick Start

Install the required dependencies, start a NestJS gateway and a React client, then open the app to observe real-time messaging.

Frequently Asked Questions about typescript-websocket

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

FAQPage Schema

How do I implement WebSocket authentication and reconnection in a NestJS and React app?▼

WebSocket authentication and reconnection in a NestJS and React app are handled via per-connection auth on the NestJS gateway and exponential backoff reconnect logic on the React client. This ensures robust real-time messaging and restores subscriptions across disconnects.

What is the best way to manage real-time subscription state across WebSocket disconnects in React?▼

Managing real-time subscription state across WebSocket disconnects in React requires a client hook that handles the connection lifecycle and restores subscriptions. Heartbeat mechanisms and exponential backoff reconnect logic ensure a seamless experience after network interruptions.

When should I use Server-Sent Events (SSE) instead of WebSockets for real-time TypeScript features?▼

Server-Sent Events (SSE) should be used instead of WebSockets when you need unidirectional server-to-client streams for notifications or progress updates. SSE is ideal for these one-way pushes, while WebSockets handle bidirectional real-time communication.

Does this real-time TypeScript guide support Socket.io room-based messaging with NestJS?▼

Yes, the real-time TypeScript guide supports Socket.io room-based messaging with NestJS. The NestJS WebSocket gateway integrates Socket.io to provide per-connection authentication and targeted room-based messaging for production readiness.

How to handle message validation and heartbeat in a TypeScript WebSocket gateway?▼

Handling message validation and heartbeat in a TypeScript WebSocket gateway involves applying proper error handling and heartbeat mechanisms within the NestJS integration. These reliability patterns ensure stable connections and validate incoming real-time messages.

Can I use this Skill to set up both a NestJS WebSocket server and a React WebSocket client?▼

Yes, you can use this Skill to set up both a NestJS WebSocket server and a React WebSocket client. It provides a unified guide for Socket.io gateways on the backend and robust connection lifecycle hooks on the frontend for complete real-time integration.