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,34 +72,45 @@
     Green: { Total: 0, Round: 0 },
   });
 
-  const client = mqtt.connect(config.mqttBrokerUrl);
+  // const client = mqtt.connect(config.mqttBrokerUrl);
+  let client = null;
   
-  client.on('connect', () => {
-      console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
-      client.subscribe('game/score');
+  onMounted(() => {
+    client = mqtt.connect(config.mqttBrokerUrl);
+
+    client.on('connect', () => {
+        console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
+        client.subscribe('game/score');
+    });
+
+    client.on('error', (err) => {
+        console.error('CardButtonScore: MQTT Error:', err);
+    });
+    
+    client.on('message', (topic, message) => {
+        if (topic === 'game/score') {
+            try {
+                const data = JSON.parse(message.toString());
+                console.log('CardButtonScore: Received score update:', data);
+                if (data && data.TEAM) {
+                  Object.keys(scores).forEach(color => {
+                      if (data.TEAM[color]) {
+                          scores[color].Total = data.TEAM[color].TotalScore;
+                          scores[color].Round = data.TEAM[color].RoundScore;
+                      }
+                  });
+                }
+            } catch (e) {
+                console.error("Error parsing score update:", e);
+            }
+        }
+    });
   });
 
-  client.on('error', (err) => {
-      console.error('CardButtonScore: MQTT Error:', err);
-  });
-  
-  client.on('message', (topic, message) => {
-      if (topic === 'game/score') {
-          try {
-              const data = JSON.parse(message.toString());
-              console.log('CardButtonScore: Received score update:', data);
-              if (data && data.TEAM) {
-                 Object.keys(scores).forEach(color => {
-                     if (data.TEAM[color]) {
-                         scores[color].Total = data.TEAM[color].TotalScore;
-                         scores[color].Round = data.TEAM[color].RoundScore;
-                     }
-                 });
-              }
-          } catch (e) {
-              console.error("Error parsing score update:", e);
-          }
-      }
+  onUnmounted(() => {
+    if (client) {
+      client.end();
+    }
   });
 
   function toggleCardSize() {