Aller au contenu

🔌 Mise à jour Configuration WebSocket Frontend

Date : 01/10/2025 Type : Configuration - Variables d'environnement Impact : Frontend React - WebSocket URL

📋 RÉSUMÉ DES MODIFICATIONS

Changement principal

Ancienne URL : wss://housing.boaz-study.tech/api/ws Nouvelle URL : wss://api-housing.boaz-study.tech/ws

Principe appliqué

✅ AUCUN HARDCODING - Utilisation exclusive des variables d'environnement

🔧 FICHIERS MODIFIÉS

1. frontend/.env (Production)

1
2
3
4
5
# AVANT
REACT_APP_WS_URL=wss://housing.boaz-study.tech/api/ws

# APRÈS
REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/ws

2. frontend/.env.example (Template développement)

1
2
3
4
5
6
7
8
9
# AVANT
REACT_APP_WS_URL=ws://localhost:8000/api/ws

# APRÈS
REACT_APP_WS_URL=ws://localhost:8001/ws

# Documentation ajoutée :
# Local dev: ws://localhost:8001/ws
# Production: wss://api-housing.boaz-study.tech/ws

3. frontend/src/services/websocketService.js

Nettoyage du code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// AVANT (avec hardcoding et fallback)
const wsUrl = process.env.REACT_APP_WS_URL || 'wss://housing.boaz-study.tech/api/ws';
//const wsUrl = 'wss://api-housing.boaz-study.tech/ws';  // ligne commentée

// APRÈS (variable d'env uniquement + validation)
const wsUrl = process.env.REACT_APP_WS_URL;

if (!wsUrl) {
  console.error('❌ WebSocket - REACT_APP_WS_URL non dĂ©finie dans .env');
  this.isConnecting = false;
  return;
}

AmĂ©liorations : - ✅ Suppression du hardcoding - ✅ Suppression du fallback (masquait les erreurs de config) - ✅ Validation stricte de la variable d'env - ✅ Message d'erreur explicite si manquante

đŸ—ïž ARCHITECTURE WEBSOCKET

Configuration actuelle

1
2
3
4
5
6
7
Frontend (React)
  └─→ websocketService.js
      └─→ process.env.REACT_APP_WS_URL
          ├─→ Local: ws://localhost:8001/ws
          └─→ Production: wss://api-housing.boaz-study.tech/ws
              └─→ Backend FastAPI (port 8001)
                  └─→ Route: /ws

Composants utilisant WebSocket

Via hooks spécialisés :

  1. StatistiquesSection.js 

    1
2
    import { useSouscriptionUpdates } from '../../hooks/useWebSocket';
useSouscriptionUpdates(() => loadStatistiques());

  2. HistoriqueSection.js 

    1
2
    import { useSouscriptionUpdates } from '../../hooks/useWebSocket';
useSouscriptionUpdates(() => loadSouscriptions());

  3. LogementList.js 

    1
2
    import { useLogementUpdates } from '../../hooks/useWebSocket';
useLogementUpdates(() => loadLogements());

Tous utilisent le mĂȘme service centralisĂ© → Configuration unique via .env

✅ VALIDATION DE LA CONFIGURATION

Variables d'environnement

1
2
3
4
5
6
# VĂ©rifier la configuration actuelle
cd /home/ubuntu/Boaz-study-mvp/boaz-housing-mvp/frontend
cat .env | grep REACT_APP_WS_URL

# RĂ©sultat attendu
REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/ws

Test de connexion

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# 1. Rebuild frontend pour charger nouvelles env vars
docker compose restart frontend

# 2. Ouvrir l'application : https://housing.boaz-study.tech
# 3. Ouvrir DevTools Console (F12)
# 4. Chercher les logs WebSocket

# Logs attendus :
# 🔌 WebSocket - Tentative de connexion : wss://api-housing.boaz-study.tech/ws
# 🔌 WebSocket - Socket ouvert, attente confirmation serveur...
# ✅ WebSocket - Connexion confirmĂ©e par le serveur!

Test de fonctionnement

1
2
3
4
5
6
# Dans l'Admin Dashboard :
# 1. Créer une nouvelle souscription
# 2. Observer la console :
#    - 📹 Message WebSocket reçu: {...}
#    - 🔔 Mise à jour des statistiques suite à changement souscription
# 3. VĂ©rifier que les stats se mettent Ă  jour automatiquement

🚹 CONFIGURATION BACKEND REQUISE

Backend doit Ă©couter sur /ws (sans /api)

Fichier : backend/app/main.py

1
2
3
4
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # Handler WebSocket
    ...

VĂ©rification : 

1
2
3
# VĂ©rifier que le endpoint existe
curl -I https://api-housing.boaz-study.tech/ws
# Devrait retourner 426 Upgrade Required (normal pour WebSocket)

Configuration Nginx/Ingress

Si WebSocket ne se connecte pas, vérifier la config proxy :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
location /ws {
    proxy_pass http://backend:8001/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;
}

🔄 ENVIRONNEMENTS

