React JS浏览器端连接Azure Service Bus报错，求解决方案及代码示例

一、问题定位 #

你遇到的AMQP连接错误，主要由以下几个问题导致：

• 代码存在语法错误（拼写错误、方法调用格式错误）
• ServiceBusClient实例化时机不合理，组件渲染时重复创建
• 接收消息方法调用错误，资源释放时未正确调用函数

二、正确依赖配置 #

你当前使用的依赖版本兼容浏览器环境，无需调整，保持如下配置即可：

"dependencies": {
  "@azure/identity": "^4.4.1",
  "@azure/service-bus": "^7.9.5"
}

三、修正后的React消息收发代码示例 #

import React, { useState, useEffect, useRef } from 'react';
import { ServiceBusClient } from '@azure/service-bus';
import { setLogLevel } from '@azure/logger';

// 修正拼写错误
setLogLevel("verbose");

const connectionString = import.meta.env.VITE_SERVICE_BUS_CONNECTION_STRING;
const queueName = import.meta.env.VITE_QUEUE_NAME;
const timeOutInMs = Number(import.meta.env.VITE_TIMEOUT_IN_MS) || 60000;

console.log("connectionString is :", connectionString);
console.log("queueName is :", queueName);
console.log("timeOutInMs is :", timeOutInMs);

function AzureServiceBusComponent() {
    const [responseMessage, setResponseMessage] = useState('');
    const [receivedMessages, setReceivedMessages] = useState([]);
    // 使用useRef保存ServiceBusClient实例，避免重复创建
    const sbClientRef = useRef(null);

    useEffect(() => {
        // 组件挂载时创建ServiceBusClient实例
        sbClientRef.current = new ServiceBusClient(connectionString, {
            webSocketOptions: {
                webSocketEndpointPath: '/$servicebus/websocket',
            },
            retryOptions: {
                timeoutInMs: timeOutInMs, // 修正参数名拼写
            }
        });

        // 组件卸载时关闭客户端
        return () => {
            if (sbClientRef.current) {
                sbClientRef.current.close().catch(err => console.error("关闭客户端失败:", err));
            }
        };
    }, []);

    const sendMessage = async () => {
        if (!sbClientRef.current) {
            setResponseMessage("客户端未初始化");
            return;
        }

        const sender = sbClientRef.current.createSender(queueName);
        const messages = [{ body: "hello world" }];

        try {
            // 修正await后的点号错误
            const result = await sender.sendMessages(messages);
            console.log("发送结果:", result);
            setResponseMessage("消息发送成功");
        } catch (error) {
            console.error("发送消息出错:", error);
            setResponseMessage(`发送失败: ${error.message}`);
        } finally {
            // 关闭sender
            await sender.close().catch(err => console.error("关闭sender失败:", err));
        }
    };

    const receiveMessage = async () => {
        if (!sbClientRef.current) {
            setResponseMessage("客户端未初始化");
            return;
        }

        // 创建接收器，指定接收模式
        const receiver = sbClientRef.current.createReceiver(queueName, { receiveMode: "receiveAndDelete" });

        try {
            // 修正方法名：receiveMessages，第一个参数是消息数量
            const messages = await receiver.receiveMessages(5, { maxWaitTimeInMs: 5000 });
            const newMessages = messages.map(msg => msg.body);
            console.log("收到的消息:", newMessages);

            setReceivedMessages(prev => [...prev, ...newMessages]);
            setResponseMessage(`收到${newMessages.length}条消息`);
        } catch (error) {
            console.error("接收消息出错:", error);
            setResponseMessage(`接收失败: ${error.message}`);
        } finally {
            // 修正：close是函数，需要加()
            await receiver.close().catch(err => console.error("关闭receiver失败:", err));
        }
    };

    return (
        <div>
            <h2>Azure Service Bus 消息收发</h2>
            <button onClick={sendMessage}>发送消息</button>
            {responseMessage && <p>{responseMessage}</p>}
            <div>
                <h3>已接收消息</h3>
                <button onClick={receiveMessage}>接收消息</button>
                <ul>
                    {receivedMessages.map((msg, index) => (
                        <li key={index}>{msg}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default AzureServiceBusComponent;

四、关键注意事项 #

• 连接字符串安全：生产环境禁止在浏览器端直接使用Service Bus连接字符串，建议改用@azure/identity中的InteractiveBrowserCredential进行身份验证，避免密钥泄露。
• 客户端复用：ServiceBusClient是重量级对象，应复用实例而非每次请求创建，示例中使用useRef保存实例确保全局唯一。
• 资源释放：sender、receiver使用后必须调用close()释放资源，避免连接泄漏。
• WebSocket配置：浏览器环境下必须启用WebSocket选项，否则无法建立AMQP连接。

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