So verwenden Sie MQTT im React Native Project

React Native ist das plattformübergreifende Open-Source-Framework für die Entwicklung mobiler Anwendungen von Facebook, ein Derivat von React für die native mobile Anwendungsplattform, das sowohl iOS- als auch Android-Plattformen unterstützt. React Native verwendet Javascript, ähnlich wie JSX von HTML, und CSS, um mobile Anwendungen zu entwickeln, sodass technisches Personal, das mit der Web-Front-End-Entwicklung vertraut ist, mit einer minimalen Lernkurve mit der Entwicklung mobiler Anwendungen beginnen kann. React Native bietet auch Leistung und Erfahrung, die der von nativen Anwendungen nahe kommt.

MQTT ist ein leichtgewichtiges IoT-Messaging-Protokoll basierend auf einem Publish/Subscribe-Modell, das eine stabile Übertragung über stark eingeschränkte Hardwaregeräte und Netzwerke mit geringer Bandbreite und hoher Latenz ermöglicht. Aufgrund seiner einfachen Implementierung, der QoS-Unterstützung und der geringen Nachrichtengröße ist es in der IoT-Branche weit verbreitet.

Dieser Artikel konzentriert sich auf die Verwendung von MQTT in React Native-Projekten zum Verbinden, Abonnieren und Abbestellen sowie zum Senden und Empfangen von Nachrichten von Clients MQTT-Broker.

Erstellen Sie ein neues React Native-Projekt

Hier ist ein Beispiel für die Erstellung eines Projekts mit dem Namen RNMQTTDemo in der macOS-Entwicklungsumgebung und der iOS-Anwendungsplattform. Beziehen auf Einrichten der Entwicklungsumgebung für Details.

Nachdem das Projekt erstellt wurde, führen Sie die folgenden Befehle aus, um die erforderlichen Abhängigkeiten in der Projektstammumgebung zu installieren.

npm install @react-native-async-storage/async-storage @rneui/base @rneui/themed

Installieren Sie das MQTT-Client-Modul

npm install react_native_mqtt

respond_native_mqtt ist ein MQTT-Client-Modul, das für das React Native-Projekt verwendet wird, das iOS und Android unterstützt.

So verwenden Sie das MQTT-Client-Modul

Verbindung zu einem MQTT-Server herstellen

Wir benutzen das kostenloser öffentlicher MQTT-Server bereitgestellt von EMQ, das auf dem basiert MQTT-Cloud von EMQX. Die Serverzugriffsinformationen lauten wie folgt:

  • Makler: broker.emqx.io
  • TCP-Port: 1883
  • Websocket-Port: 8083

Erstellen Sie eine Clientinstanz

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  sync : {}
});
const options = {
  host: 'broker.emqx.io',
  port: 8083,
  path: '/testTopic',
  id: 'id_' + parseInt(Math.random()*100000)
};
client = new Paho.MQTT.Client(options.host, options.port, options.path);

Verbinden Sie sich mit dem MQTT-Server

connect = () => {
    this.setState(
      { status: 'isFetching' },
      () => {
        client.connect({
          onSuccess: this.onConnect,
          useSSL: false,
          timeout: 3,
          onFailure: this.onFailure
        });
      }
    );
  }
subscribeTopic = () => {
    this.setState(
      { subscribedTopic: this.state.topic },
      () => {
        client.subscribe(this.state.subscribedTopic, { qos: 0 });
      }
    );
  }

Veröffentlichen

sendMessage = () =>{
    var message = new Paho.MQTT.Message(options.id + ':' + this.state.message);
    message.destinationName = this.state.subscribedTopic;
    client.send(message);
  }
unSubscribeTopic = () => {
    client.unsubscribe(this.state.subscribedTopic);
    this.setState({ subscribedTopic: '' });
  }

Ausführen des Projekts

Das vollständige RNMQTTDemo-Projekt befindet sich unter:

Erstellen Sie in der Projektstammumgebung zwei neue Terminalfenster und führen Sie die folgenden Befehle aus:

