MQTT Essentials Special: MQTT over WebSockets


Welcome to the MQTT Essentials, a blog series about the core features and concepts in the MQTT protocol. The last 10 posts have covered all important aspects and features of MQTT. This week we explain how you can use all of these features in the browser as well and what’s the benefit of it.

MQTT over WebSockets

We have learned in the MQTT Essentials that MQTT is ideal for constrained devices and unreliable networks. It’s also perfect for sending messages with a very low overhead. It would be quite nice to send and receive MQTT messages directly in the browser of a mobile phone or in general. This is possible by MQTT over WebSockets. It enables the browser to leverage all MQTT features and this can be used for the following example use case:

  • Display live information from a device or sensor
  • Receive push notifications, for example if there is an alert or critical condition
  • See the current status of devices with LWT and retained messages
  • Communicate efficiently with a mobile web application

What does it mean from a technical point of view?

Each modern browser that supports WebSockets can be a full-fledged MQTT client with all the features described in the MQTT Essentials. Things like Keep Alive, Last Will and Testament, Quality of Service and Retained Messages work the same way as in native MQTT. The only thing we need is a JavaScript library which enables MQTT over WebSockets. We also need a broker which supports MQTT over webSockets, of course HiveMQ offers this feature out-of-the-box.

How does it work?

WebSocket is a network protocol that provides bi-directional communication between a browser and a web server. It was standardized in 2011 and all modern browsers have support for WebSockets built-in. Similar to MQTT, WebSockets are based on TCP.


When using the term MQTT over WebSockets, it means that a MQTT message, for example CONNECT or PUBLISH is encapsulated by one or more WebSocket frames, when transferring over the network. WebSockets are suitable as transport for MQTT because the communication is bi-directional, ordered and lossless (which is essentially because WebSockets also leverage TCP). In order to communicate with an MQTT broker over WebSockets, the broker must be able to handle native WebSockets. Brave people can also use a webserver and bridge the WebSockets to the MQTT broker, we don’t recommend this, though. When using HiveMQ it is very easy to get started with WebSockets, just enable the native support in the configuration, more information can be found in the blog post MQTT over WebSockets with HiveMQ.

Why not use MQTT directly?

At the moment it is not possible to speak pure MQTT within a browser, because there is no possibility to open a raw TCP connection. This will eventually change with the Socket API, but at the moment there are only a few browsers implementing this API.

Get started

If you want to get started with MQTT over WebSockets there are a few good resource you should check out:

Secure WebSockets

It is also possible to use secure Websockets with encryption of the whole connection by leveraging TLS. This works seamlessly with HiveMQ as well, there are some gotchas, we pointed out in our User Guide.

So that’s the end of the MQTT Essentials series. We hope you enjoyed it. No worries, the 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 we’ll hope to see you on the next MQTT Monday!

You want to read more blog post related to MQTT? Then sign up for our newsletter and get notified on each new post as soon as its available. If you prefer RSS, you can subscribe to our RSS feed here.


  1. I think that the most interesting case is an hybrid environments, in which some clients perform publish/subscribe operations in “pure” MQTT while others do the same but use MQTT over WebSockets. Is this possible with HiveMQ?

    1. Hi Massimo,

      yes, this is absolutely possible. You can define as many plain TCP listeners, SSL listeners, websocket listeners and websocket+SSL listeners as you want. So if you have a hybrid environment, you can connect clients via plain MQTT and other clients via websockets. You can learn more about that here:

      Hope this helps,

  2. Karthikeyan says:

    I need to publish message in Hive MQTT. For that what is frame format i have to publish message. what are all the content i have to add in that frame, like Topic, QoS, Message, Payload, Retained, etc.

    1. Hi Karthikeyan,

      you can use one of the many already existing MQTT client libraries to publish a message to HiveMQ.
      Some of them are listed here (including example code):

      Hope that helps,
      Christoph from the HiveMQ team.

    2. Karthikeyan says:

      I am using AVR microcontroller and SIM900 via TCP with help of serverid and port i am able to connect with MQTT broker. Then what is way to publish message

  3. Haroon Ahmed says:

    I am using MQTT WebSocket client ( Once it is connected to broker the dot color is changed to green and connected is written. But when i disconnect the internet on my device the status is still connected with green color. Is there any solution of this issue ?

    1. Hi,

      the green color will go to red either instantly or when (keepAlive * 1,5) seconds have passed at the latest.

      You can read more about keepAlive here:

      The HiveMQ Team

  4. Valery says:

    I can’t understand – what username and password should i use (and how to create them) when connecting my mqtt client (based on esp8266 module) to

    1. Hi Valery,

      Nice to see you’re taking an interest in MQTT and HiveMQ.

      Our public broker doesn’t require any authentication.

      Kind regards,
      Abdullah from the HiveMQ Team.

Leave a Reply

Your email address will not be published. Required fields are marked *