企业官网建设流程全解析

RabbitMQ Web STOMP Examples 插件实战指南：端口 15670 上的浏览器消息演示套件

【免费下载链接】rabbitmq-serverOpen source RabbitMQ: core server and tier 1 (built-in) plugins项目地址: https://gitcode.com/gh_mirrors/ra/rabbitmq-server

本指南围绕 rabbitmq-server 仓库中的deps/rabbitmq_web_stomp_examples插件展开。它是一个随 RabbitMQ 官方发行版一起内置的"Web STOMP 演示应用"：插件启动后会在 15670 端口上托管一组静态 HTML 页面，通过浏览器即可体验基于 WebSocket 的 STOMP 发布/订阅、临时队列reply-to应答等核心用法。读完本文，你将掌握该插件的启用方法、三个官方示例（Echo Server、Bunny Drawing、Temporary Queue）的工作原理，以及它们与 rabbitmq_web_stomp 插件、rabbit_web_dispatch静态资源托管机制的对应关系。

插件是什么：随发行版内置的浏览器端演示套件

RabbitMQ Web STOMP Examples（rabbitmq_web_stomp_examples）是一个轻量级插件，定位是"RabbitMQ Web STOMP 插件的使用示例集合"。它本身不实现任何新的协议能力，而是复用rabbitmq_web_stomp提供的 STOMP-over-WebSocket 端点，在插件自己的 HTTP 监听端口上提供几个可直接打开的 HTML 演示页。

该插件位于仓库的 deps/rabbitmq_web_stomp_examples 目录，包含的静态资源全部位于 priv 目录 下：

插件通过rabbit_web_dispatch注册一个静态资源上下文来托管这些文件（详见下文"静态托管如何工作"一节）。示例页中的浏览器脚本通过ws://<host>:15674/ws连接到rabbitmq_web_stomp插件的 WebSocket 端点，STOMP 帧的编解码由页面加载的stomp.js负责——注意 15674 是rabbitmq_web_stomp插件的默认端口，与 15670 的示例页面端口是两个不同的端口。

安装与启用

该插件随 RabbitMQ 发行版内置，无需单独下载。启用它需要使用 RabbitMQ 的 CLI 工具（即rabbitmq-plugins），原文档给出的命令如下：

rabbitmq-plugins enable rabbitmq_web_stomp_examples

实际使用时，由于rabbitmq_web_stomp_examples依赖rabbitmq_web_stomp，同时启用两者更符合典型的演示场景：

# 可能需要 sudo 权限 rabbitmq-plugins enable rabbitmq_web_stomp rabbitmq_web_stomp_examples

启用后插件会启动自己的监听器，绑定到15670 端口并托管若干静态 HTML 文件，直接在浏览器打开 http://127.0.0.1:15670 即可看到示例首页。也可以执行rabbitmq-plugins list查看插件启用状态，或使用rabbitmq-plugins disable rabbitmq_web_stomp_examples关闭。

端口与依赖：从构建配置看插件运行机制

插件的端口行为在构建配置中定义，见 deps/rabbitmq_web_stomp_examples/Makefile：

PROJECT = rabbitmq_web_stomp_examples PROJECT_DESCRIPTION = Rabbit WEB-STOMP - examples PROJECT_MOD = rabbit_web_stomp_examples_app define PROJECT_ENV [ {listener, [{port, 15670}]} ] endef DEPS = rabbit_common rabbit rabbitmq_web_dispatch rabbitmq_web_stomp

这里有三个关键信息：

• 默认监听端口 15670：通过PROJECT_ENV中{listener, [{port, 15670}]}定义，这也是原文档所述"服务器绑定 15670 端口"的配置出处。该端口可在 RabbitMQ 的rabbitmq.conf中通过web_stomp_examples.listener.port调整；
• 模块名rabbit_web_stomp_examples_app：对应应用回调模块，即 src/rabbit_web_stomp_examples_app.erl；
• 依赖链：rabbitmq_web_stomp_examples依赖rabbitmq_web_dispatch（静态资源托管）和rabbitmq_web_stomp（STOMP-over-WebSocket 服务），向下还有rabbit_common与rabbit两个基础库。启用插件时依赖会自动解析。

静态托管如何工作：应用回调源码解读

rabbit_web_stomp_examples_app是一个同时实现application与supervisor行为的模块，核心逻辑在start/2中：

