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版的基础消息收发功能,涵盖实例创建、Topic、Group资源创建以及消息收发体验等基础功能模块。
消息队列 MNS 入门课程
1、消息队列MNS简介 本节课介绍消息队列的MNS的基础概念 2、消息队列MNS特性 本节课介绍消息队列的MNS的主要特性 3、MNS的最佳实践及场景应用 本节课介绍消息队列的MNS的最佳实践及场景应用案例 4、手把手系列:消息队列MNS实操讲 本节课介绍消息队列的MNS的实际操作演示 5、动手实验:基于MNS,0基础轻松构建 Web Client 本节课带您一起基于MNS,0基础轻松构建 Web Client
目录
相关文章
|
12天前
|
人工智能 前端开发 计算机视觉
Inpaint-Web:纯浏览器端实现的开源图像处理工具
在刷短视频时,常看到情侣在景区拍照被路人“抢镜”,男朋友用手机将路人“P”掉,既贴心又有趣。最近我发现了一个纯前端实现的开源项目——inpaint-web,可在浏览器端删除照片中的部分内容,非常酷。该项目基于 WebGPU 和 WASM 技术,支持图像修复与放大,已在 GitHub 上获得 5.1k Star。项目地址:[GitHub](https://github.com/lxfater/inpaint-web)。
53 3
 Inpaint-Web:纯浏览器端实现的开源图像处理工具
|
26天前
|
前端开发 JavaScript 开发者
构建响应式设计的现代Web应用:实用技巧与工具
【10月更文挑战第24天】本文介绍了构建响应式Web应用的实用技巧和工具,涵盖流体网格布局、弹性图片、CSS媒体查询、CSS Grid和Flexbox、响应式导航菜单、图片和字体的响应式处理,以及测试和调试工具。掌握这些技能将帮助开发者提升用户体验和项目适应性。
|
2月前
|
缓存 前端开发 JavaScript
深入了解Webpack:现代Web开发的核心工具
【10月更文挑战第11天】深入了解Webpack:现代Web开发的核心工具
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:简化Web开发的强大工具
【10月更文挑战第11天】深入了解jQuery:简化Web开发的强大工具
15 0
|
3月前
|
机器学习/深度学习 算法 开发工具
Python Web开发工具
Python Web开发工具
35 3
|
2月前
|
开发框架 .NET 开发工具
visualstudio如何加入工作插件---Web developer工具
visualstudio如何加入工作插件---Web developer工具
26 0
|
3月前
|
安全 前端开发 JavaScript
Web安全-网页开发者工具
Web安全-网页开发者工具
46 7
|
3月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
369 3
|
4月前
|
测试技术
基于LangChain手工测试用例转Web自动化测试生成工具
该方案探索了利用大模型自动生成Web自动化测试用例的方法,替代传统的手动编写或录制方式。通过清晰定义功能测试步骤,结合LangChain的Agent和工具包,实现了从功能测试到自动化测试的转换,极大提升了效率。不仅减少了人工干预,还提高了测试用例的可维护性和实用性。
|
4月前
|
JSON 前端开发 JavaScript
Web中的客户端和服务器端
Web中的客户端和服务器端
176 1
下一篇
无影云桌面