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一站式入门使用
从源码编译、部署broker、部署namesrv,使用java客户端首发消息等一站式入门RocketMQ。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
目录
相关文章
|
8天前
|
安全 网络协议 网络安全
【Docker项目实战】使用Docker部署web-check网站分析工具
【4月更文挑战第20天】使用Docker部署web-check网站分析工具
67 1
|
7天前
|
Android开发
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
|
8天前
|
消息中间件 负载均衡 应用服务中间件
MQ产品使用合集之使用的RocketMQ5.1.3时,grpc客户端没有产生消息轨迹如何解决
消息队列(MQ)是一种用于异步通信和解耦的应用程序间消息传递的服务,广泛应用于分布式系统中。针对不同的MQ产品,如阿里云的RocketMQ、RabbitMQ等,它们在实现上述场景时可能会有不同的特性和优势,比如RocketMQ强调高吞吐量、低延迟和高可用性,适合大规模分布式系统;而RabbitMQ则以其灵活的路由规则和丰富的协议支持受到青睐。下面是一些常见的消息队列MQ产品的使用场景合集,这些场景涵盖了多种行业和业务需求。
31 3
|
8天前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
24 4
|
8天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
17 0
|
8天前
|
前端开发 数据管理 Ruby
blog-engine-10-middleman 静态站点生成器,利用了现代 Web 开发中的所有快捷方式和工具
这篇内容介绍了Middleman,一个基于Ruby的静态网站生成器。Middleman的特点包括静态网站生成、模板系统、前端技术支持、数据管理和简单的部署。安装步骤涉及安装Ruby和运行`gem install middleman`。使用方法包括在`source`目录编写内容,使用`middleman server`预览,`middleman build`构建网站,然后部署到服务器。Middleman的优势在于速度、灵活性和数据管理,但需要Ruby知识,且社区规模较小。适合熟悉Ruby并寻求强大建站工具的用户。
|
8天前
|
安全 Linux iOS开发
【热门话题】 Fiddler:一款强大的Web调试代理工具——安装与使用详解
Fiddler是一款强大的Web调试工具,适用于Windows、macOS和Linux,用于捕获、记录和分析HTTP/HTTPS流量。本文详细介绍了Fiddler的安装步骤,包括下载、安装和配置,特别是信任根证书和代理设置。在使用方面,讲解了如何启动/停止捕获流量、查看和管理会话,以及重发请求、编辑请求/响应和清除会话。此外,还探讨了进阶功能,如自定义过滤规则、使用AutoResponder模拟服务器响应、性能分析和统计,以及插件扩展和脚本编写。Fiddler是学习HTTP协议和解决Web问题的得力工具。
58 1
|
8天前
|
存储 前端开发 Linux
Cockpit - 基于Web的Linux管理工具的安装和使用教程
Cockpit - 基于Web的Linux管理工具的安装和使用教程
47 0
|
8天前
|
资源调度 JavaScript 安全
Linux系统之部署web-check网站分析工具
【4月更文挑战第3天】Linux系统之部署web-check网站分析工具
79 9
|
8天前
|
SQL 运维 监控
什么是Web应用程序防火墙,WAF与其他网络安全工具差异在哪?
总之,WAF是一种专门用于保护Web应用程序的网络安全工具,与其他网络安全工具在焦点、层级、检测方式、部署位置和针对性等方面存在差异,以确保Web应用程序的安全运行。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
126 0

热门文章

最新文章