Aller au contenu

Configuration WebSocket pour Real-time

Status Actuel

❌ WebSockets temporairement désactivés - proxy non configuré ✅ Code WebSocket implémenté et prêt à être activé

Problème

  • Site en HTTPS (housing.boaz-study.tech)
  • Backend Docker en HTTP (localhost:8001)
  • Navigateur refuse ws:// depuis HTTPS (sécurité)
  • Proxy ne redirige pas /api/ws vers Docker

Configuration Requise

Option 1: Configuration Nginx/Apache (Recommandée)

Pour Nginx, ajouter dans la config du site : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# WebSocket support
location /api/ws {
    proxy_pass http://localhost:8001/api/ws;
    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;
    proxy_read_timeout 86400;
}

Pour Apache, ajouter dans la config du site : 

1
2
3
4
5
6
7
# Enable mod_proxy_wstunnel
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

# WebSocket support
ProxyPreserveHost On
ProxyPass /api/ws ws://localhost:8001/api/ws
ProxyPassReverse /api/ws ws://localhost:8001/api/ws

Option 2: Port Séparé HTTPS

Exposer le backend sur un port HTTPS séparé (ex: 8443) avec certificat SSL.

Réactivation WebSocket

Une fois le proxy configuré :

  1. Supprimer la désactivation temporaire dans frontend/src/services/websocketService.js: 

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
    connect() {
    // SUPPRIMER CES LIGNES :
    // console.log('⚠️ WebSocket temporairement désactivé - proxy non configuré');
    // return;

    if (this.socket?.readyState === WebSocket.OPEN || this.isConnecting) {
        return;
    }
    // ... reste du code
}

  2. Tester la connexion : 

    1
2
3
4
    # Test depuis la console navigateur
const ws = new WebSocket('wss://api-housing.boaz-study.tech/api/ws');
ws.onopen = () => console.log('✅ WebSocket connecté');
ws.onerror = (e) => console.log('❌ Erreur:', e);

  3. Redémarrer frontend : 

    1
    sudo docker compose restart frontend

Fonctionnalités Real-time (une fois activé)

✅ Statistiques : Mise à jour automatique quand souscriptions changent ✅ Historique : Refresh automatique sur tous les appareils ✅ Multi-device : Synchronisation instantanée ✅ Reconnexion : Automatique en cas de déconnexion

Variables d'Environnement

Frontend (.env) : 

1
REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/api/ws

Développement local : 

1
REACT_APP_WS_URL=ws://localhost:8001/api/ws

Notes Techniques

  • Backend: WebSocket server sur /api/ws (FastAPI + Starlette)
  • Frontend: Service WebSocket avec reconnexion automatique
  • Broadcasting: Notifications à tous les clients connectés
  • Types supportés: souscription, logement, statistics

Documentation générée le 30/09/2025