brackt/plans/completed/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