Node-RED: 透過 WebSockets 連接到 MQTT

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

👋 歡迎來到 Stackhero 文件！

Stackhero 提供即用型的 Node-RED 雲端 解決方案，帶來多項好處，包括：

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

節省時間 和 簡化您的生活：只需 5 分鐘 即可嘗試 Stackhero 的 Node-RED 雲端託管 解決方案！

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