DĂ©veloppement Local

1
2
3
# .env.local ou .env
REACT_APP_API_URL=http://localhost:8001
REACT_APP_WS_URL=ws://localhost:8001/ws

DĂ©marrage : 

1
2
3
4
5
6
# Backend sur port 8001
docker compose up backend

# Frontend
cd frontend
npm start

Production

1
2
3
# .env
REACT_APP_API_URL=https://api-housing.boaz-study.tech
REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/ws

DĂ©ploiement : 

1
2
3
4
5
6
# Rebuild avec nouvelles variables
docker compose build frontend
docker compose up -d frontend

# Ou via Kubernetes
kubectl rollout restart deployment/housing-frontend -n housing

📊 AVANTAGES DE CETTE CONFIGURATION

1. Centralisation

✅ Une seule variable d'environnement pour tout le frontend ✅ Pas de duplication de l'URL dans le code ✅ Facile à modifier selon l'environnement

2. Sécurité

✅ Pas de secrets hardcodĂ©s ✅ Configuration diffĂ©rente dev/prod ✅ Validation stricte de la prĂ©sence de la variable

3. Maintenabilité

✅ Changement d'URL = 1 ligne dans .env ✅ Pas de recherche dans tout le code ✅ Documentation claire des valeurs attendues

4. Debugging

✅ Message d'erreur clair si config manquante ✅ Logs explicites de l'URL utilisĂ©e ✅ Pas de fallback silencieux qui masque les problĂšmes

🐛 TROUBLESHOOTING

ProblĂšme : WebSocket ne se connecte pas

1. VĂ©rifier la variable d'environnement 

1
2
3
4
# Dans le container frontend
docker exec boaz-frontend printenv | grep REACT_APP_WS_URL

# Doit afficher : REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/ws

2. Vérifier que le frontend a été rebuild 

1
2
3
4
# Les variables d'env React sont compilées au build
# Donc modifier .env nécessite un rebuild
docker compose build frontend
docker compose restart frontend

3. VĂ©rifier les logs console navigateur 

1
2
3
// Ouvrir F12 → Console
// Chercher : "WebSocket - Tentative de connexion"
// URL affichĂ©e doit ĂȘtre : wss://api-housing.boaz-study.tech/ws

4. VĂ©rifier que le backend Ă©coute bien sur /ws 

1
2
3
4
5
6
# Logs backend
docker logs boaz-backend | grep websocket

# Test direct
curl -i https://api-housing.boaz-study.tech/ws
# Devrait retourner 426 Upgrade Required

ProblÚme : Erreur "REACT_APP_WS_URL non définie"

Cause : Variable manquante dans .env

Solution : 

1
2
3
cd frontend
echo "REACT_APP_WS_URL=wss://api-housing.boaz-study.tech/ws" >> .env
docker compose restart frontend

ProblĂšme : WebSocket se connecte Ă  l'ancienne URL

Cause : Cache navigateur ou frontend pas rebuild

Solution : 

1
2
3
4
5
6
7
# 1. Clear cache navigateur (Ctrl+Shift+R)

# 2. Rebuild frontend
docker compose build --no-cache frontend
docker compose up -d frontend

# 3. Vérifier dans console que nouvelle URL est utilisée

📚 RÉFÉRENCES

Documentation WebSocket

  • Service : frontend/src/services/websocketService.js
  • Hooks : frontend/src/hooks/useWebSocket.js
  • Config Backend : backend/app/routers/websocket.py
  • Doc gĂ©nĂ©rale : WEBSOCKET_CONFIG.md

Variables d'environnement React

WebSocket URLs

  • Local dev : ws:// (non sĂ©curisĂ©)
  • Production : wss:// (sĂ©curisĂ©, obligatoire pour HTTPS)

✅ CHECKLIST DÉPLOIEMENT

Avant déploiement

  • Variable REACT_APP_WS_URL correcte dans .env
  • .env.example documentĂ© avec exemples
  • websocketService.js utilise uniquement process.env
  • Aucun hardcoding d'URL dans le code
  • Backend Ă©coute bien sur /ws
  • Config Nginx/Ingress pour WebSocket OK

AprÚs déploiement

  • Rebuild frontend avec nouvelles env vars
  • Tester connexion WebSocket en console
  • VĂ©rifier logs : "Connexion confirmĂ©e"
  • Tester notification temps rĂ©el (crĂ©er souscription)
  • VĂ©rifier statistiques se mettent Ă  jour auto

🎯 RÉSUMÉ

Modification : URL WebSocket frontend centralisée via variable d'environnement

Impact : Configuration plus propre, maintenable et sécurisée

Action requise : Rebuild frontend aprĂšs modification .env

Validation : Console doit afficher wss://api-housing.boaz-study.tech/ws

Mise à jour contexte projet : À faire dans .claude/project-context.md

Section à mettre à jour : - Intégrations tierces > WebSocket - Configuration & Déploiement > Variables d'environnement

Auteur : Équipe Boaz-Housing Dev Date : 01/10/2025