Hi all, this blog post is about configuring ActiveMQ MQTT broker to enable Websockets and subscribe MQTT using Websockets from JavaScript Paho client. Follow these steps
1. Configure ActiveMQ MQTT for Websocket support
a). Add the following line to activemq.xml file in your Apache-Activemq conf directory
<transportConnector name="ws" uri="ws://0.0.0.0:1884?maximumConnections=1000&wireFormat.maxFrameSize=104857600"/>
b). Restart ActiveMQ. This will open 1884 port in your MQTT broker.
2. Download mqttws31.js file
3. Create one new file "config.js"
host = '127.0.1.1'; // hostname or IP address
port = 1884;
topic = 'mqtt/devTest'; // topic to subscribe to
useTLS = false;
username = null;
password = null;
// username = "devan";
// password = "devan123";
cleansession = true;
4. Download jquery.min.js
5. Create one html file "mqttcheck.html"
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MQTT Websockets</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="mqttws31.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
<script type="text/javascript">
var mqtt;
var reconnectTimeout = 2000;
function MQTTconnect() {
mqtt = new Paho.MQTT.Client(
host,
port,
"web_" + parseInt(Math.random() * 100,
10));
var options = {
timeout: 3,
useSSL: useTLS,
cleanSession: cleansession,
onSuccess: onConnect,
onFailure: function (message) {
$('#status').val("Connection failed: " + message.errorMessage + "Retrying");
setTimeout(MQTTconnect, reconnectTimeout);
}
};
mqtt.onConnectionLost = onConnectionLost;
mqtt.onMessageArrived = onMessageArrived;
if (username != null) {
options.userName = username;
options.password = password;
}
console.log("Host="+ host + ", port=" + port + " TLS = " + useTLS + " username=" + username + " password=" + password);
mqtt.connect(options);
}
function onConnect() {
$('#status').val('Connected to ' + host + ':' + port);
// Connection succeeded; subscribe to our topic
mqtt.subscribe(topic, {qos: 0});
$('#topic').val(topic);
}
function onConnectionLost(response) {
setTimeout(MQTTconnect, reconnectTimeout);
$('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");
};
function onMessageArrived(message) {
var topic = message.destinationName;
var payload = message.payloadString;
document.getElementById("ws").innerHTML = 'Topic =' + topic + '<br> Payload = ' + payload ;
};
$(document).ready(function() {
MQTTconnect();
});
</script>
</head>
<body>
<center>
<h1>MQTT Websockets</h1>
<div>
<div>Subscribed to <input type='text' id='topic' disabled />
Status: <input type='text' id='status' disabled /></div>
<h2>
<div id='ws'> </div>
</h2>
</div>
</center>
</body>
</html>
6. Run mqttcheck.html file using your web browser you will see the result like following.
