HiveMQ MQTT Websocket - can't subscribe to sub topics

Question

I have a code that subscribes whatever user inputs in a form to an MQTT broker. Everything works fine, the data get published and show in the broker. However, I can't subscribe to sub topics.

Here is the MQTT part of the code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.hivemq.com/demos/websocket-client/js/mqttws31.js" ></script>
    <script type="text/javascript">

        //Create a new Client object with your broker's hostname, port and your own clientId
        var client = new Messaging.Client("broker.mqttdashboard.com", 8000, "clientId-9HL7JvIJNb");
        var publish = function (payload, topic, qos) {
                //Send your message (also possible to serialize it as JSON or protobuf or just use a string, no limitations)
                var message = new Messaging.Message(payload);
                message.destinationName = "sssmarthome/";
                message.qos = qos;
                client.send(message);
        }

        var options = {

             //connection attempt timeout in seconds
             timeout: 3,

             //Gets Called if the connection has successfully been established
             onSuccess: function () {
                 alert("Connected");
             },

             //Gets Called if the connection could not be established
             onFailure: function (message) {
                 alert("Connection failed: " + message.errorMessage);
             }

         };

        //Attempt to connect
        client.connect(options);

        </script>

As you can see, the destination name is "sssmarthome/" and that is the only topic I can subscribe to. Here is the form code:

<form id="settingsForm" method="GET">
                            Temperature(low, °C): <input type="text" name="templow" id="templow">
                            Temperature(high, °C): <input type="text" name="temphigh" id="temphigh">
                            Humidity(low, %): <input type="text" name="humlow" id="humlow">
                            Humidity(high, %): <input type="text" name="humhigh" id="humhigh"><br>
                            <input type="button" value="Change" onclick="submitForm()">
                            </form>
                            <script>
                            function submitForm(){
                                publish(document.getElementById("templow").value, 'sssmarthome/templow',2)
                                publish(document.getElementById("temphigh").value, 'sssmarthome/temphigh',2)
                                publish(document.getElementById("humlow").value, 'sssmarthome/humlow',2)
                                publish(document.getElementById("humhigh").value, 'sssmarthome/humhigh',2)

So each of the inputs has their own subtopic. But if I go to the website and fill out the form, this is what I get on the broker:

As you can see on the picture, it doesn't show the names of the sub topics, just the main topic. I tried subscribing to the sub topics in the broker, but nothing will get published then, the only topic that works is the default destination name. Any idea how to be able to subscribe to topics and have actually stuff published on them, with proper topic and sub topic? Thank you!

Answer 1

Just to put this out here as an answer, per my comment:

The code below this line:

var publish = function(payload, topic, qos)

never uses 'topic'....so since you set message.destinationName = "sssmarthome/"; and then publish, your GUI is showing just that. The outcome is exactly what your code is asking for.

The fix is to change that one line to:

message.destinationName = "sssmarthome/" + topic;

This is assuming that topic is a string.