React と RabbitMQ を使用して信頼性の高いメッセージングアプリを構築する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-09-28 20:24:22

オリジナル

1532 人が閲覧しました

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

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

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

RabbitMQ の概要:
RabbitMQ は、AMQP (Advanced Message Queuing Protocol) に基づくオープンソースのメッセージングミドルウェアです。信頼性の高いメッセージ配信メカニズムを提供し、メッセージのパブリッシュとサブスクリプション、メッセージのルーティングとフィルタリング、メッセージの永続化などの機能をサポートできます。 RabbitMQ は、メッセージの配信とルーティングにキューとスイッチを使用し、ポイントツーポイントモード、パブリッシュ/サブスクライブモード、ルーティングモードなどの複数のメッセージモードをサポートできます。
React の概要:
React は、ユーザーインターフェイスを構築するために Facebook によって開発された JavaScript ライブラリです。これは、ページを独立したコンポーネントに分割し、コンポーネントのネストと組み合わせを通じて複雑なユーザーインターフェイスを構築できるコンポーネント開発モデルに基づいています。 React は仮想 DOM (Virtual DOM) を使用して、ページのパフォーマンスとレンダリング速度を向上させます。
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>消息列表</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 は、メッセージミドルウェアとして、信頼性の高いメッセージ配信メカニズムを提供できます。この記事が、信頼できるメッセージングアプリの構築方法を理解するのに役立つことを願っています。

参考リンク：