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

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 Examplesrabbitmq_web_stomp_examples是一个轻量级插件定位是RabbitMQ Web STOMP 插件的使用示例集合。它本身不实现任何新的协议能力而是复用rabbitmq_web_stomp提供的 STOMP-over-WebSocket 端点在插件自己的 HTTP 监听端口上提供几个可直接打开的 HTML 演示页。该插件位于仓库的 deps/rabbitmq_web_stomp_examples 目录包含的静态资源全部位于 priv 目录 下资源文件作用index.html示例入口页罗列三个演示的导航链接echo.htmlSimple Echo Server发布/订阅回显示例bunny.htmlBunny Drawing多人协作画板示例temp-queue.htmlTemporary Queue临时队列 reply-to应答示例stomp.jsstomp-websocket 客户端库CoffeeScript 1.7.1 编译产物Apache License V2.0main.css页面公共样式bunny.png/pencil.cur画板示例的背景图与画笔光标插件通过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/MakefilePROJECT 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_stompSTOMP-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, []).其工作流程为读取监听配置通过application:get_env(rabbitmq_web_stomp_examples, listener)取出Makefile中PROJECT_ENV定义的监听器配置默认[{port, 15670}]注册静态上下文调用rabbit_web_dispatch:register_static_context/6注册名为web_stomp_examples的上下文监听端口 15670路径前缀为web-stomp-examples静态文件目录指向本插件的priv目录——这就是 15670 端口能直接以 HTTP 形式服务index.html、echo.html等文件的底层机制启动占位 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 Queuereply-to 临时队列实现请求-应答页面 temp-queue.html 演示 STOMP 请求-应答模式。页面自带说明When you type text in the forms 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_stomp15674默认提供ws://host:15674/wsWebSocket 端点完成 STOMP 帧与 AMQP 交换/队列的映射rabbitmq_web_stomp_examples15670默认托管静态 HTML 演示页页面脚本通过 15674 端口与 STOMP 端点通信因此要完整运行示例务必同时启用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.htmlEcho Server 示例priv/echo.htmlBunny Drawing 示例priv/bunny.htmlTemporary Queue 示例priv/temp-queue.html应用回调模块src/rabbit_web_stomp_examples_app.erlSTOMP 客户端库priv/stomp.jsWeb STOMP 插件说明deps/rabbitmq_web_stomp/README.mdWeb 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考