Backend Development 13 min read

Build Real‑Time Chat with RabbitMQ MQTT – No Backend Code Needed

This guide shows how to enable instant messaging using RabbitMQ's MQTT plugin, run the broker in Docker, test with MQTTX, create a web‑based chat with MQTT.js, and integrate MQTT into a Spring Boot application, all without writing custom backend code.

Su San Talks Tech

Aug 21, 2025

Build Real‑Time Chat with RabbitMQ MQTT – No Backend Code Needed

MQTT Protocol

MQTT (Message Queuing Telemetry Transport) is a lightweight publish/subscribe messaging protocol built on TCP/IP, ideal for real‑time communication with minimal code and bandwidth.

Related Concepts

Publisher – sends messages.

Subscriber – receives messages.

Broker – mediates between publishers and subscribers.

Topic – routing key for messages.

Payload – message content.

QoS – Quality of Service levels (0, 1, 2) defining delivery guarantees.

Enable MQTT in RabbitMQ

RabbitMQ does not enable MQTT by default; you must activate it manually.

Run RabbitMQ in Docker:

docker run -p 5672:5672 -p 15672:15672 -p 1883:1883 -p 15675:15675 --name rabbitmq-mqtt \
  -v /mydata/rabbitmq-mqtt/data:/var/lib/rabbitmq \
  -d rabbitmq:3.9.11-management

Enter the container and enable the MQTT Web plugin:

# Enter container
docker exec -it rabbitmq-mqtt /bin/bash
# Enable plugin (also enables rabbitmq_mqtt)
rabbitmq-plugins enable rabbitmq_web_mqtt

After enabling, the MQTT Web service runs on port 15675 (access via http://<host>:15672).

MQTT Client

Use the MQTTX client to test the MQTT instant‑messaging functionality.

Run MQTTX in Docker:

docker run -p 80:80 --name mqttx-web -d emqx/mqttx-web

Open the MQTTX console at http://<host>, create a connection using MQTT version 3.1.1, and subscribe to a topic (e.g., testTopicA).

Frontend Direct Instant Messaging

With MQTTX working, you can implement a web chat using only HTML and JavaScript, without any backend code.

Use the MQTT.js library (https://github.com/mqttjs/MQTT.js) to connect to the broker via WebSocket at ws://<host>:15675/ws.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple MQTT Chat</title>
</head>
<body>
  <label>Target Topic: <input id="targetTopicInput" type="text"></label><br/>
  <label>Message: <input id="messageInput" type="text"></label><br/>
  <button onclick="sendMessage()">Send</button>
  <button onclick="clearMessage()">Clear</button>
  <div id="messageDiv"></div>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  <script>
    const url = 'ws://192.168.3.101:15675/ws';
    const topic = getQueryString("topic");
    let client = mqtt.connect(url);
    client.on('connect', function () {
      client.subscribe(topic, function (err) {
        if (!err) { showMessage('Subscribed to topic: ' + topic + ' successfully!'); }
      });
    });
    client.on('message', function (topic, message) {
      showMessage('Received: ' + message.toString());
    });
    function sendMessage() {
      const targetTopic = document.getElementById('targetTopicInput').value;
      const message = document.getElementById('messageInput').value;
      client.publish(targetTopic, message);
      showMessage('Sent to ' + targetTopic + ': ' + message);
    }
    function getQueryString(name) {
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      const r = window.location.search.substr(1).match(reg);
      if (r != null) { return decodeURIComponent(r[2]); }
      return null;
    }
    function showMessage(message) {
      const messageDiv = document.getElementById('messageDiv');
      const messageEle = document.createElement('div');
      messageEle.innerText = message;
      messageDiv.appendChild(messageEle);
    }
    function clearMessage() {
      document.getElementById('messageDiv').innerHTML = '';
    }
  </script>
</body>
</html>

Spring Boot Integration

When backend integration is needed, use Spring Integration MQTT to publish and subscribe from a Spring Boot application.

Add Maven dependency:

<dependency>
  <groupId>org.springframework.integration</groupId>
  <artifactId>spring-integration-mqtt</artifactId>
</dependency>

Configure connection in application.yml:

rabbitmq:
  mqtt:
    url: tcp://192.168.3.101:1883
    username: guest
    password: guest
    defaultTopic: testTopic

Create a configuration class to bind the properties ( MqttConfig).

Define inbound channel, adapter, and a @ServiceActivator to handle incoming messages.

Define outbound channel, client factory, and a @MessagingGateway ( MqttGateway) to send messages.

Expose REST endpoints ( /mqtt/sendToDefaultTopic, /mqtt/sendToTopic) that use the gateway to publish messages.

Conclusion

Message middleware like RabbitMQ can provide reliable asynchronous communication and also serve as an instant‑messaging solution via MQTT. For simple use‑cases, a frontend can directly connect with MQTT; for more complex scenarios, integrating MQTT into a Spring Boot backend offers full control.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.

Docker RabbitMQ Instant Messaging MQTT spring-boot mqttjs web-mqtt

Written by

Su San Talks Tech

Su San, former staff at several leading tech companies, is a top creator on Juejin and a premium creator on CSDN, and runs the free coding practice site www.susan.net.cn.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.