Pour connecter une application Vue.js à un service MQTT, cmomencez par configurer le projet et installer les dépendances nécessaires. Vue.js est un framework JavaScript progressif pour construire des interfaces utilisateur réactives, tandis que MQTT est un protocole de messagerie léger adapté à l'Internet des objets, fonctionnant sur un modèle publish-subscribe.

Configuration du projet Vue.js

Créez une nouvelle application Vue à l'aide de Vue CLI :

vue create projet-mqtt-demo

Installation de la bibliothèque cliente MQTT

Ajoutez la bibliothèque mqtt via npm ou yarn :

npm install mqtt --save

yarn add mqtt

Alternativement, intégrez-la via CDN :

<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

Établir une connexion au broker MQTT

Utilisez un serveur public comme celui d'EMQ X pour les tests. Voici un exemple de composant Vue pour gérer la connexion et les interactions MQTT :

<script>
import mqtt from 'mqtt'

export default {
  data() {
    return {
      mqttSettings: {
        host: 'broker.emqx.io',
        port: 8083,
        endpoint: '/mqtt',
        cleanSession: true,
        timeout: 4000,
        retryInterval: 4000,
        clientId: 'vue_client_456',
        username: 'demo_user',
        password: 'demo_pass',
      },
      subscriptionInfo: {
        topic: 'channel/notifications',
        qosLevel: 0,
      },
      publicationInfo: {
        topic: 'channel/responses',
        qosLevel: 0,
        data: '{"content": "Message from Vue app"}',
      },
      incomingMessages: '',
      qosValues: [
        { text: 0, id: 0 },
        { text: 1, id: 1 },
        { text: 2, id: 2 },
      ],
      mqttClient: {
        isConnected: false,
      },
      subscriptionActive: false,
    }
  },

  methods: {
    initializeConnection() {
      const { host, port, endpoint, ...config } = this.mqttSettings
      const brokerUrl = `ws://${host}:${port}${endpoint}`
      try {
        this.mqttClient = mqtt.connect(brokerUrl, config)
      } catch (e) {
        console.error('Échec de la connexion:', e)
      }
      this.mqttClient.on('connect', () => {
        console.log('Connexion réussie!')
      })
      this.mqttClient.on('error', (err) => {
        console.error('Erreur de connexion:', err)
      })
      this.mqttClient.on('message', (topic, payload) => {
        this.incomingMessages += payload.toString()
        console.log(`Message reçu de ${topic}: ${payload}`)
      })
    },

    startSubscription() {
      const { topic, qosLevel } = this.subscriptionInfo
      this.mqttClient.subscribe(topic, { qos: qosLevel }, (error, granted) => {
        if (error) {
          console.error('Erreur lors de l\'abonnement:', error)
          return
        }
        this.subscriptionActive = true
        console.log('Abonnement établi:', granted)
      })
    },

    stopSubscription() {
      const { topic } = this.subscriptionInfo
      this.mqttClient.unsubscribe(topic, (error) => {
        if (error) {
          console.error('Erreur de désabonnement:', error)
        }
      })
    },

    sendMessage() {
      const { topic, qosLevel, data } = this.publicationInfo
      this.mqttClient.publish(topic, data, { qos: qosLevel }, (error) => {
        if (error) {
          console.error('Erreur d\'envoi:', error)
        }
      })
    },

    terminateConnection() {
      if (this.mqttClient.isConnected) {
        try {
          this.mqttClient.end()
          this.mqttClient = { isConnected: false }
          console.log('Déconnexion terminée.')
        } catch (e) {
          console.error('Problème de déconnexion:', e.toString())
        }
      }
    },
  },
}
</script>

Gestion des opérations MQTT

Les méthodes ci-dessus permettent de connecter le client, de s'abonner à des sujets, de publier des messages, de se désabonner et de déconnecter proprement. Ajustez les paramètres selon les besoins de votre application, tels que les niveaux de qualité de service (QoS) pour garantir la fiabilité de la livraison des messages.