본문으로 건너뛰기
cccskills
무료GitHub에 공개

websocket-engineer

Build real-time messaging with WebSocket or Socket.IO, including authentication, chat rooms, online status, and reconnection. Provides server and client code, plus guidance on using Redis to share messages across multiple servers and monitor connections.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Use when building real-time communication systems with WebSockets or Socket.IO. Invoke for bidirectional messaging, horizontal scaling with Redis, presence tracking, room management.

연동 도구Redis
설치 방법 보기

이럴 때 유용합니다

  • Building chat and live-update features
  • Managing rooms and online user status
  • Handling reconnection and queued messages
  • Scaling across servers with Redis

포함된 파일(6)

  • SKILL.md6.4 KB
  • references/alternatives.md8.3 KB
  • references/patterns.md9.4 KB
  • references/protocol.md4.8 KB
  • references/scaling.md7.3 KB
  • references/security.md10.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

WebSocket Engineer

Core Workflow

  1. Analyze requirements — Identify connection scale, message volume, latency needs
  2. Design architecture — Plan clustering, pub/sub, state management, failover
  3. Implement — Build WebSocket server with authentication, rooms, events
  4. Validate locally — Test connection handling, auth, and room behavior before scaling (e.g., npx wscat -c ws://localhost:3000); confirm auth rejection on missing/invalid tokens, room join/leave events, and message delivery
  5. Scale — Verify Redis connection and pub/sub round-trip before enabling the adapter; configure sticky sessions and confirm with test connections across multiple instances; set up load balancing
  6. Monitor — Track connections, latency, throughput, error rates; add alerts for connection-count spikes and error-rate thresholds

Reference Guide

Load detailed guidance based on context:

TopicReferenceLoad When
Protocolreferences/protocol.mdWebSocket handshake, frames, ping/pong, close codes
Scalingreferences/scaling.mdHorizontal scaling, Redis pub/sub, sticky sessions
Patternsreferences/patterns.mdRooms, namespaces, broadcasting, acknowledgments
Securityreferences/security.mdAuthentication, authorization, rate limiting, CORS
Alternativesreferences/alternatives.mdSSE, long polling, when to choose WebSockets

Code Examples

Server Setup (Socket.IO with Auth and Room Management)

import { createServer } from "http";
import { Server } from "socket.io";
import { createAdapter } from "@socket.io/redis-adapter";
import { createClient } from "redis";
import jwt from "jsonwebtoken";

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: { origin: process.env.ALLOWED_ORIGIN, credentials: true },
  pingTimeout: 20000,
  pingInterval: 25000,
});

// Authentication middleware — runs before connection is established
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (!token) return next(new Error("Authentication required"));
  try {
    socket.data.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    next(new Error("Invalid token"));
  }
});

// Redis adapter for horizontal scaling
const pubClient = createClient({ url: process.env.REDIS_URL });
const subClient = pubClient.duplicate();
await Promise.all([pubClient.connect(), subClient.connect()]);
io.adapter(createAdapter(pubClient, subClient));

io.on("connection", (socket) => {
  const { userId } = socket.data.user;
  console.log(`connected: ${userId} (${socket.id})`);

  // Presence: mark user online
  pubClient.hSet("presence", userId, socket.id);

  socket.on("join-room", (roomId) => {
    socket.join(roomId);
    socket.to(roomId).emit("user-joined", { userId });
  });

  socket.on("message", ({ roomId, text }) => {
    io.to(roomId).emit("message", { userId, text, ts: Date.now() });
  });

  socket.on("disconnect", () => {
    pubClient.hDel("presence", userId);
    console.log(`disconnected: ${userId}`);
  });
});

httpServer.listen(3000);

Client-Side Reconnection with Exponential Backoff

import { io } from "socket.io-client";

const socket = io("wss://api.example.com", {
  auth: { token: getAuthToken() },
  reconnection: true,
  reconnectionAttempts: 10,
  reconnectionDelay: 1000,       // initial delay (ms)
  reconnectionDelayMax: 30000,   // cap at 30 s
  randomizationFactor: 0.5,      // jitter to avoid thundering herd
});

