Bagaimana untuk membina aplikasi baris gilir mesej tinggi menggunakan React dan Kafka

Cara membina aplikasi baris gilir mesej melalui tinggi menggunakan React dan Kafka

Pengenalan:
Dengan perkembangan pesat Internet, pemprosesan data masa nyata menjadi semakin penting. Sebagai mekanisme komunikasi data, baris gilir mesej memainkan peranan penting dalam sistem teragih. Artikel ini akan memperkenalkan cara menggunakan React dan Kafka untuk membina aplikasi baris gilir mesej berkemampuan tinggi, menerangkan setiap langkah secara terperinci melalui contoh kod.

1. Fahami React:
React ialah perpustakaan JavaScript sumber terbuka untuk membina antara muka pengguna. Ia mempunyai prestasi tinggi, komponenisasi, kebolehgunaan semula dan kebolehselenggaraan, dan telah menjadi salah satu rangka kerja arus perdana untuk pembangunan bahagian hadapan. Dalam artikel ini, kami akan menggunakan React untuk membina antara muka hadapan bagi aplikasi baris gilir mesej kami.

2 Fahami Kafka:
Kafka ialah platform pemprosesan strim teragih, terutamanya digunakan untuk membina saluran data masa nyata berkemampuan tinggi dan kependaman rendah. Ia mempunyai kebolehskalaan yang tinggi dan toleransi kesalahan, menyokong pengembangan mendatar, dan boleh mengendalikan aliran data yang besar. Dalam artikel ini, kami akan menggunakan Kafka untuk membina bahagian belakang aplikasi baris gilir mesej kami.

3 Sediakan persekitaran pembangunan React:
Pertama, kita perlu menyediakan persekitaran pembangunan React. Sebelum melakukan ini, pastikan anda memasang Node.js dan npm. Seterusnya, ikuti langkah berikut:

1. Buka Terminal dan buat folder projek React baharu:

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

2. Mulakan aplikasi React menggunakan alat baris arahan create-react-app:

   npx create-react-app client
   cd client

3. Arahan mulakan berikut

   Gunakan pelayan pembangunan:

   npm start

4. Buka http://localhost:3000 dan anda akan melihat halaman percikan aplikasi React anda.

4. Sepadukan Kafka ke dalam aplikasi React:
Seterusnya, kami akan menyepadukan Kafka ke dalam aplikasi React. Sebelum melakukan ini, pastikan anda memasang dan menjalankan Apache Kafka.

1. Dalam direktori akar aplikasi React anda, pasang pustaka kafkajs menggunakan arahan berikut:

   npm install kafkajs

2. Buat fail bernama KafkaConsumer.js dalam folder src untuk menulis kod untuk pengguna Kafka. Kod sampel adalah seperti berikut:

   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);

3. Import komponen KafkaConsumer dalam fail src/App.js, dan kemudian panggil kod dalam komponen KafkaConsumer dalam fungsi kitaran hayat komponen. Kod sampel adalah seperti berikut:

   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;

5. Pengeluar menghantar mesej kepada Kafka:
Sekarang kami telah menyepadukan pengguna Kafka ke dalam aplikasi React, kami perlu mencipta pengeluar Kafka untuk menghantar mesej kepada Kafka.

1. Dalam direktori akar projek React, buat fail bernama producer.js untuk menulis kod untuk pengeluar Kafka. Kod sampel adalah seperti berikut:

   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);

2. Lakukan arahan berikut dalam terminal untuk menjalankan kod pengeluar:

   node producer.js

3. Dalam konsol penyemak imbas, anda akan melihat mesej daripada Kafka dicetak.

Ringkasan:
Artikel ini memperkenalkan cara menggunakan React dan Kafka untuk membina aplikasi baris gilir mesej berkemampuan tinggi. Dengan React, kami boleh membina antara muka pengguna dengan mudah dengan Kafka, kami boleh mencapai pemesejan berkemampuan tinggi. Kami menerangkan setiap langkah secara terperinci dengan contoh kod. Saya harap artikel ini akan membantu anda dan membolehkan anda menggunakan React dan Kafka dengan lebih baik untuk membina aplikasi baris gilir mesej yang berkuasa.

Atas ialah kandungan terperinci Bagaimana untuk membina aplikasi baris gilir mesej tinggi menggunakan React dan Kafka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!