Knowledgebase

How to Install Mosquitto MQTT Broker with Web Client on Ubuntu 24.04

This guide walks you through installing Mosquitto, the lightweight MQTT broker, along with a simple web-based MQTT client on Ubuntu 24.04. The setup includes configuring MQTT over standard TCP, WebSockets, and serving a minimal web client via Nginx.

Step 1: Update System Packages

First, ensure your system is up-to-date:

sudo apt update && sudo apt upgrade -y

Install basic dependencies:

sudo apt install -y curl wget gnupg

Step 2: Install Mosquitto

Install Mosquitto and its client utilities:

sudo apt install -y mosquitto mosquitto-clients

Enable and start the service:

sudo systemctl enable --now mosquitto

Step 3: Configure Mosquitto

Create a basic configuration file at /etc/mosquitto/mosquitto.conf:

# MQTT listener
listener 1883 0.0.0.0
protocol mqtt

# WebSockets listener
listener 9001 0.0.0.0
protocol websockets

# Allow anonymous connections
allow_anonymous true

# Persistence and logging
persistence true
persistence_location /var/lib/mosquitto
log_dest file /var/log/mosquitto/mosquitto.log
log_type all

# Connection limits
max_connections -1
max_keepalive 60
connection_messages true
log_timestamp true

Restart Mosquitto to apply changes:

sudo systemctl restart mosquitto

Step 4: Install Nginx and Prepare Web Client

Install Nginx:

sudo apt install -y nginx

Create a directory for the web client:

sudo mkdir -p /opt/mqtt-web-client
sudo chown www-data:www-data /opt/mqtt-web-client

Create a minimal web client in /opt/mqtt-web-client/index.html using the MQTT.js library. This client allows connecting, publishing, and subscribing to MQTT topics through a browser.

Step 5: Configure Nginx for the Web Client

Create a site configuration /etc/nginx/sites-available/mqtt-web-client:

server {
    listen 8080;
    server_name _;
    root /opt/mqtt-web-client;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Enable the site and disable the default:

sudo ln -s /etc/nginx/sites-available/mqtt-web-client /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl restart nginx

Step 6: Configure Firewall (UFW)

Allow necessary ports:

sudo ufw allow 22          # SSH
sudo ufw allow 1883        # MQTT
sudo ufw allow 9001        # MQTT WebSockets
sudo ufw allow 8080        # Web client
sudo ufw enable
sudo ufw status

Step 7: Access Mosquitto and Web Client

• MQTT Broker (TCP): mqtt://<server-ip>:1883

• MQTT Broker (WebSockets): ws://<server-ip>:9001

• Web Client Interface: http://<server-ip>:8080

Open the web client in your browser to test connecting, publishing, and subscribing to MQTT topics.

Conclusion

This setup provides a fully functional Mosquitto broker with WebSocket support and a browser-based MQTT client on Ubuntu 24.04. It’s suitable for testing IoT devices, developing MQTT applications, or learning MQTT concepts.