MQTT X Web：在线的 MQTT 5.0 客户端工具

由 EMQ 开源的 MQTT X 是一款 MQTT 5.0 跨平台桌面客户端。MQTT X 为连接测试各类 MQTT 消息服务器而生，支持快速创建多个同时在线的 MQTT 客户端连接，采用一键式的连接方式和简洁的图形界面，帮助使用者便捷地测试 MQTT/TCP、MQTT/TLS、MQTT/WebSocket 的连接、发布、订阅功能，探索更多 MQTT 协议特性。

在近期发布的 v1.8.0 中，除了通过新增的快速复制连接功能优化使用体验之外，还扩展了两个新的使用场景，即增加了 CLI（命令行） 和 Web 端（浏览器网页）这两种新的交互方式 。这使得 MQTT X 1.8.0 成为支持使用场景最完整的 MQTT 客户端工具。用户可以根据使用需求，自行选择下载桌面客户端、使用终端命令行或是在桌面浏览器上快速完成对 MQTT 的连接测试。

MQTT X Web 介绍

对于一些初次体验 MQTT 协议的新用户来说，快速理解并上手使用 MQTT 协议是首要需求。MQTT X Web 则为其提供了一种更为便捷的方式：无需繁杂的下载安装步骤，只需在浏览器内打开页面，即可快速连接和测试 MQTT 服务与应用，了解和探索 MQTT 协议。

MQTT X Web 是一款在线 MQTT 5.0 客户端工具，即运行在浏览器上的 MQTT 5.0 WebSocket 客户端工具。其具有以下功能特性：

• 支持通过普通或者加密的 WebSocket 端口连接至 MQTT 服务；
• 连接的新建、编辑、删除以及缓存连接，方便下次访问使用；
• 不同连接的订阅列表管理；
• 消息发布、接收、以及接收到新消息时提示，同时也支持按照消息类型过滤消息列表。

MQTT X Web 网站：https://mqttx.app/zh/web

MQTT X Web 在线使用地址：http://www.emqx.io/online-mqtt-client

MQTT X Web GitHub 仓库：https://github.com/emqx/MQTTX/tree/main/web

MQTT over WebSocket

近年来随着 Web 前端的快速发展，浏览器新特性层出不穷，越来越多的应用可以在浏览器端通过浏览器渲染引擎实现，Web 应用的即时通信方式 WebSocket 也因此得到了广泛的应用。

MQTT X Web 核心就是使用 WebSocket 连接到 MQTT 服务，因此从功能性来说，MQTT X Web 不仅使用方便，还能提供 MQTT over WebSocket 的连接测试功能。当您需要在 Web 应用场景中使用 MQTT 时，就可以通过 WebSocket 来连接和使用，使用 MQTT X Web 来调试您的 MQTT 服务与应用，加快您的应用生产并提高稳定性。

基于现代浏览器

MQTT X Web 基于现代浏览器技术开发，将应用部署到网页上。用户无需下载和安装 MQTT X 软件包，打开浏览器即可使用。同时还可将新建的连接和消息信息等持久化存储到浏览器内，方便下次访问使用。

开放源码

MQTT X Web 代码与 MQTT X 桌面应用和 MQTT X CLI 保持一致，基于 Apache License 2.0 协议开放源码，高级用户可以直接到代码仓库内修改和使用 MQTT X Web，并将其部署到任意您的使用环境中。

使用 MQTT X Web 开发和调试 MQTT 服务与应用

MQTT X Web 同样使用了图形化页面，采用聊天界面形式来帮助您快速测试 MQTT 服务，使用方式与 MQTT X 桌面应用基本一致。

打开浏览器后输入 http://www.emqx.io/online-mqtt-client/ 就可以访问到 MQTT X Web。

更多详细的使用介绍可以参考 MQTT X 的使用文档：https://mqttx.app/zh/docs/get-started。

为测试 MQTT X Web 的使用，我们需要准备一个 MQTT 服务，本文将使用 EMQ 提供的 免费公共 MQTT 服务器，该服务基于 MQTT 物联网云平台 - EMQX Cloud 创建，服务器接入信息如下：

• Broker: broker.emqx.io
• TCP Port: 1883
• WebSocket Port: 8083

创建连接

点击页面中的的 New Connection 按钮，在页面里输入连接信息，点击右上角即可快速创建并连接到 MQTT 服务。

订阅管理

创建并成功连接后，点击订阅列表中的 New Subscription 按钮弹出订阅列表框，在该页面可进行新建/取消订阅操作。

消息发布/接收

点击页面右侧底部的输入框，可弹出消息发布框，填写好 Topic 及 Payload 字段后点击右下角的发布图标可发布消息，发布成功后的消息将会显示在消息列表的右侧。

订阅主题所收到的消息将会显示在消息列表的左侧，可点击右上角的消息类型切换按钮只显示已接收或是已发送的消息。

最后，我们再通过使用 MQTT X 的桌面客户端来和 MQTT X Web 连接到同一个 MQTT 服务，以测试和验证 MQTT X Web 的功能。首先使用 MQTT X Web 发布一条消息，通过 MQTT X 桌面客户端来接收，再反向使用 MQTT X 桌面客户端发送一条消息到 MQTT X Web。此时，我们可以看到两边都收到了各自收发的消息。

至此，我们就完成了使用 MQTT X Web 对 MQTT 消息发布订阅功能的测试和验证。在接下来的 1.8.1 版本中，我们还将继续优化页面样式，完善测试功能，支持更多的 MQTT 5.0 属性设置等。

结语

MQTT X Web 的发布，为物联网开发者进行 MQTT 连接测试提供了一种新的选择。而对命令行调用、桌面客户端下载和在线浏览器这几种交互形式的完整支持，使得 MQTT X 1.8.0 可帮助不同使用场景需求的用户完成对 MQTT 服务或应用的开发与调试，从而提高用户自身相关业务能力与稳定性。简单易用的测试客户端工具 MQTT X 结合高效可靠的物联网消息服务器 EMQX，将帮助物联网开发者构建具有竞争力的物联网平台与应用。

版权声明： 本文为 EMQ 原创，转载请注明出处。

原文链接：https://www.emqx.com/zh/blog/online-mqtt-client