# WebSocket Setup for Booking Status

## Current Implementation

The booking status feature uses WebSocket (Socket.IO) for real-time updates. However, due to CORS restrictions, the WebSocket connection cannot directly connect from the browser to the Python API.

## Production Setup Options

### Option 1: Reverse Proxy (Recommended)
Configure your web server (nginx/Apache) to proxy WebSocket connections:

```nginx
# Example nginx configuration
location /socket.io/ {
    proxy_pass http://python-api-server:5000/socket.io/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}
```

With this setup, the WebSocket connects to the same origin as your Next.js app, and the web server proxies it to the Python API.

### Option 2: Configure CORS on Python API
Add CORS support for WebSocket connections in your Flask-SocketIO setup:

```python
from flask_socketio import SocketIO

socketio = SocketIO(
    app,
    cors_allowed_origins=["https://playchoo.com", "https://www.playchoo.com"],
    async_mode='threading'
)
```

Then set the environment variable:
```bash
NEXT_PUBLIC_WEBSOCKET_URL=https://api.playchoo.com
```

### Option 3: Next.js API Route Proxy (Complex)
Create a custom Next.js API route that proxies WebSocket connections. This is complex because Next.js API routes don't natively support WebSocket upgrades.

## Development Setup

For local development, you have several options:

1. **Run Python API with CORS enabled for localhost**:
   ```python
   socketio = SocketIO(app, cors_allowed_origins=["http://localhost:3000"])
   ```
   Then set: `NEXT_PUBLIC_WEBSOCKET_URL=http://localhost:5000`

2. **Use a proxy tool** like `http-proxy-middleware` in Next.js

3. **Disable WebSocket feature** in development by not setting a booking_id

## Current Status

The WebSocket code is ready but requires infrastructure configuration to work properly. The booking feature will fall back to the traditional response model if WebSocket is not available.

## Environment Variables

- `NEXT_PUBLIC_WEBSOCKET_URL`: 
  - Leave empty to use same origin (requires reverse proxy)
  - Set to `https://api.playchoo.com` if CORS is configured on Python API
  - Set to `http://localhost:5000` for local development with CORS enabled

## Testing

To test if WebSocket is working:
1. Open browser developer tools
2. Go to Network tab and filter by WS (WebSocket)
3. Make a booking with `async=true` parameter
4. You should see a WebSocket connection to `/socket.io/`
5. Check the Messages tab to see the real-time updates