由 EMQ 開源的 MQTT X 是一款 MQTT 5.0 跨平臺桌面客戶端。MQTT X 為連線測試各類 MQTT 訊息伺服器而生，支援快速建立多個同時線上的 MQTT 客戶端連線，採用一鍵式的連線方式和簡潔的圖形介面，幫助使用者便捷地測試 MQTT/TCP、MQTT/TLS、MQTT/WebSocket 的連線、釋出、訂閱功能，探索更多 [MQTT 協議特性](https://www.emqx.com/zh/mqtt)。

在近期釋出的 v1.8.0 中，除了透過新增的快速複製連線功能最佳化使用體驗之外，還擴充套件了兩個新的使用場景，即增加了 CLI（命令列） 和 Web 端（瀏覽器網頁）這兩種新的互動方式 。這使得 MQTT X 1.8.0 成為支援使用場景最完整的 [MQTT 客戶端工具](https://www.emqx.com/zh/blog/mqtt-client-tools)。使用者可以根據使用需求，自行選擇下載桌面客戶端、使用終端命令列或是在桌面瀏覽器上快速完成對 MQTT 的連線測試。

## MQTT X Web 介紹

對於一些初次體驗 MQTT 協議的新使用者來說，快速理解並上手使用 MQTT 協議是首要需求。[MQTT X Web](https://mqttx.app/zh/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](http://img.blog.itpub.net/blog/2022/08/08/aea5e39f0a8d8378.png?x-oss-process=style/bb "MQTT X Web")](https://www.emqx.com/zh/blog/online-mqtt-client "MQTT X 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 桌面應用](https://github.com/emqx/MQTTX)和 [MQTT X CLI ](https://github.com/emqx/MQTTX/tree/main/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 伺服器](https://www.emqx.com/zh/mqtt/public-mqtt5-broker)，該服務基於 [MQTT 物聯網雲平臺 - EMQX Cloud](https://www.emqx.com/zh/cloud) 建立，伺服器接入資訊如下：

- Broker: **broker.emqx.io**
- TCP Port: **1883**
- WebSocket Port: **8083**

### 建立連線

點選頁面中的的 **New Connection** 按鈕，在頁面裡輸入連線資訊，點選右上角即可快速建立並連線到 MQTT 服務。

[![MQTT X Web 建立連線](http://img.blog.itpub.net/blog/2022/08/08/2dee7abfc8825d94.png?x-oss-process=style/bb "MQTT X Web 建立連線")](https://www.emqx.com/zh/blog/online-mqtt-client "MQTT X Web 建立連線")

### 訂閱管理

建立併成功連線後，點選訂閱列表中的 **New Subscription** 按鈕彈出訂閱列表框，在該頁面可進行新建/取消訂閱操作。

[![MQTTX Web 訂閱](http://img.blog.itpub.net/blog/2022/08/08/b97cdce583299030.png?x-oss-process=style/bb "MQTTX Web 訂閱")](https://www.emqx.com/zh/blog/online-mqtt-client "MQTTX Web 訂閱")

### 訊息釋出/接收

點選頁面右側底部的輸入框，可彈出訊息釋出框，填寫好 **Topic** 及 **Payload** 欄位後點選右下角的釋出圖示可釋出訊息，釋出成功後的訊息將會顯示在訊息列表的右側。

[![MQTT X Web 訊息收發](http://img.blog.itpub.net/blog/2022/08/08/1d7662da86640518.png?x-oss-process=style/bb "MQTT X Web 訊息收發")](https://www.emqx.com/zh/blog/online-mqtt-client "MQTT X Web 訊息收發")

訂閱主題所收到的訊息將會顯示在訊息列表的左側，可點選右上角的訊息型別切換按鈕只顯示已接收或是已傳送的訊息。

最後，我們再透過使用 MQTT X 的桌面客戶端來和 MQTT X Web 連線到同一個 MQTT 服務，以測試和驗證 MQTT X Web 的功能。首先使用 MQTT X Web 釋出一條訊息，透過 MQTT X 桌面客戶端來接收，再反向使用 MQTT X 桌面客戶端傳送一條訊息到 MQTT X Web。此時，我們可以看到兩邊都收到了各自收發的訊息。

[![MQTT X Web 訊息收發](http://img.blog.itpub.net/blog/2022/08/08/4ef16a3e32e9a7d4.png?x-oss-process=style/bb "MQTT X Web 訊息收發")](https://www.emqx.com/zh/blog/online-mqtt-client "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](https://www.emqx.com/zh/products/emqx)，將幫助物聯網開發者構建具有競爭力的物聯網平臺與應用。

>版權宣告： 本文為 EMQ 原創，轉載請註明出處。
>
>原文連結：[https://www.emqx.com/zh/blog/online-mqtt-client](https://www.emqx.com/zh/blog/online-mqtt-client)

MQTT X Web：線上的 MQTT 5.0 客戶端工具

相關文章