如何在create-react-app创建的React 16.13.1应用中配置Azure Service Bus收发消息

一、安装依赖 #

首先安装所需的Azure Service Bus SDK、Node.js核心模块的浏览器兼容包，以及用于修改CRA默认Webpack配置的工具：

npm install @azure/service-bus@7.5.0 react-app-rewired customize-cra process util stream-browserify buffer os-browserify path-browserify

二、修改项目配置 #

由于CRA默认不允许直接修改Webpack配置，我们使用react-app-rewired来覆盖默认配置：

1. 更新package.json的scripts #

将原有的start、build、test命令替换为react-app-rewired的对应命令：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

2. 创建Webpack配置覆盖文件 #

在项目根目录新建config-overrides.js，添加Node.js模块的浏览器兼容配置：

const { override, addWebpackResolve, addWebpackPlugin, addWebpackModuleRule } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  // 配置Node.js核心模块的浏览器 fallback
  addWebpackResolve({
    fallback: {
      "process": require.resolve("process/browser"),
      "util": require.resolve("util/"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "os": require.resolve("os-browserify/browser"),
      "path": require.resolve("path-browserify")
    }
  }),
  // 注入全局变量，解决process、Buffer未定义问题
  addWebpackPlugin(
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ),
  // 处理ES模块的导入匹配问题
  addWebpackModuleRule({
    test: /\.m?js$/,
    resolve: {
      fullySpecified: false
    }
  })
);

三、消息收发代码示例 #

创建一个组件实现消息的发送与接收功能（注意：生产环境请勿直接暴露Service Bus密钥，建议通过后端获取临时令牌或代理请求）：

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

const ServiceBusDemo = () => {
  const [inputMsg, setInputMsg] = useState('');
  const [receivedMsgs, setReceivedMsgs] = useState([]);

  // Service Bus配置（建议从后端接口动态获取）
  const sbConfig = {
    namespace: '你的Service Bus命名空间.servicebus.windows.net',
    queueName: '你的队列名称',
    sasPolicyName: '你的SAS策略名称',
    sasKey: '你的SAS密钥'
  };

  // 创建Service Bus客户端
  const getSbClient = () => {
    const connectionStr = `Endpoint=sb://${sbConfig.namespace}/;SharedAccessKeyName=${sbConfig.sasPolicyName};SharedAccessKey=${sbConfig.sasKey}`;
    return new ServiceBusClient(connectionStr);
  };

  // 发送消息
  const sendMsg = async () => {
    if (!inputMsg.trim()) return;

    const client = getSbClient();
    const sender = client.createSender(sbConfig.queueName);

    try {
      await sender.sendMessages({ body: inputMsg });
      alert('消息发送成功');
      setInputMsg('');
    } catch (err) {
      console.error('发送失败:', err);
      alert('发送失败，请查看控制台日志');
    } finally {
      await sender.close();
      await client.close();
    }
  };

  // 接收消息
  const receiveMsg = async () => {
    const client = getSbClient();
    const receiver = client.createReceiver(sbConfig.queueName, { receiveMode: 'peekLock' });

    try {
      const msgs = await receiver.receiveMessages(10, { maxWaitTimeInMs: 5000 });
      setReceivedMsgs(prev => [...prev, ...msgs.map(m => m.body)]);
      // 完成消息，从队列移除
      for (const msg of msgs) {
        await receiver.completeMessage(msg);
      }
    } catch (err) {
      console.error('接收失败:', err);
      alert('接收失败，请查看控制台日志');
    } finally {
      await receiver.close();
      await client.close();
    }
  };

  // 组件挂载时自动接收一次消息
  useEffect(() => {
    receiveMsg();
  }, []);

  return (
    <div style={{ padding: '2rem' }}>
      <h3>Azure Service Bus 测试</h3>
      <div style={{ marginBottom: '1.5rem' }}>
        <input
          type="text"
          value={inputMsg}
          onChange={e => setInputMsg(e.target.value)}
          placeholder="输入消息内容"
          style={{ padding: '0.5rem', width: '25rem' }}
        />
        <button onClick={sendMsg} style={{ marginLeft: '1rem', padding: '0.5rem 1rem' }}>
          发送消息
        </button>
      </div>
      <div>
        <button onClick={receiveMsg} style={{ padding: '0.5rem 1rem', marginBottom: '1rem' }}>
          手动接收消息
        </button>
        <h4>已接收消息:</h4>
        <ul>
          {receivedMsgs.map((msg, idx) => (
            <li key={idx}>{msg}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ServiceBusDemo;

四、关键注意事项 #

• 安全风险：浏览器端直接使用Service Bus连接字符串或SAS密钥存在泄露风险，生产环境建议通过后端API代理消息收发，或使用Azure AD令牌进行身份验证。
• 版本兼容：React 16.13.1对应的CRA使用Webpack 4，上述配置针对Webpack 4优化，确保依赖版本匹配。
• 错误排查：若仍有模块缺失，检查config-overrides.js中的fallback配置是否覆盖所有必要的Node.js核心模块；若消息收发失败，检查网络连接、队列权限、SAS策略配置是否正确。

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