websockets
WebSockets real-time bidirectional communication. Use for real-time features.
Best use case
websockets is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
WebSockets real-time bidirectional communication. Use for real-time features.
Teams using websockets should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/websockets/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How websockets Compares
| Feature / Agent | websockets | 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?
WebSockets real-time bidirectional communication. Use for real-time features.
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.
SKILL.md Source
# WebSockets
WebSockets provide a persistent connection between a client and server that both parties can use to start sending data at any time.
## When to Use
- **Chat Apps**: Real-time messaging.
- **Gaming**: Multiplayer state synchronization (low latency).
- **Collaborative Editing**: Google Docs style co-authoring.
- **Financial Dashboards**: High-frequency trading updates.
## Quick Start
```javascript
// Server (Node.js with 'ws')
import { WebSocketServer } from "ws";
const wss = new WebSocketServer({ port: 8080 });
wss.on("connection", function connection(ws) {
ws.on("message", function message(data) {
console.log("received: %s", data);
// Echo back
ws.send(`Echo: ${data}`);
});
ws.send("Welcome!");
});
```
```javascript
// Client (Browser)
const socket = new WebSocket("ws://localhost:8080");
socket.addEventListener("message", (event) => {
console.log("Server says:", event.data);
});
```
## Core Concepts
### Handshake
Starts as an HTTP Request (`Upgrade: websocket`). If server accepts (`101 Switching Protocols`), the specific TCP connection becomes a WebSocket connection.
### Heartbeat (Ping/Pong)
Essential to keep connections alive through proxies/firewalls that drop idle TCP connections.
## Common Patterns
### Socket.IO
A library that adds features on top of raw WebSockets: Auto-reconnection, Rooms, Fallback to HTTP Long-Polling.
### Pub/Sub
Users subscribe to channels (e.g., `chat_room_1`). The server routes messages only to sockets in that channel (using Redis for scaling across multiple servers).
## Best Practices
**Do**:
- Handle **Scaling** early. Sticky Sessions (if using Socket.IO) or a Redis Adapter are needed for multi-server setups.
- Secure with **WSS** (WebSocket Secure) always.
- Authenticate via a Token in the Query Parameter or initial handshake message (Headers are limited in JS WebSocket API).
**Don't**:
- Don't use WebSockets for simple notifications (Use SSE/Push API).
- Don't assume the connection is infinite. Handle disconnects gracefully.
## Troubleshooting
| Error | Cause | Solution |
| :----------------------- | :------------------------------------------------ | :------------------------------------------------------------------------------ |
| `Connection Closed 1006` | Abnormal closure (often network or server crash). | Implement auto-reconnect logic with backoff. |
| `Load Balancer drops` | LB timeout. | Configure Application Load Balancer (ALB) sticky sessions and timeout increase. |
## References
- [MDN WebSockets API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
- [Socket.IO](https://socket.io/)Related Skills
template
Expert [skill-name] assistance covering [feature 1], [feature 2], and [feature 3]. Use when [working with X], [debugging Y], or [implementing Z].
zsh
Zsh shell with oh-my-zsh. Use for terminal shell.
zed
Zed high-performance collaborative editor. Use for fast editing.
xcode
Xcode Apple development IDE with simulators. Use for iOS/macOS development.
webstorm
WebStorm JavaScript IDE with debugging. Use for web development.
webpack
Webpack module bundler with loaders and plugins. Use for bundling.
warp
Warp modern terminal with AI. Use for terminal work.
vscode
Visual Studio Code editor with extensions and debugging. Use for code editing.
vite
Vite fast build tool with HMR. Use for modern frontend builds.
visual-studio
Visual Studio IDE for Windows with debugging and profiling. Use for .NET development.
vim
Vim text editor with motions, macros, and plugins. Use for terminal editing.
turbopack
Turbopack Rust-powered bundler. Use for fast builds.