Node-RED: Connecting to MQTT via WebSockets
This documentation is part of the MQTT server guide. You can view the complete guide here: How to connect Node-RED to the Mosquitto MQTT server.
👋 Welcome to the Stackhero documentation!
Stackhero offers a ready-to-use Node-RED cloud solution that provides a host of benefits, including:
- MQTT server included (Mosquitto).
- Full access to Node-RED admin UI.
- Node-RED Dashboard included.
- Unlimited and dedicated SMTP email server included.
- Effortless updates with just a click.
- Customisable domain name secured with HTTPS (for example, https://node-red.your-company.com).
- Optimal performance and robust security powered by a private and dedicated VM.
Save time and simplify your life: it only takes 5 minutes to try Stackhero's Node-RED cloud hosting solution!
You have the option to connect to the Mosquitto MQTT server either via the MQTT protocol or using WebSockets.
While the MQTT protocol is lightweight and particularly well-suited to IoT devices, it is not natively supported by web browsers. If you wish to interact with your MQTT server from a browser, it is recommended to use WebSockets. This method encapsulates MQTT traffic within the WebSocket protocol and works seamlessly with Stackhero's services.
To enable WebSocket connectivity, simply activate the "WebSocket Support" option in your Stackhero dashboard. Once enabled, configure your client to use the WebSocket URL: wss://<XXXXXX>.stackhero-network.com:443/mqtt. Remember to replace the default mqtts://<XXXXXX>.stackhero-network.com with this WebSocket URL for browser-based connections.
Choosing an MQTT library
For development, the "MQTT.js" library is particularly recommended. It is a robust JavaScript library compatible with both Node.js and browser environments. You can find more information in its official repository.
Example: connecting from a browser to MQTT via WebSockets
For a practical example of connecting from a browser to the MQTT server using WebSockets, you can refer to this repository: https://github.com/stackhero-io/mqttWebSocketGettingStarted. Feel free to modify the src/index.html file with your server's url, username, and password to suit your configuration.
MQTT WebSocket example
Before testing this setup, ensure that WebSocket support is enabled in your Stackhero dashboard. This will guarantee smooth operation for browser-based connections.