Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ

Petikan:
Aplikasi moden perlu menyokong pemesejan yang boleh dipercayai untuk membolehkan ciri seperti kemas kini masa nyata dan penyegerakan data. React ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna, manakala RabbitMQ ialah perisian tengah pemesejan yang boleh dipercayai. Artikel ini akan memperkenalkan cara menggabungkan React dan RabbitMQ untuk membina aplikasi pemesejan yang boleh dipercayai dan memberikan contoh kod khusus.

1. RabbitMQ Gambaran Keseluruhan:
   RabbitMQ ialah perisian tengah pemesejan sumber terbuka berdasarkan AMQP (Advanced Message Qeuing Protocol). Ia boleh menyediakan mekanisme penyampaian mesej dan fungsi sokongan yang boleh dipercayai seperti penerbitan dan langganan mesej, penghalaan dan penapisan mesej, dan ketekunan mesej. RabbitMQ menggunakan baris gilir dan suis untuk penghantaran dan penghalaan mesej, serta boleh menyokong berbilang mod mesej, seperti mod titik ke titik, mod terbitkan-langganan dan mod penghalaan.
2. Pengenalan kepada React:
   React ialah perpustakaan JavaScript yang dibangunkan oleh Facebook untuk membina antara muka pengguna. Ia berdasarkan model pembangunan komponen, yang boleh membahagikan halaman kepada komponen bebas, dan membina antara muka pengguna yang kompleks melalui sarang dan gabungan komponen. React menggunakan DOM maya (Virtual DOM) untuk meningkatkan prestasi halaman dan kelajuan pemaparan.
3. Bina aplikasi pemesejan yang boleh dipercayai menggunakan React dan RabbitMQ:
   Untuk membina aplikasi pemesejan yang boleh dipercayai, kami akan menggunakan React sebagai rangka kerja bahagian hadapan dan RabbitMQ sebagai perisian tengah pemesejan bahagian belakang. Langkah-langkah khusus adalah seperti berikut:

Langkah 1: Pasang dan konfigurasi RabbitMQ:
Mula-mula, anda perlu memasang RabbitMQ dan mulakannya. Anda boleh memuat turun versi yang sesuai untuk sistem pengendalian anda dari laman web rasmi RabbitMQ dan ikuti panduan pemasangan untuk memasang dan mengkonfigurasinya. Selepas memulakan RabbitMQ, anda boleh mengurus konfigurasi RabbitMQ dan memantau status mesej melalui antara muka pengurusan web.

Langkah 2: Cipta Apl React:
Gunakan arahan create-react-app untuk mencipta apl React baharu. Buka terminal dan laksanakan arahan berikut:

npx create-react-app message-app

Ini akan mencipta direktori baharu yang dipanggil message-app dan meletakkan fail aplikasi React yang dihasilkan di dalamnya.

Langkah 3: Pasang pakej bergantung:
Tukar ke direktori aplikasi mesej dan pasang pakej bergantung seperti amqplib dan react-router-dom. Buka terminal dan laksanakan arahan berikut:

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

Langkah 4: Buat komponen penghantaran mesej:
Buat fail bernama MessageSender.js dalam direktori src dan tulis kod berikut:

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

Langkah 5: Buat komponen penerima mesej :
Cipta fail bernama MessageList.js dalam direktori src dan tulis kod berikut:

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

Langkah 6: Konfigurasikan penghalaan dan pemaparan komponen:
Buka fail src/App.js dan kemas kini kod seperti berikut:

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;

Langkah 7: Jalankan aplikasi React:
Dalam direktori aplikasi mesej, laksanakan arahan berikut untuk memulakan aplikasi React:

npm start

Kemudian buka penyemak imbas dan lawati http://localhost:3000 untuk melihat senarai mesej dan mesej yang dihantar muka surat.

Kesimpulan:
Artikel ini menerangkan cara membina aplikasi pemesejan yang boleh dipercayai menggunakan React dan RabbitMQ. Dengan menggunakan React sebagai rangka kerja hadapan, anda boleh membina antara muka pengguna yang sangat interaktif dan mempunyai pengalaman yang baik. RabbitMQ, sebagai perisian tengah mesej, boleh menyediakan mekanisme penghantaran mesej yang boleh dipercayai. Saya harap artikel ini membantu anda memahami cara membina apl pemesejan yang boleh dipercayai.

Pautan rujukan:

• Tapak web rasmi RabbitMQ: https://www.rabbitmq.com/
• Tapak web rasmi React: https://reactjs.org/
• Tapak web rasmi React Router: https://reactrouter.com /

Atas ialah kandungan terperinci Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!