So erstellen Sie skalierbare Big-Data-Anwendungen mit React und Hadoop

So erstellen Sie skalierbare Big-Data-Anwendungen mit React und Hadoop

Big-Data-Anwendungen sind in allen Lebensbereichen zu einem allgemeinen Bedarf geworden. Hadoop ist eines der beliebtesten Tools, wenn es um die Verarbeitung riesiger Datenmengen geht. React ist eine beliebte JavaScript-Bibliothek zum Erstellen moderner Benutzeroberflächen. In diesem Artikel wird anhand spezifischer Codebeispiele vorgestellt, wie man skalierbare Big-Data-Anwendungen durch die Kombination von React und Hadoop erstellt.

1. Erstellen Sie eine React-Frontend-Anwendung.

Verwenden Sie zunächst das Tool „Create-React-App“, um eine React-Frontend-Anwendung zu erstellen. Führen Sie den folgenden Befehl im Terminal aus:

npx create-react-app my-app
cd my-app
npm start

Dadurch wird eine React-App namens my-app erstellt und gestartet.

2. Backend-Dienst erstellen

Als nächstes müssen wir einen Backend-Dienst für die Kommunikation mit Hadoop erstellen. Erstellen Sie im Stammverzeichnis des Projekts einen Ordner namens server. Erstellen Sie dann eine Datei namens index.js im Serverordner und fügen Sie der Datei den folgenden Code hinzu:

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  // 在此处编写与Hadoop通信的代码
});

const port = 5000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Dadurch wird ein einfacher Express-Server erstellt und in /api/data</ hinzugefügt. Eine GET-Schnittstelle wird unter bereitgestellt Code> Pfad. In dieser Schnittstelle können wir Code schreiben, um mit Hadoop zu kommunizieren. <code>/api/data路径下暴露了一个GET接口。在该接口中，我们可以编写与Hadoop通信的代码。

3. 与Hadoop通信

为了实现与Hadoop通信，可以使用Hadoop的官方JavaScript库hadoop-connector。使用以下命令将它添加到项目中：

npm install hadoop-connector

然后，在index.js文件中添加以下代码：

const HadoopConnector = require('hadoop-connector');

app.get('/api/data', (req, res) => {
  const hc = new HadoopConnector({
    host: 'hadoop-host',
    port: 50070,
    user: 'hadoop-user',
    namenodePath: '/webhdfs/v1'
  });

  const inputStream = hc.getReadStream('/path/to/hadoop/data');

  inputStream.on('data', data => {
    // 处理数据
  });

  inputStream.on('end', () => {
    // 数据处理完毕
    res.send('Data processed successfully');
  });

  inputStream.on('error', error => {
    // 出错处理
    res.status(500).send('An error occurred');
  });
});

在上面的代码中，我们创建了一个HadoopConnector实例，并使用getReadStream方法从Hadoop集群中获取数据流。在数据流上，我们可以设置事件监听器来处理数据。在此示例中，我们仅记录了"data"事件、"end"事件和"error"事件。在"data"事件中，我们可以对数据进行处理，而在"end"事件中，我们可以发送响应到前端应用。

4. 配置前端应用以获取数据

要在前端应用中获取数据，我们可以使用React的useEffect钩子来在组件加载时获取数据。在App.js文件中，添加以下代码：

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2 id="item-title">{item.title}</h2>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

上面的代码中，我们使用fetch函数来获取后端API提供的数据，并将其设置为组件的状态。然后，我们可以在组件中使用该状态来渲染数据。

5. 运行应用

最后一步是运行应用。在终端中，分别在my-app文件夹和server文件夹中运行以下命令：

cd my-app
npm start

cd server
node index.js

这样，React前端应用和后端服务将会启动，并且可以通过访问http://localhost:3000

Kommunikation mit Hadoop

Um mit Hadoop zu kommunizieren, können Sie Hadoops offizielle JavaScript-Bibliothek Hadoop-Connector verwenden. Fügen Sie es dem Projekt mit dem folgenden Befehl hinzu:

rrreee🎜 Fügen Sie dann den folgenden Code in die Datei index.js ein: 🎜rrreee🎜 Im obigen Code erstellen wir eine HadoopConnector-Instanz und verwenden die Methode getReadStream um den Datenstrom vom Hadoop-Cluster abzurufen. Im Datenstrom können wir Ereignis-Listener einrichten, um Daten zu verarbeiten. In diesem Beispiel haben wir nur das Ereignis „data“, das Ereignis „end“ und das Ereignis „error“ protokolliert. Im „Data“-Ereignis können wir die Daten verarbeiten und im „End“-Ereignis können wir die Antwort an die Front-End-Anwendung senden. 🎜
🎜Konfigurieren der Front-End-Anwendung zum Abrufen von Daten 🎜🎜🎜Um Daten in der Front-End-Anwendung abzurufen, können wir den useEffect-Hook von React verwenden, um die Daten wann abzurufen Die Komponente wird geladen. Fügen Sie in der App.js-Datei den folgenden Code hinzu: 🎜rrreee🎜Im obigen Code verwenden wir die Funktion fetch, um die von der Backend-API bereitgestellten Daten abzurufen und sie als Status der Komponente festzulegen . Anschließend können wir diesen Zustand in der Komponente zum Rendern der Daten verwenden. 🎜
🎜Führen Sie die App aus🎜🎜🎜Der letzte Schritt besteht darin, die App auszuführen. Führen Sie im Terminal die folgenden Befehle im Ordner my-app bzw. im Serverordner aus: 🎜rrreeerrreee🎜 Auf diese Weise werden die React-Front-End-Anwendung und der Back-End-Dienst gestartet und können durch Zugriff auf aufgerufen werden http://localhost:3000 , um die Anwendungsoberfläche anzuzeigen. 🎜🎜Zusammenfassung🎜🎜Durch die Kombination von React und Hadoop können wir skalierbare Big-Data-Anwendungen erstellen. In diesem Artikel erfahren Sie, wie Sie eine React-Front-End-Anwendung erstellen, einen Back-End-Dienst erstellen, mit Hadoop kommunizieren und die Front-End-Anwendung zum Abrufen von Daten konfigurieren. Durch diese Schritte können wir die Leistungsfähigkeit von React und Hadoop nutzen, um große Datenmengen zu verarbeiten und darzustellen. Ich hoffe, dieser Artikel hilft Ihnen beim Erstellen von Big-Data-Anwendungen! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie skalierbare Big-Data-Anwendungen mit React und Hadoop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!