brackt/plans/phase-4-socket-test-instructions.md

# Phase 4: Socket.IO Two-Way Communication Test

## What's Been Implemented:

### Server-Side (`server/socket.js`):
- ✅ Listens for `test-event` from clients
- ✅ Logs received message to console with 📨 emoji
- ✅ Echoes back with `test-message` event containing:
  - Original client message
  - Server response: "Hello from server!"
  - Server timestamp
  - Socket ID
- ✅ Logs sent response with ✅ emoji

### Client-Side (`app/routes/test-socket.tsx`):
- ✅ Connects to Socket.IO server
- ✅ Shows connection status (green dot = connected)
- ✅ Displays Socket ID
- ✅ "Send Test Message" button emits `test-event`
- ✅ Listens for `test-message` responses
- ✅ Displays all messages in a log

## How to Test:

### Step 1: Navigate to Test Page
```
http://localhost:3000/test-socket
```

### Step 2: Verify Connection
You should see:
- ✅ Green dot with "Status: Connected"
- ✅ Socket ID displayed (e.g., "Socket ID: abc123")

**Server Console Should Show:**
```
Client connected: abc123
Socket abc123 joined draft-test-season-123
```

### Step 3: Test Two-Way Communication

**Click the "Send Test Message" button**

**What Happens:**

1. **Client → Server:**
   - Client emits `test-event` with message and timestamp
   - Message appears in the Messages log: "Sent: Hello from client!"

2. **Server Logs:**
   ```
   📨 Received test-event from client: abc123 { message: 'Hello from client!', timestamp: '...' }
   ✅ Sent test-message response to client: abc123
   ```

3. **Server → Client:**
   - Server emits `test-message` back to client
   - Client receives and displays the response in Messages log

4. **Browser Should Show:**
   ```
   Sent: Hello from client!
   {"originalMessage":{"message":"Hello from client!","timestamp":"..."},"serverResponse":"Hello from server!","serverTimestamp":"...","socketId":"abc123"}
   ```

### Step 4: Verify Multiple Messages
- Click "Send Test Message" multiple times
- Each click should:
  - Add a new message to the log
  - Show server response in console
  - Display echo response in browser

## Success Criteria:

✅ Connection established (green dot)
✅ Socket ID displayed
✅ Server logs show "Client connected"
✅ Server logs show "joined draft-test-season-123"
✅ Clicking button logs 📨 on server
✅ Server logs ✅ after sending response
✅ Browser displays both sent and received messages
✅ Server response includes original message + server timestamp

## What This Proves:

1. ✅ **Client can connect to server** - WebSocket connection established
2. ✅ **Client → Server** - Client can send events to server
3. ✅ **Server receives events** - Server processes client messages
4. ✅ **Server → Client** - Server can send events to specific clients
5. ✅ **Client receives events** - Client processes server messages
6. ✅ **Full round-trip** - Complete two-way communication working

## Next Steps:

Once this test passes, you're ready to:
1. Implement draft room UI
2. Add real-time pick broadcasting
3. Implement timer updates
4. Add queue management
5. Deploy to production with confidence!

## Troubleshooting:

**If connection fails:**
- Check server console for "Socket.IO initialized"
- Check browser console for connection errors
- Verify port 3000 is not blocked

**If messages don't appear:**
- Check browser console for errors
- Verify server logs show 📨 emoji
- Check that `test-event` and `test-message` event names match

**If server doesn't respond:**
- Restart dev server
- Check server/socket.js has test-event handler
- Verify no JavaScript errors in server console