So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ

Zitat:
Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu ermöglichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. RabbitMQ-Übersicht:
   RabbitMQ ist eine Open-Source-Messaging-Middleware, die auf AMQP (Advanced Message Queuing Protocol) basiert. Es kann einen zuverlässigen Nachrichtenübermittlungsmechanismus bereitstellen und Funktionen wie Nachrichtenveröffentlichung und -abonnement, Nachrichtenweiterleitung und -filterung sowie Nachrichtenpersistenz unterstützen. RabbitMQ verwendet Warteschlangen und Switches für die Nachrichtenübermittlung und -weiterleitung und kann mehrere Nachrichtenmodi unterstützen, z. B. den Punkt-zu-Punkt-Modus, den Publish-Subscribe-Modus und den Routing-Modus.
2. Einführung in React:
   React ist eine von Facebook entwickelte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es basiert auf dem Komponentenentwicklungsmodell, das die Seite in unabhängige Komponenten unterteilen und durch die Verschachtelung und Kombination von Komponenten komplexe Benutzeroberflächen erstellen kann. React verwendet virtuelles DOM (Virtual DOM), um die Seitenleistung und die Rendering-Geschwindigkeit zu verbessern.
3. Erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ:
   Um eine zuverlässige Messaging-Anwendung zu erstellen, verwenden wir React als Front-End-Framework und RabbitMQ als Back-End-Messaging-Middleware. Die spezifischen Schritte sind wie folgt:

Schritt 1: RabbitMQ installieren und konfigurieren:
Zuerst müssen Sie RabbitMQ installieren und starten. Sie können die für Ihr Betriebssystem geeignete Version von der offiziellen RabbitMQ-Website herunterladen und der Installationsanleitung folgen, um sie zu installieren und zu konfigurieren. Nach dem Start von RabbitMQ können Sie die Konfiguration von RabbitMQ verwalten und den Status von Nachrichten über die Webverwaltungsoberfläche überwachen.

Schritt 2: React-App erstellen:
Verwenden Sie den Befehl „create-react-app“, um eine neue React-App zu erstellen. Öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

npx create-react-app message-app

Dadurch wird ein neues Verzeichnis namens message-app erstellt und die generierten React-App-Dateien darin abgelegt.

Schritt 3: Abhängige Pakete installieren:
Wechseln Sie in das Message-App-Verzeichnis und installieren Sie abhängige Pakete wie amqplib und React-Router-Dom. Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:

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

Schritt 4: Erstellen Sie eine Nachrichtensendekomponente:
Erstellen Sie eine Datei mit dem Namen MessageSender.js im src-Verzeichnis und schreiben Sie den folgenden Code:

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

Schritt 5: Erstellen Sie eine Nachrichtenempfangskomponente :
Erstellen Sie eine Datei namens MessageList.js im src-Verzeichnis und schreiben Sie den folgenden Code:

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 id="消息列表">消息列表</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

Schritt 6: Routing und Komponentenrendering konfigurieren:
Öffnen Sie die Datei src/App.js und aktualisieren Sie den Code wie folgt:

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;

Schritt 7: Führen Sie die React-Anwendung aus:
Führen Sie im Verzeichnis „message-app“ den folgenden Befehl aus, um die React-Anwendung zu starten:

npm start

Öffnen Sie dann den Browser und besuchen Sie http://localhost:3000, um die gesendete Nachricht und die Nachrichtenliste anzuzeigen Seite.

Fazit:
In diesem Artikel wird erläutert, wie Sie mit React und RabbitMQ eine zuverlässige Messaging-Anwendung erstellen. Durch die Verwendung von React als Front-End-Framework können Sie eine Benutzeroberfläche erstellen, die hochgradig interaktiv ist und ein gutes Erlebnis bietet. RabbitMQ kann als Nachrichten-Middleware einen zuverlässigen Nachrichtenübermittlungsmechanismus bereitstellen. Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wie Sie eine zuverlässige Messaging-App erstellen.

Referenzlink:

• Offizielle Website von RabbitMQ: https://www.rabbitmq.com/
• Offizielle Website von React: https://reactjs.org/
• Offizielle Website von React Router: https://reactrouter.com /

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!