start(_Type, _StartArgs) -> {ok, Listener} = application:get_env(rabbitmq_web_stomp_examples, listener), {ok, _} = rabbit_web_dispatch:register_static_context( web_stomp_examples, Listener, "web-stomp-examples", ?MODULE, "priv", "WEB-STOMP: examples"), supervisor:start_link({local, ?MODULE}, ?MODULE, []).

其工作流程为：

1. 读取监听配置：通过application:get_env(rabbitmq_web_stomp_examples, listener)取出Makefile中PROJECT_ENV定义的监听器配置（默认[{port, 15670}]）；
2. 注册静态上下文：调用rabbit_web_dispatch:register_static_context/6注册名为web_stomp_examples的上下文，监听端口 15670，路径前缀为web-stomp-examples，静态文件目录指向本插件的priv目录——这就是 15670 端口能直接以 HTTP 形式服务index.html、echo.html等文件的底层机制；
3. 启动占位 supervisor：最后以supervisor:start_link启动一个空的one_for_one监督树（源码注释引用 Erlang 邮件列表的讨论，说明这是一个占位 supervisor，真正的业务逻辑在rabbit_web_dispatch的监听进程里）。

对应的stop/1通过rabbit_web_dispatch:unregister_context(web_stomp_examples)注销静态上下文。整个插件因此非常轻量——它不自己打开 Socket，只负责把priv里的静态页面"挂"到 HTTP 监听器上。

三个官方示例的完整剖析

示例首页 index.html 提供三个入口链接。三个页面共享同一套 HTML 骨架（#first展示区 +#second日志区），分别演示 STOMP 的不同能力。

Simple Echo Server：/topic/test上的发布/订阅回显

页面 echo.html 实现"我发我收"的回显。核心脚本逻辑：

// Stomp.js boilerplate const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; var client = Stomp.client(wsProtocol + '//' + window.location.hostname + ':15674/ws'); client.debug = pipe('#second'); var print_first = pipe('#first', function(data) { client.send('/topic/test', {"content-type":"text/plain"}, data); }); var on_connect = function(x) { id = client.subscribe("/topic/test", function(d) { print_first(d.body); }); }; var on_error = function() { console.log('error'); }; client.connect('guest', 'guest', on_connect, on_error, '/');

要点：

• 页面通过ws://<hostname>:15674/ws建立 WebSocket 连接，与示例页面自身的 15670 端口无关；
• 登录使用guest/guest凭据（默认虚拟主机/）。注意：RabbitMQ 默认配置下guest用户仅允许通过localhost回环地址连接，远程访问需要另行配置用户或调整权限；
• 订阅主题subscriber与发送目标destination都是/topic/test：输入框内容经client.send发布到 topic，同一浏览器（或任何订阅该主题的客户端）从订阅回调中收到消息并显示在#first区域；
• client.debug = pipe('#second')将 STOMP 客户端库的调试输出（收发帧等）渲染到#second日志区，方便观察协议交互；
• location.protocol === 'https:' ? 'wss:' : 'ws:'自动适配 HTTP/HTTPS，使用 HTTPS 站点时自动切换为 WSS。

Bunny Drawing：/topic/bunny上的多人实时画板

页面 bunny.html 演示的是最有"传播性"的场景——多浏览器实时协同。页面加载一张 bunny.png 兔子图片作为画布背景，用户用铅笔光标（pencil.cur）在兔子上绘制线条：

send = function(data) { client.send('/topic/bunny', {}, data); };

• 本地绘制：监听mousemove，当位移超过阈值（两点间距平方根大于 8）时生成线段{x1, y1, x2, y2}，先调用draw(p)画到本地canvas，再send(JSON.stringify(p))把线段 JSON 发布到/topic/bunny；
• 远端同步：订阅/topic/bunny的每个客户端在回调里JSON.parse(d.body)还原线段并立即绘制，于是"多开一个浏览器"就能看到两个窗口同时在兔子上画画——页面提示语 "Draw wings on the bunny!" 与 "(For more fun open a second browser)" 正是为此设计；
• 历史重放：本地数组lines保存所有已画线段，窗口resize时通过do_resize重绘全部历史线条，确保缩放不会丢内容；
• 浏览区：脚本同时把 STOMP 调试输出转发到console.log，便于在开发者工具中观察收发帧。

