MQTT over Websockets is a powerful technology that bridges the gap between web applications and real-time communication. By leveraging Websockets, modern browsers can act as full-fledged MQTT clients, enabling seamless real-time push notifications and efficient data exchange. This combination offers several advantages, including a low bandwidth footprint, minimal latency, and robust support for Quality of Service (QoS) semantics. Additionally, MQTT over Websockets supports queuing, retained messages, and Last Will and Testament features, ensuring reliable and efficient communication across various devices and platforms. With these capabilities, MQTT over Websockets is an ideal choice for building responsive and interactive web applications.

What is WebSocket?

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.

It keeps a single TCP connection open so that both endpoints can speak at any time. That persistent upgrade removes the overhead of new HTTP hand‑shakes, making it ideal for real‑time dashboards and IoT telemetry streams.

Why use MQTT over WebSocket?

We’ve seen that MQTT is ideal for constrained devices and unreliable networks and that it is perfect for sending messages with 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.

Need a conceptual protocol comparison? Read our blog, Understanding the Differences between MQTT and WebSockets for IoT.

How Does MQTT Over WebSockets Work?

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).

MQTT over WebSockets 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.

Getting Started with MQTT Over WebSockets using HiveMQ

1. Prepare a HiveMQ broker

Option	How-to	Additional Info
Docker – HiveMQ CE	docker run -d --name hivemq-ce -p 1883:1883 -p 8000:8000 hivemq/hivemq-ce	Port 8000 is the default WebSocket listener.
Self‑host ZIP	Download the latest CE, then edit conf/config.xml as shown below.	Great for local PoCs.
HiveMQ Cloud	Create a free cluster → enable WebSocket listener in the UI.	Secure (TLS) ports only.

HiveMQ implements all RFC6555 WebSocket standards and provides native support for all common WebSocket versions. The protocol was standardized in 2011 and all modern browsers provide built-in WebSocket support. Similar to MQTT, the WebSocket protocol is based on TCP. For more information, see WebSocket aligned browser versions .

When you use WebSockets with HiveMQ, you do not need a dedicated web server in front of a HiveMQ MQTT broker instance to forward the WebSocket connection. HiveMQ handles the HTTP WebSocket upgrade and the actual WebSockets transparently. The broker treats an MQTT client connection over WebSockets as equal to connections over a standard TCP connection.

HiveMQ also supports secure WebSockets. Secure WebSockets are a great way to increase security for your application. For more information, see secure WebSockets .

2. WebSocket Listener configuration

Here’s an example of WebSocket Listener configuration.

<?xml version="1.0"?>
<hivemq xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

    <listeners>
        <websocket-listener>
            <port>8000</port>
            <bind-address>0.0.0.0</bind-address>
            <path>/mqtt</path>
            <name>my-websocket-listener</name>
            <subprotocols>
                <subprotocol>mqttv3.1</subprotocol>
                <subprotocol>mqtt</subprotocol>
            </subprotocols>
            <allow-extensions>true</allow-extensions>
        </websocket-listener>
        ...
    </listeners>
    ...
</hivemq>

For more information, refer to our documentation on Native WebSocket Listener.

HiveMQ Edge offers native support for all common WebSocket versions. All major browsers are supported. For more information, see WebSocket browser support.

To learn how to use WebSockets with HiveMQ Edge, read our documentation.

3. Install the client: HTML + MQTT.js

npm install mqtt --save       # Node
# or use the CDN in the browser:
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>

4. Secure WebSocket (WSS)

Add a <tls-websocket-listener> to config.xml and point clients to wss://your-broker:8884/mqtt with the required CA/key/cert files.

5. Test your setup

Load the HTML page — you’ll see “✔ Connected.”
Open the HiveMQ WebSocket Client in another tab, subscribe to hivemq/test, publish a message, and watch it echo back in both tabs.
Prefer the CLI? mqtt sh con -ws -h broker.hivemq.com -p 8000 -i testClient where the -ws flag switches the transport.

6. Troubleshooting and Optimization

Here are a few scenarios where you might need troubleshooting:

Connection refused: verify listener path and port match.
Mixed‑content warnings: switch to WSS (wss://).
High mobile latency: set keepalive ≤ 30 s and trim payloads.
Broker load spikes: enable HiveMQ back‑pressure and raise thread pools.
Message loss on reconnect: set clean:false and use persistent sessions

Next Steps

By enabling a WebSocket listener on your HiveMQ broker and connecting a simple HTML page with mqtt.js, you have proved end‑to‑end pub/sub from the browser. This opens the door to millisecond‑speed dashboards, mobile PWAs and quick PoCs that reuse your existing MQTT infrastructure. To harden production deployments, switch to WSS, configure persistent sessions, and migrate to a managed HiveMQ Cloud cluster when scaling becomes critical; if you need to weigh protocol trade‑offs in more depth, the MQTT vs WebSocket comparison blog walks through latency, security and payload considerations. In short, MQTT over WebSocket accelerates prototype‑to‑production IoT workflows, so start experimenting today!

Browse the MQTT Series

MQTT Essentials

MQTT 5 Essentials

MQTT Security Fundamentals

HiveMQ Team

The HiveMQ team loves writing about MQTT, Sparkplug, Industrial IoT, protocols, how to deploy our platform, and more. We focus on industries ranging from energy, to transportation and logistics, to automotive manufacturing. Our experts are here to help, contact us with any questions.

MQTT over WebSockets - MQTT Essentials Special