MQTT (Message Queuing Telemetry Transport) is a lightweight, publish-subscribe network protocol that transports messages between devices. Originally developed by IBM, it's designed for constrained devices and low-bandwidth, high-latency, or unreliable networks.
WebSockets provide full-duplex communication channels over a single TCP connection, enabling real-time communication between client and server with low overhead.
MQTT over WebSocket is a protocol that runs the MQTT messaging pattern using WebSocket as the underlying transport mechanism, combining the strengths of both protocols:
MQTT's efficient messaging model
WebSocket's real-time, persistent connection capabilities
[Application Layer]
│
├── MQTT Protocol (Messages, Topics, QoS)
│
[WebSocket Layer]
│
├── Full-duplex TCP Connection
│ │
│ ├── Handshake
│ ├── Persistent Connection
│ └── Low-latency Communication
│
[Transport Layer - TCP]
1. Connection Mechanism
Establishes a WebSocket connection
Encapsulates MQTT control packets within WebSocket frames
Provides a persistent, full-duplex communication channel
2. Protocol Flow
WebSocket Handshake
Client initiates connection
Upgrades from HTTP to WebSocket protocol
Negotiates secure (WSS) or standard (WS) connection
MQTT Connection
CONNECT packet sent after WebSocket establishes
Authentication and client identification
Defines connection parameters (keepalive, clean session)
3. Message Exchange
Publish/Subscribe model
Messages routed through topics
Support for multiple Quality of Service (QoS) levels
QoS 0: At most once delivery
QoS 1: At least once delivery
QoS 2: Exactly once delivery
For Web Applications
Bypasses traditional HTTP request-response model
Enables real-time, event-driven communication
Works through most firewall configurations
Low-latency message transmission
For IoT and Mobile
Minimal protocol overhead
Efficient for low-power devices
Supports intermittent connectivity
Reduced battery consumption
javascript
// WebSocket MQTT Connection
const client = new Paho.MQTT.Client(
"wss://broker.example.com/mqtt", // WebSocket Endpoint
"clientId-" + new Date().getTime()
);
// Connection Options
const options = {
useSSL: true,
onSuccess: onConnect,
onFailure: onConnectionFailure
};
// Connect Handler
function onConnect() {
console.log("Connected to MQTT via WebSocket");
client.subscribe("sensor/temperature");
}
// Message Received
client.onMessageArrived = function(message) {
console.log("Received: " + message.payloadString);
};
// Initiate Connection
client.connect(options);
Uses TLS encryption (WSS)
Supports various authentication mechanisms
Client certificates
Username/password
Token-based authentication
Protects against network-level attacks
IoT Device Monitoring
Real-time Dashboards
Chat Applications
Live Sensor Data Streaming
Mobile Application Updates
Slightly higher overhead compared to raw MQTT
Requires WebSocket support in client/server
More complex initial setup
Paho MQTT (JavaScript, Java)
Eclipse Mosquitto
AWS IoT Device SDK
Azure IoT Hub Device SDK
Implement robust reconnection logic
Use appropriate QoS for your use case
Minimize message payload size
Implement proper error handling
Secure connection with TLS
Use keepalive mechanisms
Increasing adoption in IoT and real-time web applications
Growing support in cloud platforms
Continuous protocol optimization