Appearance
📡 Communication Temps Réel (SSE) ​
L'application utilise le protocole Server-Sent Events (SSE) pour maintenir une liaison bidirectionnelle (réception de commandes poussées par le serveur) avec le backend. Cela permet de piloter les périphériques à distance sans attendre un rafraîchissement manuel.
🛠️ Architecture Technique ​
La gestion du SSE est centralisée dans deux composants Svelte situés dans src/lib/components/sse/ :
Sse.svelte: Gère la connexion bas niveau via l'API nativeEventSource.SseHandler.svelte: Intercepte les événements dispatchés par le composant SSE et exécute les actions métiers correspondantes.
Flux de données ​
📨 Événements supportés ​
L'application réagit à plusieurs types d'événements envoyés par le serveur :
| Événement | Action effectuée par l'App |
|---|---|
message | Événement générique logué en debug. |
randomStr | Génère et met à jour le QR Code d'association sur l'écran. |
deviceLinked | Affiche un dialogue de succès et reconnecte le flux SSE. |
reload | Provoque un location.reload() pour mettre Ă jour l'application. |
navigation / navigateTo | Redirige l'utilisateur vers une URL spécifique via goto(). |
refresh | Déclenche un rafraîchissement des données (Full Data). |
clear | Nettoyage forcé (preferences pour le stockage, cache pour le Service Worker). |
🔄 Robustesse et Reconnexion ​
- Last Event ID : L'application stocke le
sseLastEventIddans le stockage local. À la reconnexion, il est renvoyé au serveur pour récupérer les événements manqués. - Auto-reconnect : En cas d'erreur
CLOSED, le composant tente une reconnexion automatique après 30 secondes. - Anti-déconnexion (Keep-alive) : Un mécanisme de
fetchpériodique (urlTest) est en place pour empêcher les routeurs ou pare-feu de fermer la connexion inactive.
⚙️ Configuration ​
L'URL du serveur SSE est fournie dynamiquement via les props du composant (souvent récupérée depuis le CMS ou les variables d'environnement lors de l'initialisation du pipeline).
typescript
// Exemple d'action de nettoyage (clear)
if (message == 'cache') {
clearCache(); // Notifie le Service Worker
await cmsPipelineService.restart(); // Redémarre le pipeline CMS
}