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/App.vue

@@ -13,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/mqtt-debugger">MQTT Debugger</RouterLink>
       </nav>
     </div>
   </header>

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>

src/components/MQTTDebugPublish.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h1>Publier sur MQTT</h1>
+    <select v-model="selectedTopic">
+      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
+    </select>
+    <input type="text" v-model="message" placeholder="Saisissez votre message">
+    <button @click="publishMessage">Publier sur MQTT</button>
+  </div>
+</template>
+
+<script>
+import mqtt from 'mqtt';
+
+export default {
+  data() {
+    return {
+      message: '', // Initialiser la variable message
+      selectedTopic: 'topic1',
+      topics: ['topic1', 'topic2', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10'], // Liste des topics
+    };
+  },
+  methods: {
+    publishMessage() {
+      const client = mqtt.connect('ws://localhost:9001');
+      client.on('connect', () => {
+        client.publish(this.selectedTopic, this.message);
+        client.end();
+      });
+    }
+  }
+}
+</script>

src/router/index.js

@@ -16,6 +16,11 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/mqtt-debugger',
+      name: 'Debugger MQTT',
+      component: () => import('../views/MQTTDebugView.vue')
     }
   ]
 })

src/views/MQTTDebugView.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <!-- Zone pour publier sur MQTT -->
+    <PublishMQTTComponent />
+
+    <!-- Zone pour afficher la console MQTT -->
+    <MQTTConsoleComponent />
+  </div>
+</template>
+
+<script>
+import PublishMQTTComponent from '../components/MQTTDebugPublish.vue'; // Importer le composant pour publier sur MQTT
+import MQTTConsoleComponent from '../components/MQTTDebugConsole.vue'; // Importer le composant pour la console MQTT
+
+export default {
+  components: {
+    PublishMQTTComponent, // Composant pour publier sur MQTT
+    MQTTConsoleComponent // Composant pour la console MQTT
+  }
+}
+</script>