35fe84a1dd
* Update claude.md to push more tests. * Archiving old plans. * fix: run DB migrations programmatically on server startup Replace unreliable drizzle-kit CLI migration with drizzle-orm's built-in migrator running in the server process before accepting connections. This ensures migrations are always applied on deploy and fails fast if they error. - Add runMigrations() to server.ts using drizzle-orm/postgres-js/migrator - Skip migrations in development (handled manually via db:migrate) - Add DATABASE_URL guard with a clear error message - Remove start:production script (now identical to start) - Update Dockerfile CMD to use npm run start Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
118 lines
3.5 KiB
Markdown
118 lines
3.5 KiB
Markdown
# 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
|