// Queue messages while disconnected
let messageQueue = [];

socket.on("connect", () => {
  console.log("connected:", socket.id);
  // Flush queued messages
  messageQueue.forEach((msg) => socket.emit("message", msg));
  messageQueue = [];
});

socket.on("disconnect", (reason) => {
  console.warn("disconnected:", reason);
  if (reason === "io server disconnect") socket.connect(); // manual reconnect
});

socket.on("connect_error", (err) => {
  console.error("connection error:", err.message);
});

function sendMessage(roomId, text) {
  const msg = { roomId, text };
  if (socket.connected) {
    socket.emit("message", msg);
  } else {
    messageQueue.push(msg); // buffer until reconnected
  }
}

Constraints

MUST DO

  • Use sticky sessions for load balancing (WebSocket connections are stateful — requests must route to the same server instance)
  • Implement heartbeat/ping-pong to detect dead connections (TCP keepalive alone is insufficient)
  • Use rooms/namespaces for message scoping rather than filtering in application logic
  • Queue messages during disconnection windows to avoid silent data loss
  • Plan connection limits per instance before scaling horizontally

MUST NOT DO

  • Store large state in memory without a clustering strategy (use Redis or an external store)
  • Mix WebSocket and HTTP on the same port without explicit upgrade handling
  • Forget to handle connection cleanup (presence records, room membership, in-flight timers)
  • Skip load testing before production — connection-count spikes behave differently from HTTP traffic spikes

Output Templates

When implementing WebSocket features, provide:

  1. Server setup (Socket.IO/ws configuration)
  2. Event handlers (connection, message, disconnect)
  3. Client library (connection, events, reconnection)
  4. Brief explanation of scaling strategy

Knowledge Reference

Socket.IO, ws, uWebSockets.js, Redis adapter, sticky sessions, nginx WebSocket proxy, JWT over WebSocket, rooms/namespaces, acknowledgments, binary data, compression, heartbeat, backpressure, horizontal pod autoscaling

Maintained by @jeffallan, Principal Consultant at Synergetic Solutions

Documentation

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Build Angular 17+ applications with standalone components, routing, and shared application state. Covers reactive data handling with RxJS, performance improvements, and unit and integration tests, with code and explanations of architecture choices.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building Angular screens with standalone components
  • Managing shared application state with NgRx
  • Configuring lazy-loaded routes and access guards
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Design REST or GraphQL APIs by defining data relationships, requests, responses, and authentication. Produce OpenAPI specifications, machine-readable API descriptions, with consistent errors, pagination, and versioning plans, then validate contracts using a mock server.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing a new API from business requirements
  • Creating and validating OpenAPI specifications
  • Standardizing errors and paginated responses
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Design or review a system’s overall structure, compare technology choices, and plan for growth and failures. Produce architecture diagrams and Architecture Decision Records, documents that explain key choices, alternatives, and their consequences.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Designing the overall structure of a new system
  • Comparing monolith and microservices architectures
  • Recording technology decisions and alternatives
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Connect AI agents to Jira and Confluence through MCP, a protocol for accessing external tools. This skill guides issue searches and updates, page management, sprint workflows, authentication setup, and troubleshooting of Atlassian integrations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Find Jira issues by assignee or status
  • Search and update Confluence pages
  • Turn meeting notes into Jira ticket updates
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Design controlled failure experiments for distributed systems to examine how services recover. Produce failure injection scripts, monitoring plans, rollback procedures, and exercise guides, then turn findings into documented improvements.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Planning controlled failure experiments
  • Testing recovery after Kubernetes Pod failures
  • Checking service behavior under network delays
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Design and implement command-line tools with subcommands, options, interactive prompts, and progress indicators. Get command structures, configuration handling, clear error messages, and shell completion scripts, with guidance for automated use and testing across operating systems.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Build a command-line tool with subcommands and options
  • Add interactive prompts and progress indicators
  • Provide bash, zsh, and fish command completion
Jeffallan/claude-skills1.2만2026년 10월 17일 업데이트

Jeffallan의 스킬 모두 보기

이 스킬의 문제 신고