MQTT over WebSockets

RabbitMQ is a message broker that allows clients to connect over different open and standardized protocols such as AMQP, HTTP, STOMP, MQTT, MQTT over WebSockets and STOMP over WebSockets. However, here, we are only interested in MQTT over WebSockets.

MQTT Over Websockets ?

MQTT (Message Queuing Telemetry Transport) is a publish-subscribe pattern-based "lightweight" messaging protocol common in the IoT, “Internet of Things”, world of connected devices. RabbitMQ supports the MQTT protocol, natively, via a plugin.

Now, imagine you have a browser-based application that needs to communicate with other MQTT-based systems. To enable this communication, you can use a messaging broker like RabbitMQ. RabbitMQ acts as the middleman, facilitating the exchange of messages between the web application and the systems.

But here’s the catch: web browsers don’t natively support MQTT. That’s where MQTT over Websockets comes in - It’s a clever solution that allows web browsers to route MQTT traffic over a Websocket connection.

RabbitMQ supports MQTT over Websockets via the Web-MQTT plugin. You can activate the Web-MQTT plugin using the RabbitMQ CLI with the command: rabbitmq-plugins enable rabbitmq_web_mqtt or from the CloudAMQP console.

On CloudAMQP, the Web-MQTT plugin can only be enabled on dedicated plans.

Once enabled, the Web-MQTT plugin exposes a WebSocket endpoint that allows web browsers to communicate directly with your RabbitMQ server/cluster.

Usage

To use Web-MQTT, you first need to create at least one user with limited permissions and a new vhost, which you can expose publicly. The username, password, vhost, and your broker URL will be used to connect to your cluster in subsequent steps.

Next include mqtt.js, the JavaScript MQTT client library, in your HTML from a CDN(for example).

<script src="//unpkg.com/mqtt/dist/mqtt.min.js"></script>

Next, connect to the broker using client credentials. Then, publish and consume messages as shown in the snippet below:

import * as mqtt from "mqtt";

// Load client credentials from env vars
const clientSettings = {
  host: process.env.MQTT_BROKER,
  options: {
      keepalive: 0,
      username: process.env.BROKER_USERNAME,
      password: process.env.BROKER_PASSWORD,
      connectTimeout: 60000,
      reconnectPeriod: 20000,
      rejectUnauthorized: false
  }
}

// Connect to broker
const client = mqtt.connect(
  clientSettings.host, 
  clientSettings.options
)

// Publish and consume messages
client.on('connect', function () {
  client.subscribe(topic, { qos: 0 }, function (err) {
    if (err) {
      console.log('Could not subscribe: ', err)
    }
  })
  
  client.publish(topic, 'Hello World!')
  
})

client.on('message', function (topic, message) {
  console.log(message.toString())
})

// Error handling
client.on('error', function(err) {
    console.log('ERROR: ', err)
    client.end();
});

Note:

• Our servers have nginx in front of them, which performs TLS/SSL-termination. You can only connect over HTTPS; HTTP is not allowed.
• When connecting to CloudAMQP via MQTT over WebSockets, you should use a connection URL like: wss://hostname:443/ws/mqtt. For example: wss://test-calm-sponge-bob.rmq5.cloudamqp.com:443/ws/mqtt

If you are interested in learning more about connecting browser-based applications to RabbitMQ, we encourage you to check out our 2-part series on RabbitMQ and Websockets.

For questions or any feedback, please feel free to contact support@cloudamqp.com.