npm run format

This commit is contained in:
Laurent 2024-02-17 19:53:48 +00:00
parent cd39c9b7d6
commit 3760236279
4 changed files with 30 additions and 19 deletions

View File

@ -6,18 +6,18 @@
</template> </template>
<script> <script>
import {subscribeToTopic} from '@/services/mqttService'; import { subscribeToTopic } from '@/services/mqttService'
export default { export default {
data() { data() {
return { return {
messages: [] // Initialiser un tableau pour stocker les messages MQTT messages: [] // Initialiser un tableau pour stocker les messages MQTT
}; }
}, },
created() { created() {
subscribeToTopic('#', (topic, message) => { subscribeToTopic('#', (topic, message) => {
this.messages.push(`Topic: ${topic}, Message: ${message}`); // Ajouter le message à la liste des messages this.messages.push(`Topic: ${topic}, Message: ${message}`) // Ajouter le message à la liste des messages
}); // S'abonner à tous les topics MQTT }) // S'abonner à tous les topics MQTT
} }
} }
</script> </script>

View File

@ -4,25 +4,36 @@
<select v-model="selectedTopic"> <select v-model="selectedTopic">
<option v-for="topic in topics" :key="topic">{{ topic }}</option> <option v-for="topic in topics" :key="topic">{{ topic }}</option>
</select> </select>
<input type="text" v-model="message" placeholder="Saisissez votre message"> <input type="text" v-model="message" placeholder="Saisissez votre message" />
<button @click="publishMessage">Publier sur MQTT</button> <button @click="publishMessage">Publier sur MQTT</button>
</div> </div>
</template> </template>
<script> <script>
import {publishMessage} from '@/services/mqttService'; import { publishMessage } from '@/services/mqttService'
export default { export default {
data() { data() {
return { return {
message: '', // Initialiser la variable message message: '', // Initialiser la variable message
selectedTopic: 'topic1', selectedTopic: 'topic1',
topics: ['topic1', 'topic2', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10'], // Liste des topics topics: [
}; 'topic1',
'topic2',
'topic3',
'topic4',
'topic5',
'topic6',
'topic7',
'topic8',
'topic9',
'topic10'
] // Liste des topics
}
}, },
methods: { methods: {
publishMessage() { publishMessage() {
publishMessage(this.selectedTopic, this.message); publishMessage(this.selectedTopic, this.message)
} }
} }
} }

View File

@ -1,19 +1,19 @@
import mqtt from 'mqtt'; import mqtt from 'mqtt'
import config from '@/config.js'; import config from '@/config.js'
const mqttBrokerUrl = config.mqttBrokerUrl; const mqttBrokerUrl = config.mqttBrokerUrl
// Créer une instance de client MQTT // Créer une instance de client MQTT
const client = mqtt.connect(mqttBrokerUrl); const client = mqtt.connect(mqttBrokerUrl)
// Fonction pour publier un message sur un topic MQTT // Fonction pour publier un message sur un topic MQTT
export function publishMessage(topic, message) { export function publishMessage(topic, message) {
client.publish(topic, message); client.publish(topic, message)
} }
// Fonction pour s'abonner à un topic MQTT et écouter les messages entrants // Fonction pour s'abonner à un topic MQTT et écouter les messages entrants
export function subscribeToTopic(topic, callback) { export function subscribeToTopic(topic, callback) {
client.subscribe(topic); client.subscribe(topic)
client.on('message', (receivedTopic, message) => { client.on('message', (receivedTopic, message) => {
callback(receivedTopic.toString(), message.toString()); callback(receivedTopic.toString(), message.toString())
}); })
} }

View File

@ -9,8 +9,8 @@
</template> </template>
<script> <script>
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue'; // Importer le composant pour publier sur MQTT 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 import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
export default { export default {
components: { components: {