Websocket Development

🔌 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)

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)

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

🔒 Security

// 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