React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法

React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法

はじめに:
最新のアプリケーションは、リアルタイム更新とデータ同期のために信頼性の高いメッセージングをサポートする必要があります。その他の機能。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。

1. RabbitMQ の概要:
   RabbitMQ は、AMQP (Advanced Message Queuing Protocol) に基づくオープン ソースのメッセージング ミドルウェアです。信頼性の高いメッセージ配信メカニズムを提供し、メッセージのパブリッシュとサブスクリプション、メッセージのルーティングとフィルタリング、メッセージの永続化などの機能をサポートできます。 RabbitMQ は、メッセージの配信とルーティングにキューとスイッチを使用し、ポイントツーポイント モード、パブリッシュ/サブスクライブ モード、ルーティング モードなどの複数のメッセージ モードをサポートできます。
2. React の概要:
   React は、ユーザー インターフェイスを構築するために Facebook によって開発された JavaScript ライブラリです。これは、ページを独立したコンポーネントに分割し、コンポーネントのネストと組み合わせを通じて複雑なユーザー インターフェイスを構築できるコンポーネント開発モデルに基づいています。 React は仮想 DOM (Virtual DOM) を使用して、ページのパフォーマンスとレンダリング速度を向上させます。
3. React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する:
   信頼性の高いメッセージング アプリケーションを構築するには、フロントエンド フレームワークとして React を使用し、バックエンド メッセージング ミドルウェアとして RabbitMQ を使用します。具体的な手順は次のとおりです。

ステップ 1: RabbitMQ のインストールと構成:
まず、RabbitMQ をインストールして起動する必要があります。 RabbitMQ 公式 Web サイトからオペレーティング システムに適したバージョンをダウンロードし、インストール ガイドに従ってインストールして構成できます。 RabbitMQ を起動した後、Web 管理インターフェイスを通じて RabbitMQ の構成を管理し、メッセージのステータスを監視できます。

ステップ 2: React アプリケーションを作成する:
create-react-app コマンドを使用して、新しい React アプリケーションを作成します。ターミナルを開いて次のコマンドを実行します:

npx create-react-app message-app

これにより、message-app という新しいディレクトリが作成され、生成された React アプリ ファイルがその中に配置されます。

ステップ 3: 依存パッケージをインストールする:
message-app ディレクトリに切り替えて、amqplib や React-router-dom などの依存パッケージをインストールします。ターミナルを開き、次のコマンドを実行します。

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

ステップ 4: メッセージ送信コンポーネントを作成します。
src ディレクトリに MessageSender.js という名前のファイルを作成し、次のコードを記述します。

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

ステップ 5: メッセージ受信コンポーネントを作成します:
src ディレクトリに MessageList.js という名前のファイルを作成し、次のコードを記述します:

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

ステップ 6: ルーティングとコンポーネントのレンダリングを構成します:
src/App.js ファイルを開き、コードを次のように更新します。

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;

ステップ 7: React アプリを実行します。
message-app ディレクトリで、次のコマンドを実行して React アプリを起動します。

npm start

次に、ブラウザを開いて http://localhost:3000 にアクセスし、メッセージおよびメッセージ リストを送信するためのページを表示します。

結論:
この記事では、React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法を紹介します。 React をフロントエンド フレームワークとして使用すると、対話性が高く、優れたエクスペリエンスを備えたユーザー インターフェイスを構築できます。 RabbitMQ は、メッセージ ミドルウェアとして、信頼性の高いメッセージ配信メカニズムを提供できます。この記事が、信頼できるメッセージング アプリの構築方法を理解するのに役立つことを願っています。

参考リンク：

• RabbitMQ公式サイト：https://www.rabbitmq.com/
• React公式サイト：https://reactjs.org/
• React Router 公式ウェブサイト: https://reactrouter.com/

以上がReact と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。