So erstellen Sie mit React und Kafka eine Nachrichtenwarteschlangenanwendung mit hohem Durchsatz

So erstellen Sie mit React und Kafka eine Nachrichtenwarteschlangenanwendung mit hohem Durchsatz.

Einführung:
Mit der rasanten Entwicklung des Internets wird die Datenverarbeitung in Echtzeit immer wichtiger. Als Datenkommunikationsmechanismus spielt die Nachrichtenwarteschlange eine wichtige Rolle in verteilten Systemen. In diesem Artikel wird die Verwendung von React und Kafka zum Erstellen einer Nachrichtenwarteschlangenanwendung mit hohem Durchsatz vorgestellt und jeder Schritt anhand von Codebeispielen ausführlich erläutert.

1. React verstehen:
React ist eine Open-Source-JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es zeichnet sich durch hohe Leistung, Komponentisierung, Wiederverwendbarkeit und Wartbarkeit aus und hat sich zu einem der Mainstream-Frameworks für die Front-End-Entwicklung entwickelt. In diesem Artikel verwenden wir React, um die Front-End-Schnittstelle unserer Nachrichtenwarteschlangenanwendung zu erstellen.

2. Kafka verstehen:
Kafka ist eine verteilte Streaming-Verarbeitungsplattform, die hauptsächlich zum Aufbau von Echtzeit-Datenpipelines mit hohem Durchsatz und geringer Latenz verwendet wird. Es verfügt über eine hohe Skalierbarkeit und Fehlertoleranz, unterstützt die horizontale Erweiterung und kann große Datenströme verarbeiten. In diesem Artikel verwenden wir Kafka, um das Backend unserer Nachrichtenwarteschlangenanwendung zu erstellen.

3. Richten Sie eine React-Entwicklungsumgebung ein:
Zuerst müssen wir eine React-Entwicklungsumgebung einrichten. Bevor Sie dies tun, stellen Sie sicher, dass Node.js und npm installiert sind. Befolgen Sie als Nächstes diese Schritte:

1. Öffnen Sie Terminal und erstellen Sie einen neuen React-Projektordner:

   mkdir message-queue-app
   cd message-queue-app

   Nach dem Login kopieren

2. Initialisieren Sie die React-Anwendung mit dem Befehlszeilentool „create-react-app“:

   npx create-react-app client
   cd client

   Nach dem Login kopieren

3. Verwenden Sie den folgenden Befehl der Entwicklungsserver:

   npm start

   Nach dem Login kopieren
4. Öffnen Sie http://localhost:3000 und Sie sehen die Splash-Seite Ihrer React-Anwendung.

4. Kafka in die React-Anwendung integrieren:
Als nächstes werden wir Kafka in die React-Anwendung integrieren. Bevor Sie dies tun, stellen Sie sicher, dass Apache Kafka installiert ist und ausgeführt wird.

1. Installieren Sie im Stammverzeichnis Ihrer React-Anwendung die kafkajs-Bibliothek mit dem folgenden Befehl:

   npm install kafkajs

   Nach dem Login kopieren

2. Erstellen Sie eine Datei namens KafkaConsumer.js im Ordner src, um den Code für den Kafka-Consumer zu schreiben. Der Beispielcode lautet wie folgt:

   const { Kafka } = require('kafkajs');
   
   const kafka = new Kafka({
     clientId: 'message-queue-app',
     brokers: ['localhost:9092']
   });
   
   const consumer = kafka.consumer({ groupId: 'message-queue-app-group' });
   
   const run = async () => {
     await consumer.connect();
     await consumer.subscribe({ topic: 'messages', fromBeginning: true });
   
     await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      console.log({
        value: message.value.toString()
      });
    }
     });
   
     await consumer.disconnect();
   };
   
   run().catch(console.error);

   Nach dem Login kopieren

3. Importieren Sie die KafkaConsumer-Komponente in der Datei src/App.js und rufen Sie dann den Code in der KafkaConsumer-Komponente in der Lebenszyklusfunktion der Komponente auf. Der Beispielcode lautet wie folgt:

   import React, { Component } from 'react';
   import KafkaConsumer from './KafkaConsumer';
   
   class App extends Component {
     componentDidMount() {
    KafkaConsumer();
     }
   
     render() {
    return (
      <div className="App">
        <h1>Message Queue App</h1>
      </div>
    );
     }
   }
   
   export default App;

   Nach dem Login kopieren

5. Der Produzent sendet Nachrichten an Kafka:
Da wir nun den Kafka-Konsumenten in die React-Anwendung integriert haben, müssen wir einen Kafka-Produzenten erstellen, um Nachrichten an Kafka zu senden.

1. Erstellen Sie im Stammverzeichnis des React-Projekts eine Datei mit dem Namen „produzent.js“, um den Code für den Kafka-Produzenten zu schreiben. Der Beispielcode lautet wie folgt:

   const { Kafka } = require('kafkajs');
   
   const kafka = new Kafka({
     clientId: 'message-queue-app-producer',
     brokers: ['localhost:9092']
   });
   
   const producer = kafka.producer();
   
   const run = async () => {
     await producer.connect();
   
     const message = {
    value: 'Hello Kafka!'
     };
   
     await producer.send({
    topic: 'messages',
    messages: [message]
     });
   
     await producer.disconnect();
   };
   
   run().catch(console.error);

   Nach dem Login kopieren

2. Führen Sie den folgenden Befehl im Terminal aus, um den Producer-Code auszuführen:

   node producer.js

   Nach dem Login kopieren
3. In der Konsole des Browsers sehen Sie die Nachrichten von Kafka ausgedruckt.

Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie mit React und Kafka eine Nachrichtenwarteschlangenanwendung mit hohem Durchsatz erstellen. Mit React können wir ganz einfach Benutzeroberflächen erstellen; mit Kafka können wir Nachrichten mit hohem Durchsatz erreichen. Wir erklären jeden Schritt ausführlich anhand von Codebeispielen. Ich hoffe, dass dieser Artikel für Sie hilfreich ist und es Ihnen ermöglicht, React und Kafka besser zum Erstellen leistungsstarker Nachrichtenwarteschlangenanwendungen zu nutzen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit React und Kafka eine Nachrichtenwarteschlangenanwendung mit hohem Durchsatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!