Création de la vue du debugger MQTT

- Lien sur la page d'accueil
- Configration du routeur
- Création des composants
  - affichage du formulaire de publication
  - affichage de la console de souscription
- Création de la vue de la page

src/components/MQTTDebugConsole.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Console MQTT</h1>
+    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
+  </div>
+</template>
+
+<script>
+import mqtt from 'mqtt';
+
+export default {
+  data() {
+    return {
+      messages: [] // Initialiser un tableau pour stocker les messages MQTT
+    };
+  },
+  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");
+      this.messages.push(`Topic: ${topic}, Message: ${message}`); // Ajouter le message à la liste des messages
+    });
+  }
+}
+</script>