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

简介: MQTT X Web无需繁杂的下载安装步骤,只需在浏览器内打开页面,即可在线快速连接和测试MQTT服务与应用,了解和探索MQTT协议。

由 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 X Web.png

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 服务。

MQTT X Web 创建连接.png

订阅管理

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

MQTTX Web 订阅.png

消息发布/接收

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

MQTT X Web 消息收发.png

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

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

MQTT X Web 消息收发1.png

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

结语

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

相关实践学习
快速体验阿里云云消息队列RocketMQ版
本实验将带您快速体验使用云消息队列RocketMQ版Serverless系列实例进行获取接入点、创建Topic、创建订阅组、收发消息、查看消息轨迹和仪表盘。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
目录
相关文章
|
2月前
|
运维 数据可视化 C++
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
2025年热门Web化容器部署工具对比:Portainer与Websoft9。Portainer以轻量可视化管理见长,适合技术团队运维;Websoft9则提供一站式应用部署与容器管理,内置丰富开源模板,降低中小企业部署门槛。两者各有优势,助力企业提升容器化效率。
274 1
2025 热门的 Web 化容器部署工具对比:Portainer VS Websoft9
|
7月前
|
消息中间件 存储 数据采集
4步实现状态机驱动的MQTT客户端,快速接入OneNet (1)
本文介绍了基于状态机驱动的MQTT客户端快速接入OneNet平台的实现方法,通过4步完成模块设计。文章以开源项目`Sparrow`为基础,引入`OneNetMqtt`业务模块,采用事件驱动模型和双层状态机设计,实现设备状态管理、消息处理及定时任务等功能。模块分为三层:`OneNetManager`负责核心逻辑,`OneNetDevice`管理设备信息,`OneNetDriver`处理Socket与MQTT通信。验证结果显示设备连接、数据上报及下线功能正常,稳定性良好。该设计简化了复杂条件判断,增强了系统灵活性与可扩展性,适用于实际项目参考。文末提供源码获取方式,助力读者实践与学习。
394 118
|
5月前
|
XML 安全 前端开发
一行代码搞定禁用 web 开发者工具
在如今的互联网时代,网页源码的保护显得尤为重要,特别是前端代码,几乎就是明文展示,很容易造成源码泄露,黑客和恶意用户往往会利用浏览器的开发者工具来窃取网站的敏感信息。为了有效防止用户打开浏览器的 Web 开发者工具面板,今天推荐一个不错的 npm 库,可以帮助开发者更好地保护自己的网站源码,本文将介绍该库的功能和使用方法。 功能介绍 npm 库名称:disable-devtool,github 路径:/theajack/disable-devtool。从 f12 按钮,右键单击和浏览器菜单都可以禁用 Web 开发工具。 🚀 一行代码搞定禁用 web 开发者工具 该库有以下特性: • 支持可配
295 22
|
9月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
502 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
8月前
|
监控 Linux PHP
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
223 20
|
10月前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
598 17
Selenium:强大的 Web 自动化测试工具
|
10月前
|
Java 开发者 微服务
Spring Boot 入门:简化 Java Web 开发的强大工具
Spring Boot 是一个开源的 Java 基础框架,用于创建独立、生产级别的基于Spring框架的应用程序。它旨在简化Spring应用的初始搭建以及开发过程。
366 7
Spring Boot 入门:简化 Java Web 开发的强大工具
|
8月前
|
监控 关系型数据库 MySQL
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
197 0
|
11月前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
593 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
11月前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。