React と Apache Kafka を使用してリアルタイムデータ処理アプリケーションを構築する方法-jsチュートリアル-php.cn

React と Apache Kafka を使用してリアルタイムデータ処理アプリケーションを構築する方法

王林

リリース： 2023-09-27 14:25:02

オリジナル

1053 人が閲覧しました

如何利用React和Apache Kafka构建实时数据处理应用

React と Apache Kafka を使用してリアルタイムデータ処理アプリケーションを構築する方法

はじめに:
ビッグデータとリアルタイムデータ処理の台頭とともに、リアルタイムデータ処理アプリケーションの構築は、多くの開発者の追求となっています。人気のあるフロントエンドフレームワークである React と、高性能分散メッセージングシステムである Apache Kafka を組み合わせることで、リアルタイムデータ処理アプリケーションを構築できます。この記事では、React と Apache Kafka を使用してリアルタイムデータ処理アプリケーションを構築する方法を紹介し、具体的なコード例を示します。

1. React フレームワークの概要
React は、Facebook によってオープンソース化された JavaScript ライブラリであり、ユーザーインターフェイスの構築に重点を置いています。 React はコンポーネントベースの開発手法を使用して UI を独立した再利用可能な構造に分割し、コードの保守性とテスト性を向上させます。仮想 DOM メカニズムに基づいて、React はユーザーインターフェイスを効率的に更新してレンダリングできます。

2. Apache Kafka の概要
Apache Kafka は、分散型の高性能メッセージングシステムです。 Kafka は、高いスループット、フォールトトレランス、およびスケーラビリティを備えて 1 秒あたりの大規模なデータストリームを処理できるように設計されています。 Kafka の中核となる概念はパブリッシュ/サブスクライブモデルです。このモデルでは、プロデューサーは特定のトピックにメッセージをパブリッシュし、コンシューマーはこれらのトピックをサブスクライブすることでメッセージを受信します。

3. React と Kafka を使用してリアルタイムデータ処理アプリケーションを構築する手順

React と Kafka のインストール
最初に、React と Kafka の実行環境をインストールする必要があります。機械の上で。 React は npm を使用してインストールできますが、Kafka は Zookeeper と Kafka サーバーをダウンロードして構成する必要があります。
React プロジェクトの作成
React スキャフォールディングツール create-react-app を使用して、新しい React プロジェクトを作成します。コマンドラインで次のコマンドを実行します。
```
npx create-react-app my-app
cd my-app
```
ログイン後にコピー
Kafka ライブラリのインストール
Kafka サーバーと通信するために、npm を介して Kafka 関連のライブラリをインストールします。コマンドラインで次のコマンドを実行します。
```
npm install kafka-node
```
ログイン後にコピー

Kafka プロデューサーの作成
Kafka プロデューサーを作成し、指定されたトピックにデータを送信するために、React プロジェクトに kafkaProducer.js ファイルを作成します。。以下は簡単なコード例です:

const kafka = require('kafka-node');

const Producer = kafka.Producer;
const client = new kafka.KafkaClient();
const producer = new Producer(client);

producer.on('ready', () => {
  console.log('Kafka Producer is ready');
});

producer.on('error', (err) => {
  console.error('Kafka Producer Error:', err);
});

const sendMessage = (topic, message) => {
  const payload = [
 { topic: topic, messages: message }
  ];
  producer.send(payload, (err, data) => {
 console.log('Kafka Producer sent:', data);
  });
};

module.exports = sendMessage;

ログイン後にコピー

Kafka Consumer の作成
Kafka コンシューマーを作成し、指定されたトピックからのデータを消費するための KafkaConsumer.js ファイルを React プロジェクトに作成します。データ。以下は簡単なコード例です。

const kafka = require('kafka-node');

const Consumer = kafka.Consumer;
const client = new kafka.KafkaClient();
const consumer = new Consumer(
  client,
  [{ topic: 'my-topic' }],
  { autoCommit: false }
);

consumer.on('message', (message) => {
  console.log('Kafka Consumer received:', message);
});

consumer.on('error', (err) => {
  console.error('Kafka Consumer Error:', err);
});

module.exports = consumer;

ログイン後にコピー

React コンポーネントでの Kafka の使用
React コンポーネントで上記の Kafka プロデューサとコンシューマを使用します。プロデューサはコンポーネントのライフサイクルメソッドで呼び出してデータを Kafka サーバーに送信でき、コンシューマを使用して DOM にレンダリングする前にデータを取得できます。以下は簡単なコード例です:
```
import React, { Component } from 'react';
import sendMessage from './kafkaProducer';
import consumer from './kafkaConsumer';

class KafkaExample extends Component {
  componentDidMount() {
 // 发送数据到Kafka
 sendMessage('my-topic', 'Hello Kafka!');

 // 获取Kafka数据
 consumer.on('message', (message) => {
   console.log('Received Kafka message:', message);
 });
  }

  render() {
 return (
   <div>
     <h1>Kafka Example</h1>
   </div>
 );
  }
}

export default KafkaExample;
```
ログイン後にコピー
上記のコードでは、コンポーネントが DOM にレンダリングされた後に、componentDidMount メソッドが自動的に呼び出されます。ここでは、最初のメッセージを送信し、コンシューマーを通じてデータを取得します。
React アプリケーションの実行
最後に、次のコマンドを実行して、React アプリケーションをローカルで起動します:
```
npm start
```
ログイン後にコピー

IV. 概要
この記事では、React と Apache Kafka を使用してリアルタイムデータ処理アプリケーションを構築する方法を紹介します。まずはReactとKafkaの特徴や機能について簡単に紹介しました。次に、React プロジェクトを作成し、Kafka 関連ライブラリを使用してプロデューサーとコンシューマーを作成するための具体的な手順を示します。最後に、React コンポーネントでこれらの機能を使用してリアルタイムデータ処理を実現する方法を示します。これらのサンプルコードを通じて、読者は React と Kafka を組み合わせたアプリケーションをさらに理解して実践し、より強力なリアルタイムデータ処理アプリケーションを構築できます。

参考資料: