pitfalls-websocket
WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
Best use case
pitfalls-websocket is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "pitfalls-websocket" skill to help with this workflow task. Context: WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pitfalls-websocket/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pitfalls-websocket Compares
| Feature / Agent | pitfalls-websocket | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
WebSocket server and client patterns with heartbeat and reconnection. Use when implementing real-time features, debugging connection issues, or reviewing WebSocket code. Triggers on: WebSocket, wss, heartbeat, reconnect, real-time.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
SKILL.md Source
# WebSocket Pitfalls
Common pitfalls and correct patterns for WebSocket implementations.
## When to Use
- Implementing WebSocket server
- Building WebSocket client with reconnection
- Debugging connection drops
- Adding heartbeat/ping-pong
- Reviewing WebSocket code
## Workflow
### Step 1: Verify Server Setup
Check WebSocket server shares HTTP port.
### Step 2: Check Heartbeat
Ensure ping/pong heartbeat is implemented.
### Step 3: Verify Client Reconnection
Confirm exponential backoff reconnection logic.
---
## Server Pattern
```typescript
const wss = new WebSocketServer({ server: httpServer }); // Same port
wss.on('connection', (ws) => {
// Heartbeat
ws.isAlive = true;
ws.on('pong', () => { ws.isAlive = true; });
ws.on('message', (data) => {
try {
const msg = JSON.parse(data.toString());
// Validate message type
} catch {
ws.send(JSON.stringify({ error: 'Invalid message' }));
}
});
});
// Heartbeat interval
setInterval(() => {
wss.clients.forEach((ws) => {
if (!ws.isAlive) return ws.terminate();
ws.isAlive = false;
ws.ping();
});
}, 30000);
```
## Client Reconnection
```typescript
// Client - reconnection logic with exponential backoff
let attempt = 0;
function connect() {
const ws = new WebSocket(url);
ws.onopen = () => {
attempt = 0; // Reset on successful connection
};
ws.onclose = () => {
const delay = Math.min(1000 * Math.pow(2, attempt), 30000);
attempt++;
setTimeout(connect, delay);
};
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
}
```
## Message Handling
```typescript
// ✅ Always validate and type messages
interface WsMessage {
type: 'subscribe' | 'unsubscribe' | 'ping';
channel?: string;
}
function handleMessage(ws: WebSocket, data: string) {
try {
const msg: WsMessage = JSON.parse(data);
switch (msg.type) {
case 'subscribe':
subscribeToChannel(ws, msg.channel);
break;
case 'ping':
ws.send(JSON.stringify({ type: 'pong' }));
break;
default:
ws.send(JSON.stringify({ error: 'Unknown message type' }));
}
} catch {
ws.send(JSON.stringify({ error: 'Invalid JSON' }));
}
}
```
## Quick Checklist
- [ ] WebSocket server uses same port as HTTP
- [ ] Heartbeat ping/pong every 30 seconds
- [ ] Client has reconnection with exponential backoff
- [ ] Messages validated before processing
- [ ] Connection errors loggedRelated Skills
pitfalls-tanstack-query
TanStack Query v5 patterns and common pitfalls. Use when implementing data fetching, cache invalidation, or debugging stale data issues. Triggers on: useQuery, useMutation, queryKey, invalidate, TanStack, React Query.
pitfalls-security
Security patterns for session keys, caching, logging, and environment variables. Use when implementing authentication, caching sensitive data, or setting up logging. Triggers on: session key, private key, cache, logging, secrets, environment variable.
pitfalls-react
React component patterns, forms, accessibility, and responsive design. Use when building React components, handling forms, or ensuring accessibility. Triggers on: React component, useEffect, form validation, a11y, responsive, Error Boundary.
pitfalls-blockchain
Blockchain RPC error handling, gas estimation, multi-chain config, and transaction management. Use when interacting with smart contracts, estimating gas, or managing transactions. Triggers on: RPC, contract call, gas, multicall, nonce, transaction, revert.
common-pitfalls
Orchestrates pitfall prevention skills for common development issues. Auto-triggered during code review to check for TanStack Query, Drizzle ORM, Express API, React, WebSocket, blockchain RPC, and security pitfalls.
debugging-websocket-issues
Use when seeing WebSocket errors like "Invalid frame header", "RSV1 must be clear", or "WS_ERR_UNEXPECTED_RSV_1" - covers multiple WebSocketServer conflicts, compression issues, and raw frame debugging techniques
pitfalls-express-api
Express API conventions and storage patterns. Use when building REST APIs, defining routes, or implementing storage interfaces. Triggers on: Express, router, API route, status code, storage interface.
pitfalls-drizzle-orm
Drizzle ORM patterns and migration safety rules. Use when defining schemas, running migrations, or debugging database issues. Triggers on: Drizzle, schema, migration, db:push, $inferSelect, array column.
azure-quotas
Check/manage Azure quotas and usage across providers. For deployment planning, capacity validation, region selection. WHEN: "check quotas", "service limits", "current usage", "request quota increase", "quota exceeded", "validate capacity", "regional availability", "provisioning limits", "vCPU limit", "how many vCPUs available in my subscription".
raindrop-io
Manage Raindrop.io bookmarks with AI assistance. Save and organize bookmarks, search your collection, manage reading lists, and organize research materials. Use when working with bookmarks, web research, reading lists, or when user mentions Raindrop.io.
zlibrary-to-notebooklm
自动从 Z-Library 下载书籍并上传到 Google NotebookLM。支持 PDF/EPUB 格式，自动转换，一键创建知识库。
discover-skills
当你发现当前可用的技能都不够合适（或用户明确要求你寻找技能）时使用。本技能会基于任务目标和约束，给出一份精简的候选技能清单，帮助你选出最适配当前任务的技能。