patch MQTT

VApp/src/components/CardButtonScore.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup>
-  import { ref, reactive, onMounted } from 'vue';
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
   import mqtt from 'mqtt';
   import config from '@/config.js'; // Ensure correct path
 
@@ -72,7 +72,11 @@
     Green: { Total: 0, Round: 0 },
   });
 
-  const client = mqtt.connect(config.mqttBrokerUrl);
+  // const client = mqtt.connect(config.mqttBrokerUrl);
+  let client = null;
+  
+  onMounted(() => {
+    client = mqtt.connect(config.mqttBrokerUrl);
 
     client.on('connect', () => {
         console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
@@ -101,6 +105,13 @@
             }
         }
     });
+  });
+
+  onUnmounted(() => {
+    if (client) {
+      client.end();
+    }
+  });
 
   function toggleCardSize() {
     isCardReduced.value = !isCardReduced.value;