/topic/bunny是一个持久化的 topic 交换机上的路由键，任意数量的 WebSocket 客户端订阅同一目的地即可实现一对多广播——这正是 RabbitMQ STOMP 插件将 STOMP 目的地映射到交换机/队列的体现。

Temporary Queue：reply-to+ 临时队列实现请求-应答

页面 temp-queue.html 演示 STOMP 请求-应答模式。页面自带说明：

When you type text in the form's input, the application will send a message to the/queue/testdestination with thereply-toheader set to/temp-queue/foo.

实现分为三段：

（1）建立连接并设置默认收件回调：临时队列的消息没有显式订阅，靠onreceive兜底接收：

var ws = new WebSocket('ws://' + window.location.hostname + ':15674/ws'); var client = Stomp.over(ws); // default receive callback to get message from temporary queues client.onreceive = function(m) { $('#first div').append($("<code>").text(m.body)); }

（2）订阅/queue/test并在回调中应答：收到消息后把正文反转，再发回消息头reply-to指向的临时队列：

var on_connect = function(x) { id = client.subscribe("/queue/test", function(m) { var reversedText = m.body.split("").reverse().join(""); client.send(m.headers['reply-to'], {"content-type":"text/plain"}, reversedText); }); }; client.connect('guest', 'guest', on_connect, on_error, '/');

（3）发送请求：表单提交时向/queue/test发送消息，并携带reply-to: /temp-queue/foo头：

$('#first form').submit(function() { var text = $('#first form input').val(); if (text) { client.send('/queue/test', {'reply-to': '/temp-queue/foo'}, text); $('#first form input').val(""); } return false; });

完整数据流：输入文本 → 携带reply-to=/temp-queue/foo发送到/queue/test→/queue/test的订阅回调收到消息 → 反转正文 → 向reply-to指定的临时队列发回应答 → 默认onreceive回调收到应答并显示。请求、应答两条消息的路径互不阻塞，形成完整的 STOMP 请求-应答闭环。

与 rabbitmq_web_stomp 插件的关系

Web STOMP Examples 本身不实现协议，协议能力全部来自 rabbitmq_web_stomp 插件。其应用模块 src/rabbit_web_stomp_app.erl 中可以看到真正的 STOMP-over-WebSocket 服务启动逻辑：初始化监听器（rabbit_web_stomp_listener:init()）、启动事件处理（rabbit_web_stomp_internal_event_handler）与监督树（rabbit_web_stomp_sup）。

两个插件各司其职，端口分工清晰：

因此要完整运行示例，务必同时启用rabbitmq_web_stomp与rabbitmq_web_stomp_examples；若只启用后者，页面可以打开但无法建立 STOMP 连接。

常见问题与排障要点

• 浏览器打开 15670 无响应：确认rabbitmq_web_stomp_examples已启用且 RabbitMQ 正在运行，执行rabbitmq-plugins list检查状态；
• 页面能打开但消息收发失败：确认rabbitmq_web_stomp已启用（rabbitmq-plugins enable rabbitmq_web_stomp），并检查 15674 端口监听是否正常；示例页的 WebSocket 地址默认指向window.location.hostname:15674，如果浏览器与服务器非同机或存在防火墙，需要确认该端口可达；
• guest用户无法连接：RabbitMQ 默认仅允许guest通过localhost访问，跨主机访问时需创建带权限的用户，或在配置中显式开放（需知晓相应的安全风险）;
• 修改端口：通过 RabbitMQ 配置项web_stomp_examples.listener.port调整 15670 示例端口，通过web_stomp.listener.port调整 15674 STOMP 端口。

参考资源

• 示例插件目录：deps/rabbitmq_web_stomp_examples
• 示例入口页：priv/index.html
• Echo Server 示例：priv/echo.html
• Bunny Drawing 示例：priv/bunny.html
• Temporary Queue 示例：priv/temp-queue.html
• 应用回调模块：src/rabbit_web_stomp_examples_app.erl
• STOMP 客户端库：priv/stomp.js
• Web STOMP 插件说明：deps/rabbitmq_web_stomp/README.md
• Web STOMP 应用模块：deps/rabbitmq_web_stomp/src/rabbit_web_stomp_app.erl

【免费下载链接】rabbitmq-serverOpen source RabbitMQ: core server and tier 1 (built-in) plugins项目地址: https://gitcode.com/gh_mirrors/ra/rabbitmq-server