You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.7 KiB
Markdown
81 lines
2.7 KiB
Markdown
# 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 |