npx react-native start
npx react-native run-ios

Danach sehen Sie, wie die Anwendung im iOS-Emulator ausgeführt wird, wo die Client-ID oben wie folgt angezeigt wird:

MQTT reagieren nativ

MQTT-Verbindungstest

Wir werden die verwenden MQTT 5.0-Client-Tool – MQTT X um die entsprechenden Tests durchzuführen. Erstellen Sie eine Verbindung mit dem Namen „react-native-demo“, verwenden Sie die Standardwerte für alle Konfigurationselemente, klicken Sie auf die Schaltfläche „Verbinden“ und fügen Sie ein Abonnement mit dem Themennamen hinzu. testTopicnach einer erfolgreichen Verbindung, wie folgt:

MQTT-Client - MQTT X

Verbinden

Klicken Sie in der APP auf die Schaltfläche VERBINDEN, und die Schnittstelle wird wie unten angezeigt. Nach einer erfolgreichen Verbindung wird der Inhalt der ClientID-Zeile oben grün und zeigt damit an, dass der MQTT-Server erfolgreich verbunden wurde.

Reagieren Sie auf Native Connect MQTT

Geben Sie das Thema ein, das Sie abonnieren möchten. Hier nehmen wir testTopic als Beispiel. Klicken Sie dann auf die Schaltfläche ABONNIEREN. Die Benutzeroberfläche nach dem Abonnement wird wie folgt angezeigt:

Reagieren Sie auf natives MQTT-Abonnement

Veröffentlichen

Geben Sie den Inhalt der zu veröffentlichenden Nachricht ein, klicken Sie nach Abschluss der Eingabe auf die Schaltfläche VERÖFFENTLICHEN, und die unter dem aktuellen abonnierten Thema empfangenen Nachrichten werden unten aufgelistet, darunter die Nachricht mit schwarzem Hintergrund, die vom aktuellen Client gesendet wird . Die ID des aktuellen Clients ist id_67485, und die Schnittstelle wird wie folgt angezeigt:

Reagieren Sie auf native MQTT-Veröffentlichung

Gleichzeitig werden wir unter der React-Native-Demo-Verbindung von MQTT X auch einige Nachrichten an die veröffentlichen testTopic Thema. Die Nachrichten, die von der Client-ID id_67458 zum Thema veröffentlicht wurden, sind ebenfalls zu sehen, was wie folgt angezeigt wird:

MQTT-Client - MQTT X

Klicken Sie in der APP auf die Schaltfläche UNSCRIBE. Fahren Sie dann fort, um eine Nachricht mit zu posten { "msg": "hello test" } zum Thema testTopic auf MQTT X mit folgender Anzeige:

MQTT-Client - MQTT X

Nach der Abmeldung vom Thema testTopic wird für dieses Thema keine Nachricht von MQTT X empfangen { "msg": "hello test" }.

Reagieren Natives MQTT abbestellen

An diesem Punkt haben wir den Aufbau einer MQTT-App auf der iOS-Plattform mit React Native abgeschlossen und Funktionen wie das Verbinden des Clients mit dem MQTT-Server, das Abonnieren von Themen, das Senden und Empfangen von Nachrichten und das Abbestellen implementiert.

Mit React Native können Entwickler standardmäßige iOS-Plattformkomponenten verwenden und Apps entwickeln, die fast so gut funktionieren wie native Apps. Die nahtlose Cross-Plattform ermöglicht es Teams, schneller zu arbeiten, während Änderungen während der Entwicklung einfach gespeichert werden, wie die tatsächlichen Ergebnisse im iOS-Simulator zeigen. Effiziente, nahezu native Leistung, Hot Reloading und breite Community-Unterstützung machen React Native zur besten Wahl für viele Entwickler mobiler Apps. Durch die Kombination von React Native mit dem MQTT-Protokoll und dem MQTT-Cloud-Service können Benutzer auch verschiedene interessante und innovative Apps entwickeln.

Ursprünglich erschienen bei

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *