Node-RED: 透過 WebSockets 連接 MQTT

本文件是MQTT 伺服器指南的一部分。請在此處查看完整指南：如何將 Node-RED 連接到 Mosquitto MQTT 伺服器。

歡迎使用 Stackhero 文件中心

Stackhero 提供全代管的 Node-RED cloud 環境，讓您能夠迅速建立自動化流程：

• 內建 MQTT 伺服器（Mosquitto），輕鬆整合 IoT。
• 完整存取 Node-RED 管理介面，方便管理流程與設定。
• 內含 Node-RED Dashboard，即時資料視覺化。
• 專屬 SMTP 電子郵件伺服器，發信無限制。
• 一鍵更新，輕鬆保持您的實例為最新狀態。
• 自訂網域名稱，自動啟用 HTTPS：例如 https://node-red.your-company.com。
• 高效能與強化安全性，採用專屬私有基礎架構。

您只需約 5 分鐘，即可擁有一個安全、可用於生產環境的 Node-RED cloud hosting 實例。Stackhero 會為您處理安裝、更新與基礎架構，讓您專注於自動化流程的開發。

您可以選擇使用 MQTT 協定或 WebSockets 來連接 Mosquitto MQTT 伺服器。

雖然 MQTT 協定輕量且非常適合 IoT 裝置，但它並未被網頁瀏覽器原生支援。如果您希望從瀏覽器與 MQTT 伺服器互動，建議使用 WebSockets。這種方式可將 MQTT 流量封裝於 WebSocket 協定中，並可與 Stackhero 的服務無縫整合。

要啟用 WebSocket 連線，只需在 Stackhero 控制台中啟用「WebSocket Support」選項。啟用後，請將您的客戶端設定為使用 WebSocket URL：wss://<XXXXXX>.stackhero-network.com:443/mqtt。請記得將預設的 mqtts://<XXXXXX>.stackhero-network.com 替換為此 WebSocket URL，以便從瀏覽器進行連線。

選擇 MQTT 函式庫

在開發時，您可能會發現「MQTT.js」函式庫特別實用。這是一套強大的 JavaScript 函式庫，支援 Node.js 及瀏覽器環境。您可以參考其官方儲存庫以取得更多資訊。

瀏覽器透過 WebSockets 連接 MQTT 的範例

如果您需要一個實際範例，說明如何從瀏覽器透過 WebSockets 連接到 MQTT 伺服器，可以參考這個儲存庫：https://github.com/stackhero-io/mqttWebSocketGettingStarted。請依您的設定修改 src/index.html 檔案中的 url、username 與 password。

MQTT WebSocket 範例

在嘗試此設定前，請先確認您已在 Stackhero 控制台啟用 WebSocket 支援，以確保瀏覽器連線能順利運作。