Comment créer une application de messagerie fiable avec React et RabbitMQ

Comment créer une application de messagerie fiable avec React et RabbitMQ

Citation :
Les applications modernes doivent prendre en charge une messagerie fiable pour activer des fonctionnalités telles que les mises à jour en temps réel et la synchronisation des données. React est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur, tandis que RabbitMQ est un middleware de messagerie fiable. Cet article explique comment combiner React et RabbitMQ pour créer une application de messagerie fiable et fournit des exemples de code spécifiques.

1. Présentation de RabbitMQ :
   RabbitMQ est un middleware de messagerie open source basé sur AMQP (Advanced Message Queuing Protocol). Il peut fournir un mécanisme de livraison de messages fiable et prendre en charge des fonctions telles que la publication et l'abonnement des messages, le routage et le filtrage des messages et la persistance des messages. RabbitMQ utilise des files d'attente et des commutateurs pour la livraison et le routage des messages, et peut prendre en charge plusieurs modes de message, tels que le mode point à point, le mode publication-abonnement et le mode routage.
2. Introduction à React :
   React est une bibliothèque JavaScript développée par Facebook pour créer des interfaces utilisateur. Il est basé sur le modèle de développement de composants, qui peut diviser la page en composants indépendants et créer des interfaces utilisateur complexes grâce à l'imbrication et à la combinaison de composants. React utilise le DOM virtuel (Virtual DOM) pour améliorer les performances des pages et la vitesse de rendu.
3. Créez une application de messagerie fiable à l'aide de React et RabbitMQ :
   Pour créer une application de messagerie fiable, nous utiliserons React comme framework front-end et RabbitMQ comme middleware de messagerie back-end. Les étapes spécifiques sont les suivantes :

Étape 1 : Installer et configurer RabbitMQ :
Tout d'abord, vous devez installer RabbitMQ et le démarrer. Vous pouvez télécharger la version adaptée à votre système d'exploitation sur le site officiel de RabbitMQ et suivre le guide d'installation pour l'installer et le configurer. Après avoir démarré RabbitMQ, vous pouvez gérer la configuration de RabbitMQ et surveiller l'état des messages via l'interface de gestion Web.

Étape 2 : Créer une application React :
Utilisez la commande create-react-app pour créer une nouvelle application React. Ouvrez un terminal et exécutez la commande suivante :

npx create-react-app message-app

Cela créera un nouveau répertoire appelé message-app et y placera les fichiers de l'application React générés.

Étape 3 : Installez les packages dépendants :
Basculez vers le répertoire message-app et installez les packages dépendants tels que amqplib et réagissez-router-dom. Ouvrez le terminal et exécutez la commande suivante :

cd message-app
npm install amqplib react-router-dom

Étape 4 : Créez un composant d'envoi de message :
Créez un fichier nommé MessageSender.js dans le répertoire src et écrivez le code suivant :

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

export default function MessageSender() {
  const [message, setMessage] = useState('');
  const history = useHistory();

  const sendMessage = async () => {
    try {
      // 连接到RabbitMQ服务器
      const conn = await require('amqplib').connect('amqp://localhost');
      const ch = await conn.createChannel();

      // 定义消息发送到的队列名
      const queue = 'message_queue';

      // 发送消息
      await ch.assertQueue(queue, { durable: false });
      await ch.sendToQueue(queue, Buffer.from(message));

      // 关闭连接
      await ch.close();
      await conn.close();

      // 跳转到消息列表页
      history.push('/messages');
    } catch (error) {
      console.error('发送消息失败:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>发送消息</button>
    </div>
  );
}

Étape 5 : Créez un composant de réception de message :
Créez un fichier appelé MessageList.js dans le répertoire src et écrivez le code suivant :

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

export default function MessageList() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const fetchMessages = async () => {
      try {
        // 连接到RabbitMQ服务器
        const conn = await require('amqplib').connect('amqp://localhost');
        const ch = await conn.createChannel();

        // 定义消息接收的队列名
        const queue = 'message_queue';

        // 从队列中获取消息
        await ch.assertQueue(queue, { durable: false });
        await ch.consume(queue, (msg) => {
          setMessages((prevMessages) => [...prevMessages, msg.content.toString()]);
        });

        // 关闭连接
        await ch.close();
        await conn.close();
      } catch (error) {
        console.error('接收消息失败:', error);
      }
    };

    fetchMessages();
  }, []);

  return (
    <div>
      <h2>消息列表</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

Étape 6 : Configurez le routage et le rendu des composants :
Ouvrez le fichier src/App.js et mettez à jour le code comme suit :

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import MessageSender from './MessageSender';
import MessageList from './MessageList';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">发送消息</Link>
            </li>
            <li>
              <Link to="/messages">消息列表</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <MessageSender />
          </Route>
          <Route path="/messages">
            <MessageList />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Étape 7 : Exécutez l'application React :
Dans le répertoire message-app, exécutez la commande suivante pour démarrer l'application React :

npm start

Ouvrez ensuite le navigateur et visitez http://localhost:3000 pour voir le message envoyé et la liste des messages .

Conclusion :
Cet article explique comment créer une application de messagerie fiable à l'aide de React et RabbitMQ. En utilisant React comme framework front-end, vous pouvez créer une interface utilisateur hautement interactive et offrant une bonne expérience. RabbitMQ, en tant que middleware de messages, peut fournir un mécanisme fiable de livraison de messages. J'espère que cet article vous aidera à comprendre comment créer une application de messagerie fiable.

Lien de référence :

• Site officiel de RabbitMQ : https://www.rabbitmq.com/
• Site officiel de React : https://reactjs.org/
• Site officiel de React Router : https://reactrouter.com /

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!