---
name: Websocket Handler
description: Implements WebSocket handlers with rooms, authentication, and reconnection logic
---

# Websocket Handler

Implements WebSocket handlers with rooms, authentication, and reconnection logic

---
name: websocket-handler
description: Implements WebSocket handlers with rooms, authentication, and reconnection logic
argument-hint: <feature-description>
user-invocable: true
allowed-tools: Read Glob Edit
effort: medium
---

## WebSocket Implementation

Feature: **$ARGUMENTS**

1. Detect WebSocket library:
```bash
cat package.json | grep -E '"socket.io"|"ws"|"@fastify/websocket"|"hono.*ws"|"partykit"'
```

2. Generate server-side handler:
```ts
// Socket.io example
io.on('connection', (socket) => {
  // Auth check
  const userId = socket.handshake.auth.token
  if (!isValidToken(userId)) {
    socket.disconnect()
    return
  }

  // Room management
  socket.join(`user:${userId}`)

  socket.on('message', async (data) => {
    // Validate input
    // Handle event
    // Broadcast to relevant room
    io.to(`room:${data.roomId}`).emit('message', response)
  })

  socket.on('disconnect', () => {
    // Cleanup
  })
})
```

3. Generate client-side hook with:
   - Automatic reconnection with exponential backoff
   - Connection state management
   - Cleanup on unmount
   - TypeScript event typing

4. Add error handling for:
   - Auth failures
   - Network drops
   - Server restarts

5. Include a message type registry to keep events typed end-to-end.
36:["$","div",null,{"className":"flex flex-wrap items-center gap-3 mb-8","children":[["$","$L39",null,{"skillId":"4d80f84c-fd71-4a78-8989-27350dc95c61","content":"$3a"}],["$","a",null,{"href":"/api/skills/berkcangumusisik-websocket-handler/download","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"fill":"currentColor","viewBox":"0 0 256 256","transform":"$undefined","children":[false,"$undefined",["$","path",null,{"d":"M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"}]]}],"Download Zip"]}],["$","$L3b",null,{"skillId":"4d80f84c-fd71-4a78-8989-27350dc95c61","skillSlug":"berkcangumusisik-websocket-handler","initialVoted":false}]]}]
3d:T4f5,---
name: websocket-handler
description: Implements WebSocket handlers with rooms, authentication, and reconnection logic
argument-hint: <feature-description>
user-invocable: true
allowed-tools: Read Glob Edit
effort: medium
---

## WebSocket Implementation

Feature: **$ARGUMENTS**

1. Detect WebSocket library:
```bash
cat package.json | grep -E '"socket.io"|"ws"|"@fastify/websocket"|"hono.*ws"|"partykit"'
```

2. Generate server-side handler:
```ts
// Socket.io example
io.on('connection', (socket) => {
  // Auth check
  const userId = socket.handshake.auth.token
  if (!isValidToken(userId)) {
    socket.disconnect()
    return
  }

  // Room management
  socket.join(`user:${userId}`)

  socket.on('message', async (data) => {
    // Validate input
    // Handle event
    // Broadcast to relevant room
    io.to(`room:${data.roomId}`).emit('message', response)
  })

  socket.on('disconnect', () => {
    // Cleanup
  })
})
```

3. Generate client-side hook with:
   - Automatic reconnection with exponential backoff
   - Connection state management
   - Cleanup on unmount
   - TypeScript event typing

4. Add error handling for:
   - Auth failures
   - Network drops
   - Server restarts

5. Include a message type registry to keep events typed end-to-end.
3f:[]


---

**Source**: https://github.com/berkcangumusisik/claude-code-practices
**Author**: berkcangumusisik
**Discovered via**: skillsdirectory.com
**Genre**: data-ai