34 lines
887 B
Vue
34 lines
887 B
Vue
|
<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>
|