RabbitMQ 与浏览器 STOMP 连接失败的根源及正确配置方案-java教程-PHP中文网

RabbitMQ 与浏览器 STOMP 连接失败的根源及正确配置方案

RabbitMQ 原生 STOMP 插件不支持 WebSocket 协议，浏览器端必须通过 web_stomp 插件（基于 WebSocket 的 STOMP 网关）建立连接，而非直接使用 stomp 插件提供的 TCP 端口。

rabbitmq 原生 stomp 插件不支持 websocket 协议，浏览器端必须通过 web_stomp 插件（基于 websocket 的 stomp 网关）建立连接，而非直接使用 stomp 插件提供的 tcp 端口。

在 RabbitMQ 中，stomp 插件仅提供原生 TCP 层的 STOMP 协议支持（监听如 61613 端口），适用于 Java、Python 等后端客户端，但不兼容浏览器环境——因为浏览器的 WebSocket API 无法直接连接裸 TCP 端口，且 STOMP over WebSocket（即 ws://）需额外的协议适配层。

真正支持浏览器接入的是 RabbitMQ 官方配套插件：web_stomp（全称 rabbitmq_web_stomp）。它作为内嵌的 WebSocket 网关，将 WebSocket 连接升级为 STOMP 会话，并转发至内部 STOMP 代理。该插件默认随 rabbitmq_management 一起启用，但需显式启用并配合正确的端口与路径。

✅ 正确配置步骤如下：

启用 web_stomp 插件（Docker 环境）：
在启动容器时确保插件已激活：

docker run -d \
  --name rabbitmq-stomp \
  -p 5672:5672 -p 15672:15672 -p 15674:15674 \  # 15674 是 web_stomp 默认 WebSocket 端口
  -e RABBITMQ_DEFAULT_USER=guest \
  -e RABBITMQ_DEFAULT_PASS=guest \
  -e RABBITMQ_SERVER_ADDITIONAL_ERL_ARGS="-rabbitmq_web_stomp enabled" \
  rabbitmq:4-management

或进入容器后手动启用：

docker exec -it rabbitmq-stomp rabbitmq-plugins enable rabbitmq_web_stomp

前端连接 URL 必须指向 web_stomp 的 WebSocket 端点：
将原错误配置：

brokerURL: 'ws://localhost:61613/topic/', // ❌ 错误：61613 是 TCP STOMP 端口，不可 WebSocket 访问

改为标准 web_stomp WebSocket 地址（默认端口 15674，路径固定为 /ws）：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

import { RxStompConfig } from '@stomp/rx-stomp';

export const myRxStompConfig: RxStompConfig = {
  brokerURL: 'ws://localhost:15674/ws', // ✅ 正确：web_stomp 的 WebSocket 入口

  connectHeaders: {
    login: 'guest',
    passcode: 'guest',
    host: '/' // ⚠️ 注意：STOMP over WebSocket 必须显式传 host header，值通常为 '/'
  },
  // 可选：添加重连策略提升健壮性
  reconnectDelay: 1000,
  heartbeatIncoming: 0,
  heartbeatOutgoing: 20000
};

服务端无需修改 Spring Boot 的 @EnableWebSocketMessageBroker 配置：
你当前的 Spring 配置（enableSimpleBroker("/topic/", "/queue/")）是用于 Spring 自建 STOMP 代理的场景，与 RabbitMQ 外部代理无关。若使用 RabbitMQ 作为消息中间件，应切换为外部代理模式：
```
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
    // 指向 RabbitMQ 的 STOMP 代理（注意：此处是 TCP 连接，非 WebSocket）
    registry.enableStompBrokerRelay("/topic/", "/queue/")
           .setRelayHost("rabbitmq") // Docker service 名
           .setRelayPort(61613)
           .setClientLogin("guest")
           .setClientPasscode("guest");
    registry.setApplicationDestinationPrefixes("/app");
}
```
? 关键区分：浏览器 →（WebSocket）→ RabbitMQ web_stomp →（内部 STOMP）→ RabbitMQ stomp 插件；而 Spring 后端则通过 TCP 直连 stomp 插件（61613 端口）完成桥接。

? 注意事项总结：

浏览器永远不要直连 61613（TCP STOMP）、5672（AMQP）等非 HTTP/WS 端口；
web_stomp 默认监听 :15674/ws，可通过 rabbitmq.conf 调整：
```
web_stomp.ws.port = 15674
web_stomp.ws.path = /ws
```
所有 WebSocket STOMP 客户端（如 @stomp/rx-stomp、stompjs）都必须发送 host header，否则 RabbitMQ 会拒绝连接；
若使用 HTTPS 前端，brokerURL 需改为 wss://...，并确保 RabbitMQ 启用 TLS for web_stomp（需额外配置证书）。

完成上述配置后，浏览器即可成功建立 STOMP WebSocket 连接，不再出现 {shutdown, login_timeout} 错误。