124 lines
3.3 KiB
Markdown
124 lines
3.3 KiB
Markdown
# 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
|
|
```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 |