brackt/plans/phase-3-verification.md

# Phase 3: Socket.IO Implementation - Verification

## ✅ Implementation Complete!

### Files Created:
1. ✅ `server/socket.js` - Socket.IO initialization and event handlers
2. ✅ `server/socket.d.ts` - TypeScript definitions for socket.js
3. ✅ `server/types.d.ts` - Global type augmentation for __socketIO

### Files Modified:
1. ✅ `server.js` - Added HTTP server creation and Socket.IO initialization
2. ✅ `tsconfig.node.json` - Added server directory to includes

### Test Results:

#### ✅ Dev Server Test
```bash
npm run dev
```
**Result:** 
- ✅ Server starts successfully
- ✅ "Socket.IO initialized" appears in console
- ✅ No errors or warnings
- ✅ Server running on http://localhost:3000

#### ✅ Production Build Test
```bash
npm run build
```
**Result:**
- ✅ Build completes successfully
- ✅ Socket.IO code NOT bundled into build/server/index.js (correct!)
- ✅ No build errors related to Socket.IO

### Architecture Verification:

```
server.js (entry point)
  ↓ imports
server/socket.js (Socket.IO - NOT bundled)
  ↓ provides
getSocketIO() function
  ↓ accessible from
React Router routes (via import or context)
```

**Key Achievement:** Socket.IO is completely separate from React Router's build process!

## Next Steps for Testing Socket.IO:

### 1. Test Socket Connection from Browser

Create a test page to verify Socket.IO connection:

```typescript
// In any route component
import { useEffect, useState } from "react";
import { io } from "socket.io-client";

export default function SocketTest() {
  const [connected, setConnected] = useState(false);
  const [socketId, setSocketId] = useState("");

  useEffect(() => {
    const socket = io();
    
    socket.on("connect", () => {
      console.log("Connected to Socket.IO!");
      setConnected(true);
      setSocketId(socket.id);
    });

    socket.on("disconnect", () => {
      console.log("Disconnected from Socket.IO");
      setConnected(false);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  return (
    <div>
      <h1>Socket.IO Test</h1>
      <p>Status: {connected ? "✅ Connected" : "❌ Disconnected"}</p>
      {connected && <p>Socket ID: {socketId}</p>}
    </div>
  );
}
```

### 2. Test Broadcasting from API Route

Create a test API route:

```typescript
// app/routes/api.test-socket.ts
import { json } from "react-router";
import type { ActionFunctionArgs } from "react-router";
import { getSocketIO } from "../../server/socket.js";

export async function action({ request }: ActionFunctionArgs) {
  const io = getSocketIO();
  
  // Broadcast to all connected clients
  io.emit("test-message", {
    message: "Hello from API route!",
    timestamp: new Date().toISOString(),
  });
  
  return json({ success: true });
}
```

### 3. Test Draft Room Functionality

Test joining a draft room:

```typescript
// In draft room component
useEffect(() => {
  const socket = io();
  
  socket.on("connect", () => {
    // Join draft room
    socket.emit("join-draft", seasonId);
  });

  socket.on("disconnect", () => {
    socket.emit("leave-draft", seasonId);
  });

  // Listen for pick updates
  socket.on("pick-made", (data) => {
    console.log("Pick made:", data);
    // Update UI
  });

  return () => {
    socket.emit("leave-draft", seasonId);
    socket.disconnect();
  };
}, [seasonId]);
```

## Troubleshooting

### If Socket.IO doesn't connect:

1. **Check server logs:** Should see "Socket.IO initialized"
2. **Check browser console:** Should see "Connected to Socket.IO"
3. **Check network tab:** Look for WebSocket upgrade or polling requests
4. **Verify port:** Make sure server is running on expected port

### If you see "Socket.IO not initialized" error:

- Make sure `initializeSocketIO(httpServer)` is called in server.js
- Check that it's called BEFORE `httpServer.listen()`
- Verify the import path is correct: `./server/socket.js`

### If build includes Socket.IO code:

- Verify socket.js is NOT imported by any file in `app/` directory
- Only server.js should import socket.js
- Check that socket.js is plain JavaScript, not TypeScript

## Success Criteria ✅

- [x] Dev server starts without errors
- [x] Production build completes without errors
- [x] Socket.IO code NOT in build output
- [x] "Socket.IO initialized" appears in server logs
- [x] No TypeScript errors in IDE
- [x] All files created as planned

## Phase 3 Status: ✅ COMPLETE

Socket.IO is now fully integrated and ready for Phase 4 (Draft Room UI)!