Le développement d'applications légères au sein de l'écosystème WeChat nécessite souvent l'intégration de protocoles de communication en temps réel. Le protocole MQTT, reconnu pour sa faible empreinte et son modèle de publication/abonnement, s'avère idéal pour les scénarios IoT. Étant donné que les WeChat Mini Programs imposent des restrictions strictes sur les communications réseau, l'intégration de MQTT doit s'appuyer exclusivement sur des connexions WebSocket sécurisées (WSS).

Prérequis réseau et configuration du domaine

L'environnement d'exécution de WeChat exige que toutes les requêtes réseau vers des serveurs externes utilisent le protocole wss://. Pour établir une connexion valide avec un broker MQTT, plusieurs configurations doivent être respectées :

• Le nom de domaine du broker doit être déclaré, validé et ajouté à la liste blanche dans le tableau de bord développeur de WeChat.
• Le serveur doit disposer d'un certificat TLS valide délivré par une autorité de certification reconnue.
• Restriction Android : En raison d'une limitation native sur les appareils Android, la connexion TLS doit impérativement s'effectuer sur le port standard 443. L'URL de connexion ne doit donc contenir aucune spécification de port explicite pour éviter les échecs de connexion.

Intégration de la bibliothèque client

Bien que WeChat supporte le gestionnaire de paquets NPM depuis certaines versions, l'importation directe du code source offre un contrôle accru et évite certains problèmes de compatibilité liés aux API Node.js. Il est recommandé d'utiliser la version 4.0.1 de la bibliothèque mqtt.js. Les versions ultérieures (comme la 4.2.8) peuvent générer des exceptions fatales liées à net.createConnection dans cet environnement spécifique.

Téléchargez le fichier minifié depuis le réseau de diffusion de contenu (CDN) et placez-le dans un répertoire dédié, par exemple utils/mqtt.js. Importez ensuite ce module dans votre contrôleur de page :

import MqttClient from '../../utils/mqtt';

Implémentation du cycle de vie MQTT

Voici une architecture repensée pour gérer les interactions avec le serveur. Cette structure encapsule les configurations et introduit des contrôles d'état avant chaque opération réseau. Notez l'utilisation du schéma d'URI spécifique wxs:// requis par la plateforme WeChat pour router le trafic WebSocket.

const brokerSettings = {
  endpoint: 'wxs://broker.emqx.io/mqtt',
  channel: 'telemetry/wechat/devices',
  defaultPayload: JSON.stringify({ status: 'online', nodeId: 'wx-001' }),
  connectionParams: {
    protocolVersion: 4,
    clientId: `wx_app_${Math.random().toString(36).substring(2, 10)}`,
    clean: true,
    keepalive: 60,
    reconnectPeriod: 2000,
    connectTimeout: 15000,
    resubscribe: true
  }
};

Page({
  data: {
    mqttInstance: null,
    isNetworkReady: false
  },

  establishLink() {
    const client = MqttClient.connect(brokerSettings.endpoint, brokerSettings.connectionParams);
    this.setData({ mqttInstance: client });

    client.on('connect', () => {
      this.setData({ isNetworkReady: true });
      wx.showToast({ title: 'Liaison établie', icon: 'success' });
    });

    client.on('message', (topic, payload) => {
      console.log(`Télémesure reçue [${topic}]:`, payload.toString());
    });
    
    client.on('error', (err) => {
      console.error('Défaillance du socket:', err);
      this.setData({ isNetworkReady: false });
    });
  },

  registerToChannel() {
    if (this.data.mqttInstance && this.data.isNetworkReady) {
      this.data.mqttInstance.subscribe(brokerSettings.channel, (err) => {
        if (!err) {
          wx.showToast({ title: 'Abonnement actif' });
        }
      });
    }
  },

  transmitData() {
    if (this.data.mqttInstance && this.data.isNetworkReady) {
      this.data.mqttInstance.publish(
        brokerSettings.channel, 
        brokerSettings.defaultPayload, 
        { qos: 1 }
      );
    }
  },

  revokeSubscription() {
    if (this.data.mqttInstance) {
      this.data.mqttInstance.unsubscribe(brokerSettings.channel);
      wx.showToast({ title: 'Abonnement retiré' });
    }
  },

  closeLink() {
    if (this.data.mqttInstance) {
      this.data.mqttInstance.end(false, () => {
        this.setData({ isNetworkReady: false, mqttInstance: null });
        wx.showToast({ title: 'Session terminée' });
      });
    }
  }
});

Validation des échenges

Pour vérifier le bon fonctionnement de cette implémentation, un client de bureau tiers tel que MQTT X peut être configuré sur le même broker. En publiant des données depuis l'application WeChat, le client tiers les reçoit insatntanément. Inversement, l'envoi d'une charge utile depuis le logiciel de bureau vers le sujet cible met à jour l'interface de la mini-application, confirmant ainsi la fluidité du canal de communication bidirectionnel.