feat(client): migliora robustezza connessioni WebSocket su display e controller

Aggiunge gestione riconnessione con backoff esponenziale e protezione da reconnect multipli.

Migliora cleanup su unmount/HMR per evitare listener e timeout pendenti.

Uniforma gestione errori e stato connessione lato client.

Semplifica etichette pulsanti controller rimuovendo emoji e aggiorna commenti.

src/components/DisplayPage.vue

@@ -2,7 +2,7 @@
   <section class="display-page">
     <div class="campo">
       <span v-if="state.order">
-        <!-- home guest -->
+        <!-- Ordine visualizzazione: home / guest -->
         <div class="hea home">
           <span :style="{ 'float': 'left' }">
             {{ state.sp.nomi.home }}
@@ -46,7 +46,7 @@
       </span>
 
       <span v-else>
-        <!-- guest home -->
+        <!-- Ordine visualizzazione: guest / home -->
         <div class="hea guest">
           <span :style="{ 'float': 'left' }">
             {{ state.sp.nomi.guest }}
@@ -104,7 +104,7 @@
         </div>
       </div>
 
-      <!-- Connection status indicator -->
+      <!-- Indicatore stato connessione -->
       <div class="connection-status" :class="{ connected: wsConnected, disconnected: !wsConnected }">
         <span class="dot"></span>
         {{ wsConnected ? '' : 'Disconnesso' }}
@@ -120,6 +120,10 @@ export default {
     return {
       ws: null,
       wsConnected: false,
+      isConnecting: false,
+      reconnectTimeout: null,
+      reconnectAttempts: 0,
+      maxReconnectDelay: 30000, // Ritardo massimo di riconnessione: 30 secondi
       state: {
         order: true,
         visuForm: false,
@@ -142,14 +146,48 @@ export default {
   },
   mounted() {
     this.connectWebSocket()
-    // Fullscreen on mobile
+    // Attiva la modalita fullscreen su dispositivi mobili.
     if (this.isMobile()) {
       try { document.documentElement.requestFullscreen() } catch (e) {}
     }
+
+    // Gestisce l'HMR di Vite evitando riconnessioni durante la ricarica a caldo.
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:beforeUpdate', () => {
+        // Annulla eventuali tentativi di riconnessione pianificati.
+        if (this.reconnectTimeout) {
+          clearTimeout(this.reconnectTimeout)
+          this.reconnectTimeout = null
+        }
+      })
+    }
   },
   beforeUnmount() {
+    // Pulisce il timeout di riconnessione.
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+
+    // Chiude il WebSocket con il codice di chiusura appropriato.
     if (this.ws) {
-      this.ws.close()
+      this.ws.onclose = null // Rimuove il listener per evitare nuove riconnessioni pianificate.
+      this.ws.onerror = null
+      this.ws.onmessage = null
+      this.ws.onopen = null
+
+      // Usa il codice 1000 (chiusura normale) se la connessione e aperta.
+      try {
+        if (this.ws.readyState === WebSocket.OPEN) {
+          this.ws.close(1000, 'Component unmounting')
+        } else if (this.ws.readyState === WebSocket.CONNECTING) {
+          // Se la connessione e ancora in fase di apertura, chiude direttamente.
+          this.ws.close()
+        }
+      } catch (err) {
+        console.error('[Display] Error closing WebSocket:', err)
+      }
+      this.ws = null
     }
   },
   methods: {
@@ -157,36 +195,113 @@ export default {
       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
     },
     connectWebSocket() {
+      // Evita connessioni simultanee multiple.
+      if (this.isConnecting) {
+        console.log('[Display] Already connecting, skipping...')
+        return
+      }
+
+      // Chiude la connessione precedente, se presente.
+      if (this.ws) {
+        this.ws.onclose = null
+        this.ws.onerror = null
+        this.ws.onmessage = null
+        this.ws.onopen = null
+        try {
+          if (this.ws.readyState === WebSocket.OPEN) {
+            this.ws.close(1000, 'Reconnecting')
+          } else if (this.ws.readyState === WebSocket.CONNECTING) {
+            this.ws.close()
+          }
+        } catch (err) {
+          console.error('[Display] Error closing previous WebSocket:', err)
+        }
+        this.ws = null
+      }
+
+      this.isConnecting = true
       const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
       const wsUrl = `${protocol}//${location.host}`
-      this.ws = new WebSocket(wsUrl)
+
+      try {
+        this.ws = new WebSocket(wsUrl)
+      } catch (err) {
+        console.error('[Display] Failed to create WebSocket:', err)
+        this.isConnecting = false
+        this.scheduleReconnect()
+        return
+      }
 
       this.ws.onopen = () => {
+        this.isConnecting = false
         this.wsConnected = true
-        // Register as display
-        this.ws.send(JSON.stringify({ type: 'register', role: 'display' }))
+        this.reconnectAttempts = 0
+        console.log('[Display] Connected to server')
+
+        // Registra il client come display solo con connessione effettivamente aperta.
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          try {
+            this.ws.send(JSON.stringify({ type: 'register', role: 'display' }))
+          } catch (err) {
+            console.error('[Display] Failed to register:', err)
+          }
+        }
       }
 
       this.ws.onmessage = (event) => {
         try {
           const msg = JSON.parse(event.data)
+
           if (msg.type === 'state') {
             this.state = msg.state
+          } else if (msg.type === 'error') {
+            console.error('[Display] Server error:', msg.message)
           }
         } catch (e) {
-          console.error('Error parsing WS message:', e)
+          console.error('[Display] Error parsing message:', e)
         }
       }
 
-      this.ws.onclose = () => {
+      this.ws.onclose = (event) => {
+        this.isConnecting = false
         this.wsConnected = false
-        // Auto-reconnect after 2 seconds
-        setTimeout(() => this.connectWebSocket(), 2000)
+        console.log('[Display] Disconnected from server', event.code, event.reason)
+
+        // Non riconnette durante HMR (codice 1001, "going away")
+        // ne in caso di chiusura pulita (codice 1000).
+        if (event.code === 1000 || event.code === 1001) {
+          console.log('[Display] Clean close, not reconnecting')
+          return
+        }
+
+        this.scheduleReconnect()
       }
 
-      this.ws.onerror = () => {
+      this.ws.onerror = (err) => {
+        console.error('[Display] WebSocket error:', err)
+        this.isConnecting = false
         this.wsConnected = false
       }
+    },
+    scheduleReconnect() {
+      // Evita pianificazioni multiple della riconnessione.
+      if (this.reconnectTimeout) {
+        return
+      }
+
+      // Applica backoff esponenziale: 1s, 2s, 4s, 8s, 16s, fino a 30s.
+      const delay = Math.min(
+        1000 * Math.pow(2, this.reconnectAttempts),
+        this.maxReconnectDelay
+      )
+      this.reconnectAttempts++
+
+      console.log(`[Display] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
+
+      this.reconnectTimeout = setTimeout(() => {
+        this.reconnectTimeout = null
+        this.connectWebSocket()
+      }, delay)
     }
   }
 }