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 specificsapi-design- API patternstesting- Test real-time
Didn't find tool you were looking for?