diff --git a/src/components/MQTTDebugConsole.vue b/src/components/MQTTDebugConsole.vue
index 26ee17d..56f67fa 100644
--- a/src/components/MQTTDebugConsole.vue
+++ b/src/components/MQTTDebugConsole.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import mqtt from 'mqtt';
+import {subscribeToTopic} from '@/services/mqttService';
 
 export default {
   data() {
@@ -15,15 +15,9 @@ export default {
     };
   },
   created() {
-    const client = mqtt.connect('ws://localhost:9001');
-    client.on('connect', () => {
-    console.log("on connect");
-      client.subscribe('#'); // S'abonner à tous les topics MQTT
-    });
-    client.on('message', (topic, message) => {
-    console.log("on message");
+    subscribeToTopic('#', (topic, message) => {
       this.messages.push(`Topic: ${topic}, Message: ${message}`); // Ajouter le message à la liste des messages
-    });
+    }); // S'abonner à tous les topics MQTT
   }
 }
 </script>
diff --git a/src/components/MQTTDebugPublish.vue b/src/components/MQTTDebugPublish.vue
index 36c5070..516b060 100644
--- a/src/components/MQTTDebugPublish.vue
+++ b/src/components/MQTTDebugPublish.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import mqtt from 'mqtt';
+import {publishMessage} from '@/services/mqttService';
 
 export default {
   data() {
@@ -22,11 +22,7 @@ export default {
   },
   methods: {
     publishMessage() {
-      const client = mqtt.connect('ws://localhost:9001');
-      client.on('connect', () => {
-        client.publish(this.selectedTopic, this.message);
-        client.end();
-      });
+      publishMessage(this.selectedTopic, this.message);
     }
   }
 }