From 09c8493aeb8f870e3a59b4f850fc1ab89554a05f Mon Sep 17 00:00:00 2001
From: 4NK CI Bot <ci@4nkweb.com>
Date: Sat, 20 Sep 2025 22:15:07 +0000
Subject: [PATCH] docs: Documentation WebSocket et architecture de l'iframe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ajout de docs/WEBSOCKET_CONNECTION.md
- Architecture de l'iframe documentée
- Configuration WebSocket et gestion des messages
- Communication avec le parent documentée
- Problème persistant 502 Bad Gateway documenté
---
 CHANGELOG.md                 |  17 +++++
 docs/WEBSOCKET_CONNECTION.md | 136 ++++++++++++++++++++++++++++++-----
 2 files changed, 137 insertions(+), 16 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..12439aa
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,17 @@
+# Changelog
+
+## [Unreleased]
+### Documentation WebSocket et architecture
+- **Documentation WebSocket** : Ajout de `docs/WEBSOCKET_CONNECTION.md` avec analyse complète de l'architecture
+- **Architecture de l'iframe** : Documentation de la logique de fonctionnement (init, services, WebSocket)
+- **Configuration WebSocket** : Documentation des variables d'environnement et connexions
+- **Gestion des messages** : Documentation du handshake et mise à jour des adresses relay
+- **Communication parent** : Documentation de l'écoute des messages et gestion des erreurs
+- **Problème persistant** : 502 Bad Gateway - Nginx ne transmet pas les headers WebSocket
+
+## [1.0.0]
+### Version initiale
+- Interface utilisateur pour LeCoffre
+- Intégration WebSocket avec les relays
+- Gestion des processus et authentification
+- Communication avec le parent via postMessage
diff --git a/docs/WEBSOCKET_CONNECTION.md b/docs/WEBSOCKET_CONNECTION.md
index 28cd417..8c30f35 100644
--- a/docs/WEBSOCKET_CONNECTION.md
+++ b/docs/WEBSOCKET_CONNECTION.md
@@ -1,20 +1,124 @@
-# Connexion WebSocket - IHM Client
+# Connexion WebSocket - ihm_client
 
-## Configuration
-- `VITE_BOOTSTRAPURL` : URL WebSocket du relay (défaut: `wss://dev4.4nkweb.com/ws/`)
-- `RELAY_URLS` : URLs des relays (défaut: `wss://dev4.4nkweb.com/ws/,wss://dev3.4nkweb.com/ws/`)
+## Architecture de l'iframe
 
-## Connexion WebSocket
-L'iframe se connecte automatiquement au relay via WebSocket pour :
-- Authentification
-- Pairing des appareils
-- Communication en temps réel
+### Structure de fonctionnement
+L'iframe `ihm_client` suit une architecture modulaire :
 
-## Headers requis
-- `Upgrade: websocket`
-- `Connection: upgrade`
-- `Sec-WebSocket-Version: 13`
-- `Sec-WebSocket-Key: [base64-encoded-key]`
+1. **Initialisation** (`router.ts`) :
+   - `init()` initialise les services
+   - `Services.getInstance()` crée l'instance singleton
+   - `connectAllRelays()` établit les connexions WebSocket
 
-## Date
-2025-09-20
+2. **Services** (`services/service.ts`) :
+   - Gestion des connexions WebSocket
+   - Communication avec les relays
+   - Gestion des messages et handshakes
+
+3. **WebSocket** (`websockets.ts`) :
+   - API WebSocket native
+   - Gestion des événements (open, message, error, close)
+
+## Configuration WebSocket
+
+### Variables d'environnement
+```bash
+VITE_BOOTSTRAPURL=wss://dev4.4nkweb.com/ws/
+RELAY_URLS=wss://dev4.4nkweb.com/ws/,wss://dev3.4nkweb.com/ws/
+```
+
+### Connexion aux relays
+```typescript
+// Dans service.ts
+const BOOTSTRAPURL = [import.meta.env.VITE_BOOTSTRAPURL || `wss://${BASEURL}/ws/`];
+
+// Connexion à tous les relays
+await services.connectAllRelays();
+```
+
+## Gestion des messages
+
+### Handshake
+```typescript
+public async handleHandshakeMsg(url: string, parsedMsg: any) {
+  const handshakeMsg: HandshakeMessage = JSON.parse(parsedMsg);
+  this.updateRelay(url, handshakeMsg.sp_address);
+  this.currentBlockHeight = handshakeMsg.chain_tip;
+}
+```
+
+### Mise à jour des adresses relay
+```typescript
+public updateRelay(wsurl: string, spAddress: string): void {
+  this.relayAddresses[wsurl] = spAddress;
+  console.log(`Updated: ${wsurl} -> ${spAddress}`);
+}
+```
+
+## Communication avec le parent
+
+### Écoute des messages
+```typescript
+// Dans router.ts
+if (window.self !== window.top) {
+  // L'iframe écoute les messages du parent
+  window.addEventListener('message', handleMessage);
+}
+```
+
+### Gestion des erreurs
+```typescript
+// Détection des fonds insuffisants
+if (insufficientFunds) {
+  await this.triggerAutomaticFundsTransfer();
+}
+```
+
+## Problèmes résolus
+
+### 1. Configuration WebSocket incorrecte
+**Problème :** L'iframe utilisait `ws://sdk_relay:8090/` au lieu de `wss://dev4.4nkweb.com/ws/`.
+
+**Solution :** Correction des variables d'environnement et redémarrage du container.
+
+### 2. Mixed Content errors
+**Problème :** Tentative de connexion WS depuis une page HTTPS.
+
+**Solution :** Utilisation de WSS (WebSocket Secure) pour toutes les connexions.
+
+### 3. Headers WebSocket manquants
+**Problème :** Nginx ne transmettait pas les headers WebSocket.
+
+**Solution :** Configuration Nginx avec headers WebSocket explicites.
+
+## Problème persistant
+
+### 502 Bad Gateway
+**Statut :** ⚠️ Problème persistant
+- L'iframe reçoit 502 Bad Gateway lors de la connexion WebSocket
+- Nginx ne transmet pas les headers WebSocket vers le relay
+- Le relay rejette les connexions sans headers
+
+**Investigation :** La configuration Nginx semble correcte mais les headers ne sont pas transmis.
+
+## Tests
+
+### Test de connexion WebSocket
+```bash
+# Depuis l'iframe
+wget -O- https://dev4.4nkweb.com/ws/
+```
+
+**Résultat actuel :** 502 Bad Gateway
+
+### Test avec headers WebSocket
+```bash
+curl -v -H "Upgrade: websocket" \
+     -H "Connection: upgrade" \
+     -H "Sec-WebSocket-Version: 13" \
+     -H "Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==" \
+     https://dev4.4nkweb.com/ws/
+```
+
+## Date de mise à jour
+2025-01-20 - Architecture de l'iframe analysée et problèmes de connexion WebSocket identifiés
\ No newline at end of file