Agent skill

websocket-development

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/websocket-development

SKILL.md

🔌 WebSocket Development Skill


name: websocket-development description: Implement real-time communication using WebSockets and Socket.io

🎯 Purpose

พัฒนา real-time features โดยใช้ WebSockets และ Socket.io

📋 When to Use

  • Chat applications
  • Live notifications
  • Real-time updates
  • Collaborative editing
  • Gaming
  • Live dashboards

🔧 Implementation

Server (Socket.io)

typescript
import { Server } from 'socket.io';

const io = new Server(server, {
  cors: { origin: '*' }
});

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);
  
  // Join room
  socket.on('join', (room) => {
    socket.join(room);
  });
  
  // Handle message
  socket.on('message', (data) => {
    io.to(data.room).emit('message', data);
  });
  
  // Disconnect
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

Client (React)

typescript
import { io, Socket } from 'socket.io-client';
import { useEffect, useState } from 'react';

function useSocket(url: string) {
  const [socket, setSocket] = useState<Socket | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  
  useEffect(() => {
    const newSocket = io(url);
    setSocket(newSocket);
    
    newSocket.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });
    
    return () => { newSocket.disconnect(); };
  }, [url]);
  
  const sendMessage = (content: string) => {
    socket?.emit('message', { content, timestamp: Date.now() });
  };
  
  return { messages, sendMessage, connected: !!socket };
}

📊 Event Patterns

Event Direction Use Case
connect Server→Client Connection established
disconnect Server→Client Connection lost
message Bidirectional Send/receive messages
join Client→Server Join a room
leave Client→Server Leave a room
broadcast Server→All Send to all clients

🔒 Security

typescript
// Authentication middleware
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (validateToken(token)) {
    socket.data.user = decodeToken(token);
    next();
  } else {
    next(new Error('Unauthorized'));
  }
});

✅ Best Practices

  • Handle reconnection
  • Implement heartbeat
  • Secure with auth
  • Rate limiting
  • Error handling
  • Room management

🔗 Related Skills

  • socket-io - Socket.io specifics
  • api-design - API patterns
  • testing - Test real-time

Didn't find tool you were looking for?

Be as detailed as possible for better results