Comment créer des applications Big Data évolutives avec React et Hadoop

Comment créer des applications Big Data évolutives à l'aide de React et Hadoop

Les applications Big Data sont devenues un besoin commun dans tous les horizons. Hadoop est l'un des outils les plus populaires lorsqu'il s'agit de traiter d'énormes quantités de données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur modernes. Cet article explique comment créer des applications Big Data évolutives en combinant React et Hadoop, avec des exemples de code spécifiques.

1. Créez une application frontale React

Tout d'abord, utilisez l'outil create-react-app pour créer une application frontale React. Exécutez la commande suivante dans le terminal :

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

Cela créera et démarrera une application React appelée my-app.

2. Créer un service backend

Ensuite, nous devons créer un service backend pour communiquer avec Hadoop. Dans le répertoire racine du projet, créez un dossier appelé serveur. Créez ensuite un fichier appelé index.js dans le dossier du serveur et ajoutez le code suivant au fichier :

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

Cela crée un simple serveur Express et l'ajoute dans /api/data Une interface GET est exposée sous le code> chemin. Dans cette interface, nous pouvons écrire du code pour communiquer avec Hadoop. <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>{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

Communiquer avec Hadoop

Afin de communiquer avec Hadoop, vous pouvez utiliser la bibliothèque JavaScript officielle de Hadoop, hadoop-connector. Ajoutez-le au projet à l'aide de la commande suivante :

rrreee🎜 Ensuite, ajoutez le code suivant dans le fichier index.js : 🎜rrreee🎜 Dans le code ci-dessus, nous créons une instance HadoopConnector et utilisons getReadStreamMethod pour obtenir le flux de données du cluster Hadoop. Sur le flux de données, nous pouvons configurer des écouteurs d'événements pour traiter les données. Dans cet exemple, nous avons uniquement enregistré l'événement « data », l'événement « end » et l'événement « error ». Dans l'événement « data », nous pouvons traiter les données, et dans l'événement « end », nous pouvons envoyer la réponse à l'application frontale. 🎜
🎜Configurer l'application front-end pour obtenir des données 🎜🎜🎜Pour obtenir des données dans l'application front-end, nous pouvons utiliser le hook useEffect de React pour obtenir les données lorsque le composant se charge. Dans le fichier App.js, ajoutez le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction fetch pour obtenir les données fournies par l'API backend et les définir comme état du composant. . Nous pouvons ensuite utiliser cet état dans le composant pour restituer les données. 🎜
🎜Exécutez l'application🎜🎜🎜La dernière étape consiste à exécuter l'application. Dans le terminal, exécutez les commandes suivantes respectivement dans le dossier my-app et le dossier serveur : 🎜rrreeerrreee🎜 De cette façon, l'application frontale et le service back-end React seront démarrés et accessibles en accédant à http://localhost:3000 pour afficher l'interface de l'application. 🎜🎜Résumé🎜🎜En combinant React et Hadoop, nous pouvons créer des applications Big Data évolutives. Cet article explique comment créer une application frontale React, créer un service back-end, communiquer avec Hadoop et configurer l'application frontale pour obtenir des données. Grâce à ces étapes, nous pouvons exploiter la puissance de React et Hadoop pour traiter et présenter le Big Data. J'espère que cet article vous aidera à créer des applications Big Data ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!