4NK_env/docs/ihm_client/WEBSOCKET_CONNECTION.md

Connexion WebSocket - ihm_client

Architecture de l'iframe

Structure de fonctionnement

L'iframe ihm_client suit une architecture modulaire :

1. Initialisation (router.ts) :

   • init() initialise les services
   • Services.getInstance() crée l'instance singleton
   • connectAllRelays() établit les connexions WebSocket

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

VITE_BOOTSTRAPURL=wss://dev4.4nkweb.com/ws/
RELAY_URLS=wss://dev4.4nkweb.com/ws/,wss://dev3.4nkweb.com/ws/

Connexion aux relays

// Dans service.ts
const BOOTSTRAPURL = [import.meta.env.VITE_BOOTSTRAPURL || `wss://${BASEURL}/ws/`];

// Connexion à tous les relays
await services.connectAllRelays();

Gestion des messages

Handshake

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

public updateRelay(wsurl: string, spAddress: string): void {
  this.relayAddresses[wsurl] = spAddress;
  console.log(`Updated: ${wsurl} -> ${spAddress}`);
}

Communication avec le parent

Écoute des messages

// Dans router.ts
if (window.self !== window.top) {
  // L'iframe écoute les messages du parent
  window.addEventListener('message', handleMessage);
}

Gestion des erreurs

// 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

# Depuis l'iframe
wget -O- https://dev4.4nkweb.com/ws/

Résultat actuel : 502 Bad Gateway

Test avec headers WebSocket

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