So verwenden Sie MQTT im React-Projekt

React (auch bekannt als React.js oder ReactJS) ist eine Open-Source-Front-End-JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen oder UI-Komponenten. Es wird von Facebook und einer Community aus einzelnen Entwicklern und Unternehmen gepflegt. React kann als Grundlage für die Entwicklung von Single-Page- oder mobilen Anwendungen verwendet werden. React befasst sich jedoch nur mit dem Rendern von Daten in das DOM, und daher erfordert das Erstellen von React-Anwendungen normalerweise die Verwendung zusätzlicher Bibliotheken für die Zustandsverwaltung und das Routing. Redux und React Router sind entsprechende Beispiele für solche Bibliotheken.

Dieser Artikel stellt hauptsächlich die Verwendung vor MQTT im React-Projekt zur Implementierung von Connect, Subscribe, Messaging und Unsubscribe usw. zwischen dem Client und dem MQTT-Broker.

Projektinitialisierung

Neues Projekt

Referenzlink:

Erstellen neuer React-Anwendungen mit Create React App

npx create-react-app react-mqtt-test

Wenn Sie TypeScript verwenden müssen, fügen Sie einfach den Typescript-Parameter –template am Ende der Befehlszeile hinzu

npx create-react-app react-mqtt-test --template typescript

Fügen Sie dann die im React-Projekt erforderliche TypeScript-Typbibliothek hinzu

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

Die Verwendung von TypeScript steht nicht im Mittelpunkt der Beispiele in diesem Artikel, aber wenn Sie es verwenden möchten, können Sie TypeScript-Funktionen hinzufügen, nachdem Sie sich auf das Erstellungsbeispiel und die vollständigen Codebeispiele bezogen haben.

Über CDN importieren

<script crossorigin src="
<script crossorigin src="

Installieren Sie die MQTT-Clientbibliothek

Da React eine JavaScript-Bibliothek ist, kann sie verwendet werden MQTT.js als MQTT-Client-Bibliothek.

Die folgenden Methoden 2, 3 sind besser geeignet, um von React erstellte Projekte über CDN-Links zu referenzieren.

Installation über die Kommandozeile, entweder mit dem npm- oder dem Garn-Befehl (dem einen oder dem anderen)

npm install mqtt --save
# or
yarn add mqtt

Über CDN importieren

<script src="

Laden Sie sie auf die lokale herunter und importieren Sie sie dann unter Verwendung des relativen Pfads

<script src="/your/path/to/mqtt.min.js"></script>

Die Verwendung von MQTT

Verbinden Sie den MQTT-Broker

Dieser Artikel wird verwendet der kostenlose öffentliche MQTT-Broker die von EMQX bereitgestellt wird. Dieser Dienst basiert auf EMQX MQTT-IoT-Cloud-Plattform erschaffen. Die Serverzugriffsinformationen lauten wie folgt.

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

Verbinden

const [client, setClient] = useState(null);
const mqttConnect = (host, mqttOption) => {
  setConnectStatus('Connecting');
  setClient(mqtt.connect(host, mqttOption));
};
useEffect(() => {
  if (client) {
    console.log(client)
    client.on('connect', () => {
      setConnectStatus('Connected');
    });
    client.on('error', (err) => {
      console.error('Connection error: ', err);
      client.end();
    });
    client.on('reconnect', () => {
      setConnectStatus('Reconnecting');
    });
    client.on('message', (topic, message) => {
      const payload = { topic, message: message.toString() };
      setPayload(payload);
    });
  }
}, [client]);
const mqttSub = (subscription) => {
  if (client) {
    const { topic, qos } = subscription;
    client.subscribe(topic, { qos }, (error) => {
      if (error) {
        console.log('Subscribe to topics error', error)
        return
      }
      setIsSub(true)
    });
  }
};
const mqttUnSub = (subscription) => {
  if (client) {
    const { topic } = subscription;
    client.unsubscribe(topic, error => {
      if (error) {
        console.log('Unsubscribe error', error)
        return
      }
      setIsSub(false);
    });
  }
};

Veröffentlichen

const mqttPublish = (context) => {
  if (client) {
    const { topic, qos, payload } = context;
    client.publish(topic, payload, { qos }, error => {
      if (error) {
        console.log('Publish error: ', error);
      }
    });
  }
}

Trennen

const mqttDisconnect = () => {
  if (client) {
    client.end(() => {
      setConnectStatus('Connect');
    });
  }
}

Prüfen

Wir haben die folgende einfache Browseranwendung mit React geschrieben, mit der Möglichkeit, Verbindungen herzustellen, Themen zu abonnieren, Nachrichten zu senden und zu empfangen, sich abzumelden und die Verbindung zu trennen.

Der vollständige Projektbeispielcode: https://github.com/emqx/MQTT-Client-Examples/tree/master/mqtt-client-React

reagierenmqttpage.png

Verwenden MQTT 5.0-Client-Tool – MQTT X als ein weiterer Client, um das Senden und Empfangen von Nachrichten zu testen.

reagierenmqttx.png

Sie können sehen, dass MQTT X Nachrichten von der Browserseite normal empfangen kann, wie Sie sehen können, wenn Sie eine Nachricht an das Thema mit MQTT X senden.

Reactmqtttest.png

Zusammenfassend haben wir die Erstellung einer MQTT-Verbindung im React-Projekt implementiert und das Abonnieren, Senden und Empfangen von Nachrichten, Abmelden und Trennen zwischen dem Client und dem MQTT-Broker simuliert.

In diesem Artikel verwenden wir React v16.13.1, daher wird die Hook-Komponentenfunktion als Beispielcode zur Demonstration verwendet, oder Sie können bei Bedarf auf die ClassMqtt-Komponente im vollständigen Beispielcode verweisen, um die Klassenkomponentenfunktion für die Projekterstellung zu verwenden .

Ursprünglich erschienen bei

Similar Posts

Leave a Reply

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