从 React 应用程序连接到 azure 服务总线客户端

Question

我需要帮助来了解是否可以从 React 应用程序连接到 Azure 服务总线客户端，并且仍然可以向队列发送消息和从队列接收消息。

我没有在互联网上找到任何从 React 代码调用 Azure 服务总线的示例。我在 Node.js 中尝试了以下代码，它工作正常。如果我尝试在 React 组件中使用相同的代码，则在尝试将消息发送到队列时会失败，从而在控制台中产生超时。

    import * as asb from "@azure/service-bus";

    const serviceBus = new asb.ServiceBusClient(<connectionStringSender>);
    const sender = serviceBus.createSender(<inputQueue>);
    await sender.sendMessages({
        body: "Hello",
        applicationProperties: { "my-property": "my-value" },
        messageId:123,
    });
    console.log("Message sent");
    await sender.close();


    const serviceBusRecevier = new asb.ServiceBusClient(<connectionStringReceiver>);
    const receiver = serviceBusRecevier.createReceiver(<outputQueue>);
    console.log("Waiting for messages...");
    const messages = await receiver.receiveMessages(5, { maxWaitTimeInMs: 10000 });
    for (const message of messages) {
        console.log(`Message Received: ${message.body}`);
        await receiver.completeMessage(message);
    }

Answer 1

我尝试了下面的 React js 代码来向 Azure 服务总线队列发送和接收消息。

代码：

src/components/MessageSender.js：

import React, { useState } from 'react';

function MessageSender() {
  const [message, setMessage] = useState('');

  const sendMessage = async () => {
    try {
      await fetch('/send-message', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ message }),
      });

      setMessage('');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h2>Send Message</h2>
      <input
        type="text"
        placeholder="Enter message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}

export default MessageSender;

src/components/MessageReceiver.js：

import React, { useEffect, useState } from 'react';

function MessageReceiver() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const receiveMessages = async () => {
      try {
        const response = await fetch('/receive-messages');
        const data = await response.json();
        setMessages(data);
      } catch (error) {
        console.error(error);
      }
    };

    receiveMessages();
  }, []);

  return (
    <div>
      <h2>Received Messages</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message}</li>
        ))}
      </ul>
    </div>
  );
}

export default MessageReceiver;

src/App.js：

import React from 'react';
import MessageSender from './components/MessageSender';
import MessageReceiver from './components/MessageReceiver';

function App() {
  return (
    <div>
      <MessageSender />
      <MessageReceiver />
    </div>
  );
}

export default App;

服务器.js：

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const { ServiceBusClient } = require('@azure/service-bus');

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

const connectionString = '<servicebus-queue-connec-string>';
const queueName = '<Queue-name>';
const serviceBusClient = new ServiceBusClient(connectionString);

app.post('/send-message', async (req, res) => {
  try {
    const sender = serviceBusClient.createSender(queueName);
    const messageBody = req.body.message;

    await sender.sendMessages({
      body: messageBody,
    });

    await sender.close();
    res.status(200).send('Message sent successfully');
  } catch (error) {
    console.error(error);
    res.status(500).send('Error sending message');
  }
});

app.get('/receive-messages', async (req, res) => {
  try {
    const receiver = serviceBusClient.createReceiver(queueName);

    const messages = await receiver.receiveMessages(5, { maxWaitTimeInMs: 10000 });

    await receiver.close();

    res.status(200).json(messages.map((message) => message.body));
  } catch (error) {
    console.error(error);
    res.status(500).send('Error receiving messages');
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

输出：

运行成功如下，

然后，我从 Postman 向 Azure 服务总线队列发送一条消息，如下所示，

我使用上面的输出URL将其设置为POST，并保留它以发送我想要在Body中作为JSON发送的消息，然后单击Send，

我在 Azure 门户的服务总线队列中收到了上述消息，如下所示，

然后，我发送了另一个 GET 请求以接收在 Postman 中发送的消息，如下所示，

我收到了两条消息，我使用下面的 React 应用程序将其发送到 Azure 服务总线，