Node-RED: 透過 WebSockets 連接 MQTT

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

👋 歡迎來到 Stackhero 文檔！

Stackhero 提供即用型的 Node-RED cloud 解決方案，帶來多項優勢，包括：

• 包含 MQTT 伺服器（Mosquitto）。
• 完整訪問 Node-RED 管理介面。
• 包含 Node-RED 儀表板。
• 包含無限制且專用的 SMTP 電郵伺服器。
• 只需點擊即可輕鬆更新。
• 使用 HTTPS 保護的可自訂域名（例如，https://node-red.your-company.com）。
• 由專用私有 VM 提供的最佳性能和強大安全性。

節省時間並簡化您的生活：只需 5 分鐘即可嘗試 Stackhero 的 Node-RED cloud hosting 解決方案！

您可以選擇使用 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 支援，以確保瀏覽器連線能順利運作。