React应用连接Azure Service Bus客户端收发队列消息遇超时问题求助

问题概述 #

能否通过React应用连接Azure Service Bus客户端实现队列消息的发送与接收？此前在Node.js环境中运行的代码可正常工作，但移植到React组件后发送消息时出现超时错误，且未找到React相关示例。

原Node.js代码：

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

问题原因 #

1. 浏览器与Node.js环境差异：@azure/service-bus默认使用AMQP协议的TCP传输，浏览器环境下无法直接使用，导致连接超时，需要切换为WebSockets传输。
2. React组件异步代码处理不当：直接在组件渲染逻辑中使用await会导致渲染阻塞，且未正确处理组件卸载时的资源清理。
3. 安全风险：前端直接暴露Service Bus连接字符串会导致凭据泄露，生产环境建议通过后端中转。

修正后的React实现代码 #

import { useEffect, useState } from 'react';
import { ServiceBusClient, ServiceBusSender, ServiceBusReceiver } from "@azure/service-bus";

const ServiceBusDemo = () => {
    const [messageStatus, setMessageStatus] = useState('');
    const [receivedMessages, setReceivedMessages] = useState([]);

    // 发送消息逻辑
    const sendMessage = async () => {
        let sender;
        let serviceBusClient;
        try {
            setMessageStatus('正在发送消息...');
            // 配置WebSockets传输
            serviceBusClient = new ServiceBusClient(<connectionStringSender>, {
                transport: {
                    type: "webSocket",
                    webSocketConstructor: WebSocket
                }
            });
            sender = serviceBusClient.createSender(<inputQueue>);
            await sender.sendMessages({
                body: "Hello from React",
                applicationProperties: { "my-property": "react-value" },
                messageId: Date.now().toString(),
            });
            setMessageStatus('消息发送成功');
        } catch (error) {
            setMessageStatus(`发送失败: ${error.message}`);
            console.error('发送消息出错:', error);
        } finally {
            // 清理资源
            if (sender) await sender.close();
            if (serviceBusClient) await serviceBusClient.close();
        }
    };

    // 接收消息逻辑
    const receiveMessages = async () => {
        let receiver;
        let serviceBusClient;
        try {
            setMessageStatus('正在接收消息...');
            serviceBusClient = new ServiceBusClient(<connectionStringReceiver>, {
                transport: {
                    type: "webSocket",
                    webSocketConstructor: WebSocket
                }
            });
            // 使用peekLock模式接收（默认）
            receiver = serviceBusClient.createReceiver(<outputQueue>);
            const messages = await receiver.receiveMessages(5, { maxWaitTimeInMs: 10000 });
            const messageBodies = messages.map(msg => msg.body);
            setReceivedMessages(messageBodies);
            // 完成消息，从队列移除
            for (const message of messages) {
                await receiver.completeMessage(message);
            }
            setMessageStatus(`成功接收${messages.length}条消息`);
        } catch (error) {
            setMessageStatus(`接收失败: ${error.message}`);
            console.error('接收消息出错:', error);
        } finally {
            if (receiver) await receiver.close();
            if (serviceBusClient) await serviceBusClient.close();
        }
    };

    return (
        <div>
            <button onClick={sendMessage}>发送消息</button>
            <button onClick={receiveMessages}>接收消息</button>
            <p>{messageStatus}</p>
            <h3>已接收消息:</h3>
            <ul>
                {receivedMessages.map((msg, index) => (
                    <li key={index}>{JSON.stringify(msg)}</li>
                ))}
            </ul>
        </div>
    );
};

export default ServiceBusDemo;

关键注意事项 #

• 强制使用WebSockets：浏览器环境下必须配置transport: { type: "webSocket" }，否则会因TCP连接限制超时。
• 资源清理：每次操作后必须关闭sender/receiver和ServiceBusClient，避免内存泄漏和连接耗尽。
• 安全建议：生产环境绝对不能在前端暴露Service Bus连接字符串，应通过后端API中转消息收发，前端调用后端接口即可。
• 异步逻辑处理：React组件中需将异步操作放在事件回调或useEffect中，避免直接在渲染阶段使用await。

内容的提问来源于stack exchange，提问作者Jyothi Varada