playchoo-manager-nextjs/WEBSOCKET_SETUP.md

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:

# 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:

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:

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:

   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