后端消息队列消息路由【免费下载链接】rabbitmq-serverOpen source RabbitMQ: core server and tier 1 (built-in) plugins项目地址https://gitcode.com/gh_mirrors/ra/rabbitmq-server点击查看免费下载本文围绕 RabbitMQ 官方仓库中的rabbitmq_web_mqtt_examples插件讲解如何快速启动一个运行在 15670 端口的静态示例站点通过两个开箱即用的 HTML 示例Echo 回声服务器与 Bunny 协作画板掌握 MQTT-over-WebSocket 的完整链路浏览器端使用 Paho MQTT JavaScript 客户端连接 15675 端口、订阅主题、发布消息。读完本文你将理解该插件的启动机制、静态资源服务原理并能基于示例源码写出自己的浏览器端 MQTT 应用。插件是什么给 Web MQTT 的最小可运行演示rabbitmq_web_mqtt_examples是一个随 RabbitMQ 分发的示例插件其 README 明确说明它的定位包含几个 RabbitMQ Web MQTT 插件 的基础用法示例。它本身不实现任何协议处理逻辑而是启动一个绑定15670 端口的 HTTP 静态文件服务在该端口上提供若干静态 HTML 页面例如http://127.0.0.1:15670/页面中的 JavaScript 通过 WebSocket 连接 RabbitMQ 的 Web MQTT 端点默认ws://host:15675/ws演示订阅与发布。也就是说15670 是示例网页的端口15675 是Web MQTT 网关的端口二者分工明确。前者负责把浏览器页面送到用户面前后者负责把页面上 MQTT 消息桥接到 RabbitMQ broker 内部。从 Makefile 可以看出该插件的依赖关系PROJECT rabbitmq_web_mqtt_examples PROJECT_DESCRIPTION Rabbit WEB-MQTT - examples PROJECT_MOD rabbit_web_mqtt_examples_app define PROJECT_ENV [ {listener, [{port, 15670}]} ] endef DEPS rabbit_common rabbit rabbitmq_web_dispatch rabbitmq_web_mqtt依赖rabbitmq_web_dispatch用于注册 HTTP 静态上下文依赖rabbitmq_web_mqtt则是为了让 Web MQTT 网关与本插件同装同启确保示例页面打开即有可连接的端点。安装与启用该插件随 RabbitMQ 发行版一起发布无需单独下载。启用方式与其它插件一致使用 RabbitMQ CLI 工具rabbitmq-plugins enable rabbitmq_web_mqtt_examples这条命令会同时启用它所依赖的rabbitmq_web_dispatch与rabbitmq_web_mqtt依赖会被自动带上。启用后重启 broker或在启用时按提示操作即可生效。验证是否就绪用浏览器访问http://127.0.0.1:15670/应能看到示例首页用rabbitmq-plugins或管理界面确认三个插件均处于 enabled 状态。注意示例页面里的 WebSocket 客户端连接的是15675 端口因此rabbitmq_web_mqtt必须正常运行如果浏览器控制台报连接失败优先检查 Web MQTT 监听器是否启动。示例首页与两个核心 Demo示例首页 index.html 提供两个入口Simple Echo Serverecho.html在页面上输入文本通过 MQTT 发布到主题test同时订阅该主题把收到的消息打印出来形成回声效果Bunny Drawingbunny.html在 canvas 画布上给兔子画翅膀鼠标轨迹以 JSON 形式发布到主题bunny并订阅该主题实时接收其他浏览器画出的轨迹——打开两个浏览器窗口即可体验多人实时协作。下面分别拆解这两个示例的 MQTT 客户端代码。Echo 示例订阅与发布的完整链路echo.html 的 MQTT 部分分为四步。第一步创建 Paho MQTT 客户端var wsbroker location.hostname; //mqtt websocket enabled broker var wsport 15675; // port for above var client new Paho.MQTT.Client(wsbroker, wsport, /ws, myclientid_ parseInt(Math.random() * 100, 10));主机名取自当前页面的 hostname即示例站点所在主机端口固定为15675路径为/ws这是rabbitmq_web_mqtt插件的默认 WebSocket 端点客户端 ID 用随机数后缀避免多个页面冲突MQTT 协议要求同一时刻同一 clientId 只能有一个在线连接。第二步注册回调client.onConnectionLost function (responseObject) { debug(CONNECTION LOST - responseObject.errorMessage); }; client.onMessageArrived function (message) { debug(RECEIVE ON message.destinationName PAYLOAD message.payloadString); print_first(message.payloadString); };onConnectionLost处理连接中断onMessageArrived处理到达的消息并回显到 Received 面板。第三步连接并订阅var options { timeout: 3, keepAliveInterval: 30, onSuccess: function () { debug(CONNECTION SUCCESS); client.subscribe(test, {qos: 1}); }, onFailure: function (message) { debug(CONNECTION FAILURE - message.errorMessage); } }; if (location.protocol https:) { options.useSSL true; } client.connect(options);连接成功回调中订阅主题testQoS 为 1至少一次投递。当页面通过 HTTPS 访问时自动开启useSSL走 WSS 加密通道。第四步发送消息message new Paho.MQTT.Message(data); message.destinationName test; client.send(message);表单提交时把输入内容封装为Paho.MQTT.Message指定目的地主题test后发送。由于页面同时订阅了test消息经过 broker 回环后会触发onMessageArrived从而在界面上收到自己发的内容——这正是 Echo 名称的由来。Bunny 示例基于 MQTT 的多人实时协作bunny.html 展示了比简单收发更实用的场景把 MQTT 当实时消息总线同步多个浏览器之间的状态。核心思路鼠标在 canvas 上移动时把线段起点终点封装为 JSONvar p {x1:prev.x, y1:prev.y, x2:curr.x, y2:curr.y} lines.push(p); draw(p); send(JSON.stringify(p));通过 MQTT 发布到主题bunnysend function(data) { message new Paho.MQTT.Message(data); message.destinationName bunny; client.send(message); };订阅同一主题收到远端消息时解析 JSON 并立即绘制client.onMessageArrived function (message) { var p JSON.parse(message.payloadString); lines.push(p); draw(p, true); };连接参数与 Echo 示例一致15675 端口、/ws路径、随机 clientId订阅bunny主题 QoS 1。由于每个页面既发又收两个浏览器同时打开时任一方画出的线条都会实时出现在对方的画布上。这个示例提供了一个可复用的范式用 JSON 序列化状态增量、以主题作为频道、通过 MQTT 广播足以支撑多人白板、协作标注、IoT 控制面板等实时应用。底层原理静态示例站点是如何被服务的示例页面并不是由传统 Web 服务器托管而是由插件在 Erlang 应用启动时通过rabbit_web_dispatch注册的静态上下文提供。rabbit_web_mqtt_examples_app.erl 是插件的 application 回调模块start(_Type, _StartArgs) - {ok, Listener} application:get_env(rabbitmq_web_mqtt_examples, listener), {ok, _} rabbit_web_dispatch:register_static_context( web_mqtt_examples, Listener, web-mqtt-examples, ?MODULE, priv, WEB-MQTT: examples), supervisor:start_link({local, ?MODULE}, ?MODULE, []). stop(_State) - rabbit_web_dispatch:unregister_context(web_mqtt_examples), ok.关键调用是rabbit_web_dispatch:register_static_context/6监听器配置来自应用环境变量listener其默认值在 Makefile 的PROJECT_ENV中定义为[{port, 15670}]即绑定 15670 端口静态资源的根目录是插件priv目录priv/其中正是index.html、echo.html、bunny.html、mqttws31.js、main.css等文件上下文名为web-mqtt-examples显示名称为WEB-MQTT: examples应用停止时调用unregister_context注销上下文并释放监听器。因此启动示例站点本质上是在 broker 内部注册一个由 RabbitMQ Web 分发框架托管的静态资源上下文端口、目录、上下文名全部由插件自身声明对用户而言只需访问 15670 端口即可。示例中的 MQTT 客户端库 mqttws31.js 是 Eclipse Paho 项目的 MQTT V3.1 / V3.1.1 JavaScript 客户端全局暴露Paho.MQTT命名空间支持连接/断开、keep-alive 心跳、SSL/TLS、订阅接收与发布等能力随插件一起静态分发页面无需额外安装依赖jQuery 则通过 CDN 引入。与 rabbitmq_web_mqtt 网关的协作与配置示例页面的所有 MQTT 流量都汇入rabbitmq_web_mqtt插件启动的 WebSocket 网关。从 rabbit_web_mqtt_app.erl 可以看到网关的启动逻辑Routes cowboy_router:compile([{_, [ {get_env(ws_path, /ws), rabbit_web_mqtt_handler, [{ws_opts, CowboyWsOpts}]} ]}]), ... get_tcp_conf(TCPConf0) - TCPConf1 case proplists:get_value(port, TCPConf0) of undefined - [{port, 15675}|TCPConf0]; _ - TCPConf0 end,WebSocket 路径默认/ws与示例页面的连接路径一致TCP 监听端口默认15675与示例页面的wsport一致路由由cowboy_router编译rabbit_web_mqtt_handler负责把 WebSocket 帧转换为 MQTT 报文TLS 监听默认不启用启用后走 HTTPS/WSS示例页面在 HTTPS 下自动设置useSSL。相关配置项定义在 rabbitmq_web_mqtt.schemaCuttlefish 格式前缀web_mqtt.*与示例直接相关的包括配置项对应应用参数默认值说明web_mqtt.tcp.listenerrabbitmq_web_mqtt.tcp_config[{port, 15675}]TCP 监听地址与端口可设none关闭web_mqtt.tcp.port/web_mqtt.tcp.ip同上15675 / 全部接口单独指定端口或绑定 IPweb_mqtt.ws_pathrabbitmq_web_mqtt.ws_path/wsWebSocket 路径web_mqtt.ssl.listenerrabbitmq_web_mqtt.ssl_config默认不启用TLS 监听器web_mqtt.allow_originsrabbitmq_web_mqtt.allow_origins不限制允许的跨域来源白名单web_mqtt.proxy_protocolrabbitmq_web_mqtt.proxy_protocolfalse是否启用 PROXY 协议例如在rabbitmq.conf中调整网关端口与路径后示例页面的wsport与/ws需同步修改才能继续工作——这正是两个插件示例与网关需要配套使用的原因。从示例到自有应用改造要点把示例页面改造成自己的浏览器端 MQTT 应用只需关注四处连接参数new Paho.MQTT.Client(host, port, /ws, clientId)中的端口与路径必须与web_mqtt.tcp.port、web_mqtt.ws_path配置一致生产环境应使用唯一 clientId避免与在线客户端冲突主题规划示例使用test与bunny两个主题自有应用应根据业务划分主题层级并利用 QoS 0/1/2 控制投递语义消息编码Echo 用纯文本、Bunny 用 JSON 传输结构化坐标复杂场景建议统一 JSON 或二进制编码并在onMessageArrived中解析安全页面走 HTTPS 时客户端会自动启用useSSL跨域部署时需通过web_mqtt.allow_origins配置允许的来源防止浏览器同源策略拦截。常见问题15670 页面打不开确认rabbitmq_web_mqtt_examples已启用且监听器成功启动broker 日志中应有静态上下文注册信息端口冲突时修改 Makefile 中的listener配置后重新编译安装插件。页面能打开但 MQTT 连不上绝大多数情况是rabbitmq_web_mqtt网关未启动或端口被占检查 15675 端口监听状态与web_mqtt.tcp.listener配置浏览器控制台会打印CONNECTION FAILURE与错误信息可直接定位。多个标签页 clientId 冲突示例通过随机数规避自有应用应使用可区分、可回收的 clientId 策略如前缀随机串。HTTPS 页面连不上确认web_mqtt.ssl.listener已启用且证书有效或调整页面为非 HTTPS 访问混合内容HTTPS 页面请求 WS会被浏览器默认拦截。小结rabbitmq_web_mqtt_examples是理解 RabbitMQ MQTT-over-WebSocket 能力的最佳起点15670 端口托管静态示例页15675 端口承载 Web MQTT 网关Echo 示例讲透订阅/发布Bunny 示例演示基于 MQTT 的多人实时协作。结合 rabbit_web_mqtt_examples_app.erl 的静态上下文注册与 rabbitmq_web_mqtt.schema 的网关配置你既能读懂其运行机制也能在此基础上快速搭建浏览器直连 RabbitMQ 的实时消息应用。赞分享后端消息队列消息路由【免费下载链接】rabbitmq-serverOpen source RabbitMQ: core server and tier 1 (built-in) plugins项目地址https://gitcode.com/gh_mirrors/ra/rabbitmq-server点击查看免费下载相关推荐Eclipse Mosquitto WebSocket支持浏览器端MQTT通信实现Eclipse Mosquitto WebSocket支持浏览器端MQTT通信实现 MQTTMessage Queuing Telemetry Transp物联网消息队列后端【免费下载】 轻松实现MQTT通信App Inventor MQTT插件推荐轻松实现MQTT通信App Inventor MQTT插件推荐 项目介绍 在物联网IoT和智能设备日益普及的今天MQTT协议因其轻量级和高效性成为了设MQTTX WebSocket客户端使用教程浏览器中的MQTT测试利器MQTTX WebSocket客户端使用教程浏览器中的MQTT测试利器 想要在浏览器中快速测试MQTT协议吗MQTTX WebSocket客户端是您的终极解开发工具物联网后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
