DEV Community

CJ
CJ

Posted on • Originally published at chuanjin.me

1 1

MQTT with websockets support

Since version 1.4, mosquitto MQTT broker starts to support websockets natively. Now it is a try out for this great new feature.

The websocket support is not enabled by default, so we have to fetch the source code firstly and update one line in file config.mk

    WITH_WEBSOCKETS:=no

change it to yes, then you can compile and install it.

    make
    sudo make install

In case you got dependency errors, install the package as below.

    sudo apt-get install libc-ares-dev libwebsockets-dev libssl-dev uuid-dev

Try to start mosquitto broker with command mosquitto to see if it is working properly.
Then we need a customized mosquitto config file, let's call it mqtt.conf.

    listener 1883
    protocol mqtt

    listener 1884
    protocol websockets

Now when we start with the command mosquitto -c mqtt.conf, you should see something like this:

It is time for the websocket coming in. We need a mqtt javascript client here called mqttws31.js, available from Paho. An example code would look like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

    <html>
    <head>
        <title>Mosquitto Websockets</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="mqttws31.js" type="text/javascript"></script>
        <script type="text/javascript">
        var mqtt;
        var reconnectTimeout = 2000;
        var port = 1884;
        var host = "127.0.0.1"
        var topic = "+/#"

        function MQTTconnect() {
        mqtt = new Paho.MQTT.Client(
                host,
                port,
                "client_X") ;
        var options = {
            timeout: 3,
            cleanSession: false,
            onSuccess: onConnect,
            onFailure: function (message) {
                $('#status').val("Connection failed: " + message.errorMessage + "Retrying");
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };

        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;

        mqtt.connect(options);
        }

        function onConnect() {
        $('#status').val('Connected to ' + host + ':' + port);
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        }

        function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

        };

        function onMessageArrived(message) {

        var topic = message.destinationName;
        var payload = message.payloadString;

        $('#ws').prepend('<li>' + topic + ' = ' + payload + '<\/li>');
        };


        $(document).ready(function() {
        MQTTconnect();
        });

        </script>
    </head>

    <body>
        <h1>Mosquitto Websockets</h1>
        <div>
            <div>
                Status: <input type='text' id='status' size="80" disabled="disabled">
            </div>
            <ul id='ws'>
            </ul>
        </div>
    </body>
    </html>

Initially it looks like

If we start to send some messages from command like, we will get the data coming via mqtt through mosquitto broker and then via websocket published to js client.


Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay