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 공식 홈페이지에서 사용하시는 운영체제에 맞는 버전을 다운로드하신 후, 설치 가이드에 따라 설치 및 구성하실 수 있습니다. RabbitMQ를 시작한 후 웹 관리 인터페이스를 통해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!