MQTT Over WebSockets with JavaScript and ActiveMQ

Michael Mainguy

Dec. 31, 13 · Integration Zone · Interview

Like (0)

Save

20.75K Views

After reading up a bit about MQTT, I decided to set up a test bed to see how it works and if it lives up to its potential. The use case was simple: I wanted to build a multi-user chat system that would use MQTT over WebSockets connected directly to an Apache ActiveMQ server.

First off, I fired up an EC2 instance with Ubuntu-13.04 and tried to apt-get ActiveMQ. It turns out, however, to use MQTT over WebSockets, you need version 5.9 of ActiveMQ, so I pulled a snapshot version of ActiveMQ. Enabling MQTT over websockets is a snap. You simply add the following configuration to your activemq.xml:

<transportConnector name="mqtt+ws" uri="ws://0.0.0.0:1884maximumConnections=1000&wireFormat.maxFrameSize=104857600"/>

Next, download the Eclipse Paho MQTT client and create a web page to send traffic back and forth.

One last thing I did was install Apache HTTP on the same server as the ActiveMQ instance. I did this to avoid any potential problems with same origin policies.

At this point, I create a page that uses the MQTT client, and I can publish and subscribe to messages that will get pushed to the browser in real-time. My example is posted below (note, the AWS instance in the connect string is no longer valid, so you need to use your own server):

<html>
    <head>
        <title>MQTT over websockets</title>
        <style type="text/css">
            #status {
                padding: 5px;
                display: inline-block;
            }
            label, .label {
                display: inline-block;
                width: 100px;
            }
            li {
                list-style: none;

                background: #fff;
                margin: 2px;
            }
            ul {
                background: #eef;
            }
            .disconnected {
                background-color: #f88;
            }
            input {
                width: 400px;
            }
            .connected {
                background-color: #8f8;
            }

            #messagelist {
                width: 600px;
                height: 200px;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <h1>Super simple chat</h1>
        <span class='label'>Status</span> <div id="status" class="disconnected">Pending</div>
        <form id='mainform' action="#">
            <label for="name">Name</label>
            <input id="name" name="name" type="text" width="40" value="anonymous"/> <br/>
            <label for="message">Message</label>
            <input id="message" name="message" type="text" width="200"/>
            <input id="submit" type="submit" value="go"/>
        </form>

        <div id="messages"><ul id="messagelist">

        </ul></div>

    <script src="./mqttws31.js"></script>
    <script src="./jquery-1.10.2.js"></script>
    <script>
    $(document).ready(function() {
        function doSubscribe() {

        }

        $('#mainform').submit(function(){
            var messageinput = $('#message');
            message = new Messaging.Message(messageinput.val());
            message.destinationName = "/can/"+$('#name').val();
            messageinput.val('');
            messageinput.focus();
            client.send(message);
            return false;
        });


        function doDisconnect() {
            client.disconnect();
        }

        // Web Messaging API callbacks
        var onSuccess = function(value) {
            $('#status').toggleClass('connected',true);
            $('#status').text('Success');
        }

        var onConnect = function(frame) {
            $('#status').toggleClass('connected',true);
            $('#status').text('Connected');
            client.subscribe("/can/#");
            //var form = document.getElementById("example");
            //form.connected.checked= true;
        }
        var onFailure = function(error) {
            $('#status').toggleClass('connected',false);
            $('#status').text("Failure");
        }

        function onConnectionLost(responseObject) {
            //var form = document.getElementById("example");
            //form.connected.checked= false;
            //if (responseObject.errorCode !== 0)
            alert(client.clientId+"\n"+responseObject.errorCode);
        }

        function onMessageArrived(message) {
            $('#messagelist').prepend('<li>'+message.destinationName+ '->' +message.payloadString+'</li>');
            //var form = document.getElementById("example");
            //form.receiveMsg.value = message.payloadString;
        }

        var client;
        var r = Math.round(Math.random()*Math.pow(10,5));
        var d = new Date().getTime();
        var cid = r.toString() + "-" + d.toString()

        client = new Messaging.Client("ec2-54-242-185-231.compute-1.amazonaws.com", 1884, cid );
        client.onConnect = onConnect;
        client.onMessageArrived = onMessageArrived;
        client.onConnectionLost = onConnectionLost;
        client.connect({onSuccess: onConnect, onFailure: onFailure});

    });

    </script>
    </body>
</html>

MQTT WebSocket JavaScript

Published at DZone with permission of Michael Mainguy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments

MQTT Over WebSockets with JavaScript and ActiveMQ

Popular on DZone

Integration Partner Resources