[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FH28SWBCSZC52DGA4VV0XB":3,"skill-same:01M6FH28SWBCSZC52DGA4VV0XB":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6FH28SWBCSZC52DGA4VV0XB","websocket-implementation",null,"Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fwebsocket-implementation\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"implementation","websocket implementation","websocket","Tools","notifications","real-time","dashboards","management","use","communication","chat","time","scaling","live","systems","with","connection","messaging","2026-11-10 10:12:30",false,"---\nname: websocket-implementation\ndescription: Implements real-time WebSocket communication with connection management, room-based messaging, and horizontal scaling. Use when building chat systems, live notifications, collaborative tools, or real-time dashboards.\nlicense: MIT\n---\n\n# WebSocket Implementation\n\nBuild scalable real-time communication systems with proper connection management.\n\n## Server Implementation (Socket.IO)\n\n```javascript\nconst { Server } = require('socket.io');\nconst { createAdapter } = require('@socket.io\u002Fredis-adapter');\nconst { createClient } = require('redis');\n\nconst io = new Server(server, {\n  cors: { origin: process.env.CLIENT_URL, credentials: true }\n});\n\n\u002F\u002F Redis adapter for horizontal scaling\nconst pubClient = createClient({ url: process.env.REDIS_URL });\nconst subClient = pubClient.duplicate();\nPromise.all([pubClient.connect(), subClient.connect()]).then(() => {\n  io.adapter(createAdapter(pubClient, subClient));\n});\n\n\u002F\u002F Connection management\nconst users = new Map();\n\nio.use((socket, next) => {\n  const token = socket.handshake.auth.token;\n  try {\n    socket.user = verifyToken(token);\n    next();\n  } catch (err) {\n    next(new Error('Authentication failed'));\n  }\n});\n\nio.on('connection', (socket) => {\n  users.set(socket.user.id, socket.id);\n  console.log(`User ${socket.user.id} connected`);\n\n  socket.on('join-room', (roomId) => {\n    socket.join(roomId);\n    socket.to(roomId).emit('user-joined', socket.user);\n  });\n\n  socket.on('message', ({ roomId, content }) => {\n    io.to(roomId).emit('message', {\n      userId: socket.user.id,\n      content,\n      timestamp: Date.now()\n    });\n  });\n\n  socket.on('disconnect', () => {\n    users.delete(socket.user.id);\n  });\n});\n\n\u002F\u002F Utility methods for message distribution\nfunction broadcastUserUpdate(userId, data) {\n  io.to(`user:${userId}`).emit('user-update', data);\n}\n\nfunction notifyRoom(roomId, event, data) {\n  io.to(`room:${roomId}`).emit(event, data);\n}\n\nfunction sendDirectMessage(userId, message) {\n  const socketId = users.get(userId);\n  if (socketId) {\n    io.to(socketId).emit('direct-message', message);\n  }\n}\n```\n\n## Client Implementation\n\n```javascript\nimport { io } from 'socket.io-client';\n\nclass WebSocketClient {\n  constructor(url, token) {\n    this.socket = io(url, {\n      auth: { token },\n      reconnection: true,\n      reconnectionDelay: 1000,\n      reconnectionAttempts: 5\n    });\n\n    this.messageQueue = [];\n    this.setupListeners();\n  }\n\n  setupListeners() {\n    this.socket.on('connect', () => {\n      console.log('Connected');\n      this.flushQueue();\n    });\n\n    this.socket.on('disconnect', (reason) => {\n      console.log('Disconnected:', reason);\n    });\n\n    this.socket.on('message', (msg) => {\n      this.onMessage?.(msg);\n    });\n  }\n\n  joinRoom(roomId) {\n    this.socket.emit('join-room', roomId);\n  }\n\n  send(roomId, content) {\n    if (this.socket.connected) {\n      this.socket.emit('message', { roomId, content });\n    } else {\n      this.messageQueue.push({ roomId, content });\n    }\n  }\n\n  flushQueue() {\n    while (this.messageQueue.length > 0) {\n      const msg = this.messageQueue.shift();\n      this.socket.emit('message', msg);\n    }\n  }\n}\n```\n\n## React Hook\n\n```javascript\nfunction useWebSocket(url) {\n  const [socket, setSocket] = useState(null);\n  const [connected, setConnected] = useState(false);\n  const [messages, setMessages] = useState([]);\n\n  useEffect(() => {\n    \u002F\u002F getToken() is a user-supplied helper that returns the current auth token\n    \u002F\u002F Example implementations:\n    \u002F\u002F - From localStorage: () => localStorage.getItem('authToken')\n    \u002F\u002F - From context: () => authContext.token\n    \u002F\u002F - From cookie: () => document.cookie.split('token=')[1]\n    const ws = io(url, { auth: { token: getToken() } });\n\n    ws.on('connect', () => setConnected(true));\n    ws.on('disconnect', () => setConnected(false));\n    ws.on('message', (msg) => {\n      setMessages(prev => [...prev, msg]);\n    });\n\n    setSocket(ws);\n    return () => ws.disconnect();\n  }, [url]);\n\n  const send = useCallback((roomId, content) => {\n    socket?.emit('message', { roomId, content });\n  }, [socket]);\n\n  return { connected, messages, send };\n}\n```\n\n## Message Protocol\n\n```typescript\ninterface Message {\n  type: 'message' | 'typing' | 'presence';\n  roomId: string;\n  userId: string;\n  content?: string;\n  timestamp: number;\n}\n\n\u002F\u002F Acknowledge delivery\nsocket.emit('message', data, (ack) => {\n  if (ack.success) console.log('Delivered');\n});\n```\n\n## Additional Implementations\n\nSee [references\u002Fpython-websocket.md](references\u002Fpython-websocket.md) for:\n- Python aiohttp WebSocket server\n- FastAPI WebSocket endpoints\n- Async connection handling\n\n## Scaling Considerations\n\n| Connections | Architecture |\n|-------------|--------------|\n| \u003C10K | Single server |\n| 10K-100K | Redis pub\u002Fsub |\n| >100K | Sharded Redis + load balancer |\n\n## Monitoring Endpoints\n\n```javascript\n\u002F\u002F Express endpoints for operational visibility\napp.get('\u002Fapi\u002Fws\u002Fstats', (req, res) => {\n  res.json({\n    activeConnections: io.sockets.sockets.size,\n    rooms: [...io.sockets.adapter.rooms.keys()],\n    users: users.size\n  });\n});\n\napp.get('\u002Fapi\u002Fws\u002Fhealth', (req, res) => {\n  res.json({\n    status: 'healthy',\n    uptime: process.uptime(),\n    memoryUsage: process.memoryUsage()\n  });\n});\n```\n\n## Best Practices\n\n- Authenticate before allowing operations\n- Implement reconnection with exponential backoff\n- Use rooms and channels for targeted broadcasting\n- Add heartbeat\u002Fping for connection health\n- Persist important messages to database\n- Monitor active connection counts\n- Display user presence\u002Favailability status\n- Implement rate limiting on incoming messages\n- Use acknowledgments to confirm message delivery\n- Leverage Redis for distributed deployments\n- Implement comprehensive error handling\n\n## Never Do\n\n- Send sensitive data unencrypted\n- Store unlimited messages in memory\n- Skip authorization on room joins\n- Ignore connection error handling\n- Allow unbounded room subscriptions\n- Neglect cleanup of disconnected user data\n- Send frequent oversized message payloads\n- Include authentication credentials in message bodies\n- Deploy without security validation\n- Allow uncontrolled connection accumulation\n- Build without scalability consideration\n","# WebSocket Implementation\n\nBuild scalable real-time communication systems with proper connection management.\n\n## Server Implementation (Socket.IO)\n\n```javascript\nconst { Server } = require('socket.io');\nconst { createAdapter } = require('@socket.io\u002Fredis-adapter');\nconst { createClient } = require('redis');\n\nconst io = new Server(server, {\n  cors: { origin: process.env.CLIENT_URL, credentials: true }\n});\n\n\u002F\u002F Redis adapter for horizontal scaling\nconst pubClient = createClient({ url: process.env.REDIS_URL });\nconst subClient = pubClient.duplicate();\nPromise.all([pubClient.connect(), subClient.connect()]).then(() => {\n  io.adapter(createAdapter(pubClient, subClient));\n});\n\n\u002F\u002F Connection management\nconst users = new Map();\n\nio.use((socket, next) => {\n  const token = socket.handshake.auth.token;\n  try {\n    socket.user = verifyToken(token);\n    next();\n  } catch (err) {\n    next(new Error('Authentication failed'));\n  }\n});\n\nio.on('connection', (socket) => {\n  users.set(socket.user.id, socket.id);\n  console.log(`User ${socket.user.id} connected`);\n\n  socket.on('join-room', (roomId) => {\n    socket.join(roomId);\n    socket.to(roomId).emit('user-joined', socket.user);\n  });\n\n  socket.on('message', ({ roomId, content }) => {\n    io.to(roomId).emit('message', {\n      userId: socket.user.id,\n      content,\n      timestamp: Date.now()\n    });\n  });\n\n  socket.on('disconnect', () => {\n    users.delete(socket.user.id);\n  });\n});\n\n\u002F\u002F Utility methods for message distribution\nfunction broadcastUserUpdate(userId, data) {\n  io.to(`user:${userId}`).emit('user-update', data);\n}\n\nfunction notifyRoom(roomId, event, data) {\n  io.to(`room:${roomId}`).emit(event, data);\n}\n\nfunction sendDirectMessage(userId, message) {\n  const socketId = users.get(userId);\n  if (socketId) {\n    io.to(socketId).emit('direct-message', message);\n  }\n}\n```\n\n## Client Implementation\n\n```javascript\nimport { io } from 'socket.io-client';\n\nclass WebSocketClient {\n  constructor(url, token) {\n    this.socket = io(url, {\n      auth: { token },\n      reconnection: true,\n      reconnectionDelay: 1000,\n      reconnectionAttempts: 5\n    });\n\n    this.messageQueue = [];\n    this.setupListeners();\n  }\n\n  setupListeners() {\n    this.socket.on('connect', () => {\n      console.log('Connected');\n      this.flushQueue();\n    });\n\n    this.socket.on('disconnect', (reason) => {\n      console.log('Disconnected:', reason);\n    });\n\n    this.socket.on('message', (msg) => {\n      this.onMessage?.(msg);\n    });\n  }\n\n  joinRoom(roomId) {\n    this.socket.emit('join-room', roomId);\n  }\n\n  send(roomId, content) {\n    if (this.socket.connected) {\n      this.socket.emit('message', { roomId, content });\n    } else {\n      this.messageQueue.push({ roomId, content });\n    }\n  }\n\n  flushQueue() {\n    while (this.messageQueue.length > 0) {\n      const msg = this.messageQueue.shift();\n      this.socket.emit('message', msg);\n    }\n  }\n}\n```\n\n## React Hook\n\n```javascript\nfunction useWebSocket(url) {\n  const [socket, setSocket] = useState(null);\n  const [connected, setConnected] = useState(false);\n  const [messages, setMessages] = useState([]);\n\n  useEffect(() => {\n    \u002F\u002F getToken() is a user-supplied helper that returns the current auth token\n    \u002F\u002F Example implementations:\n    \u002F\u002F - From localStorage: () => localStorage.getItem('authToken')\n    \u002F\u002F - From context: () => authContext.token\n    \u002F\u002F - From cookie: () => document.cookie.split('token=')[1]\n    const ws = io(url, { auth: { token: getToken() } });\n\n    ws.on('connect', () => setConnected(true));\n    ws.on('disconnect', () => setConnected(false));\n    ws.on('message', (msg) => {\n      setMessages(prev => [...prev, msg]);\n    });\n\n    setSocket(ws);\n    return () => ws.disconnect();\n  }, [url]);\n\n  const send = useCallback((roomId, content) => {\n    socket?.emit('message', { roomId, content });\n  }, [socket]);\n\n  return { connected, messages, send };\n}\n```\n\n## Message Protocol\n\n```typescript\ninterface Message {\n  type: 'message' | 'typing' | 'presence';\n  roomId: string;\n  userId: string;\n  content?: string;\n  timestamp: number;\n}\n\n\u002F\u002F Acknowledge delivery\nsocket.emit('message', data, (ack) => {\n  if (ack.success) console.log('Delivered');\n});\n```\n\n## Additional Implementations\n\nSee [references\u002Fpython-websocket.md](references\u002Fpython-websocket.md) for:\n- Python aiohttp WebSocket server\n- FastAPI WebSocket endpoints\n- Async connection handling\n\n## Scaling Considerations\n\n| Connections | Architecture |\n|-------------|--------------|\n| \u003C10K | Single server |\n| 10K-100K | Redis pub\u002Fsub |\n| >100K | Sharded Redis + load balancer |\n\n## Monitoring Endpoints\n\n```javascript\n\u002F\u002F Express endpoints for operational visibility\napp.get('\u002Fapi\u002Fws\u002Fstats', (req, res) => {\n  res.json({\n    activeConnections: io.sockets.sockets.size,\n    rooms: [...io.sockets.adapter.rooms.keys()],\n    users: users.size\n  });\n});\n\napp.get('\u002Fapi\u002Fws\u002Fhealth', (req, res) => {\n  res.json({\n    status: 'healthy',\n    uptime: process.uptime(),\n    memoryUsage: process.memoryUsage()\n  });\n});\n```\n\n## Best Practices\n\n- Authenticate before allowing operations\n- Implement reconnection with exponential backoff\n- Use rooms and channels for targeted broadcasting\n- Add heartbeat\u002Fping for connection health\n- Persist important messages to database\n- Monitor active connection counts\n- Display user presence\u002Favailability status\n- Implement rate limiting on incoming messages\n- Use acknowledgments to confirm message delivery\n- Leverage Redis for distributed deployments\n- Implement comprehensive error handling\n\n## Never Do\n\n- Send sensitive data unencrypted\n- Store unlimited messages in memory\n- Skip authorization on room joins\n- Ignore connection error handling\n- Allow unbounded room subscriptions\n- Neglect cleanup of disconnected user data\n- Send frequent oversized message payloads\n- Include authentication credentials in message bodies\n- Deploy without security validation\n- Allow uncontrolled connection accumulation\n- Build without scalability consideration\n",{"name":5,"license":15,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fsecondsky\u002Fclaude-skills\u002Fwebsocket-implementation",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill websocket-implementation",{"tool":57,"command":58},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill websocket-implementation",{"tool":60,"command":61},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill websocket-implementation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fwebsocket-implementation\u002FSKILL.md",true,[65],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"references\u002Fpython-websocket.md","REFERENCE","参考文档",12097,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fwebsocket-implementation\u002Freferences\u002Fpython-websocket.md",[72,86,96,105,111,118],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":82,"publishedAt":37},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[83,84,85],"model","model hierarchy","model hierarchy skill",{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":92,"publishedAt":37},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[91],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},[93,94,95],"MCP","zoom","zoom mcp",{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":37},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[102,103,104,94],"sdk","zoom apps sdk","apps",{"skillNo":106,"name":107,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":37},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[107],{"skillNo":112,"name":113,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":37},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[116],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},[113],{"skillNo":119,"name":120,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":37},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[120]]