MQTT over WebSockets - MQTT Essentials Special
Welcome to MQTT Essentials, a blog series about the core features and concepts in the MQTT protocol. In the last 10 posts of this series, we’ve covered the core concepts and features of MQTT. This week, we explain how you can use all of those great features in a browser (and what the benefits of doing so are).
MQTT over WebSockets
We’ve seen that MQTT is ideal for constrained devices and unreliable networks and that it is perfect for sending messages with a very low overhead. Naturally, it would be quite nice to send and receive MQTT messages directly in a browser. For example, on a mobile phone. MQTT over WebSockets is the answer. MQTT over WebSockets enables the browser to leverage all MQTT features. You can use these capabilities for many interesting use cases:
- Display live information from a device or sensor.
- Receive push notifications (for example, an alert or critical condition warning).
- See the current status of devices with LWT and retained messages.
- Communicate efficiently with mobile web applications.
What does all this mean from a technical point of view?
How does it work?
WebSocket is a network protocol that provides bi-directional communication between a browser and a web server. The protocol was standardized in 2011 and all modern browsers provide built-in support for it. Similar to MQTT, the WebSocket protocol is based on TCP.
In MQTT over WebSockets, the MQTT message (for example, a CONNECT or PUBLISH packet) is transferred over the network and encapsulated by one or more WebSocket frames. WebSockets are a good transport method for MQTT because they provide bi-directional, ordered, and lossless communication (WebSockets also leverage TCP). To communicate with an MQTT broker over WebSockets, the broker must be able to handle native WebSockets. Occasionally, people use a webserver and bridge WebSockets to the MQTT broker, but we don’t recommend this method. When using HiveMQ, it is very easy to get started with WebSockets. Simply enable the native support in the configuration. For more information, read MQTT over WebSockets with HiveMQ.
Why not use MQTT directly?
Currently, it is not possible to speak pure MQTT in a browser because it is not possible to open a raw TCP connection. Socket API will change that situation; however, few browsers implement this API yet.
If you want to get started with MQTT over WebSockets, here are some useful resources:
- For testing and debugging, the HiveMQ MQTT WebSocket client is ideal. The public broker of the MQTT Dashboard is the default broker of this client. All features of the client are documented in detail and the source code is available on GitHub.
- If you want to integrate MQTT into your existing web application, check out this step-by-step guide on how to build your own MQTT WebSockets client.
- To learn more about how to set up your own broker with WebSockets support, read MQTT over WebSockets.
You can leverage Transport Layer Security (TLS) to use secure WebSockets with encryption of the whole connection. This method works seamlessly with HiveMQ. However, there are a few points that you need to keep in mind. For more information, see the Gotcha section of our user guide.
That brings us to the end of the MQTT Essentials series. We hope you enjoyed it. No worries, MQTT Monday will continue! We already have a lot of great ideas for the upcoming weeks, so stay tuned for more helpful content about MQTT and HiveMQ.
Have a great week and see you on the next MQTT Monday!
Are you interested in learning more about MQTT? Sign up for our newsletter and get notified as soon as a new post is available. If you prefer RSS, subscribe to our RSS feed here.