Mqtt Javascript Html Webgui

Question

我跟随Elliot Williams在Hack a Day上的4部分MQTT并最终理解在RasPi上获得MQTT，我已经设法获得2个LED以及温度和湿度来处理通过mqtt-spy客户端控制的代码更改。 现在我遇到的问题是HTML和Javascript尝试调整它以控制2个或更多LED /继电器，并希望得到任何和所有帮助。

以下是JS文件和HTML的代码：

＆＃13;

＆＃13;

    /*
       Eclipse Paho MQTT-JS Utility
       by Elliot Williams for Hackaday article,
    */

    // Global variables
    var client       = null;
    var led_is_on    = null;
    var rly_is_on    = null;
    // These are configs   
    var hostname       = "192.168.1.128";   // This is my Brokers IP
    var port           = "9001";
    var clientId       = "mqtt_js_" + parseInt(Math.random() * 100000, 10);
    var temp_topic     = "home/outdoors/temperature";
    var humidity_topic = "home/outdoors/humidity";
    var status_topic   = "home/outdoors/status";
    var relay_topic    = "home/outdoors/relay";


    // This is called after the webpage is completely loaded
    // It is the main entry point into the JS code
    function connect(){
       // Set up the client
       client = new Paho.MQTT.Client(hostname, Number(port), clientId);
       console.info('Connecting to Server: Hostname: ', hostname,
             '. Port: ', port, '. Client ID: ', clientId);

       // set callback handlers
       client.onConnectionLost = onConnectionLost;
       client.onMessageArrived = onMessageArrived;

       // see client class docs for all the options
       var options = {
          onSuccess: onConnect, // after connected, subscribes
          onFailure: onFail     // useful for logging / debugging
       };
       // connect the client
       client.connect(options);
       console.info('Connecting...');
    }


    function onConnect(context) {
       console.log("Client Connected");
        // And subscribe to our topics   -- both with the same callback function
       options = {qos:0, onSuccess:function(context){ console.log("subscribed"); } }
       client.subscribe(temp_topic, options);
       client.subscribe(humidity_topic, options);
       client.subscribe(status_topic, options);
       client.subscribe(relay_topic, options);
    }

    function onFail(context) {
       console.log("Failed to connect");
    }

    function onConnectionLost(responseObject) {
       if (responseObject.errorCode !== 0) {
          console.log("Connection Lost: " + responseObject.errorMessage);
          window.alert("Someone else took my websocket!\nRefresh to take it back.");
       }
    }

    // Here are the two main actions that drive the webpage:
    //  handling incoming messages and the toggle button.

    // Updates the webpage elements with new data, and
    //  tracks the display LED status as well,
    //  in case multiple clients are toggling it.
    function onMessageArrived(message) {
       console.log(message.destinationName, message.payloadString);

       // Update element depending on which topic's data came in
       if (message.destinationName == temp_topic){
          var temperature_heading = document.getElementById("temp_display");
          temperature_heading.innerHTML = "Temperature: " + message.payloadString + " °C";
       }
       else (message.destinationName == humidity_topic) {
          var humidity_heading = document.getElementById("humidity_display");
          humidity_heading.innerHTML = "Humidity: " + message.payloadString + "%";
       }
       else  (message.destinationName == status_topic) {
          var status_heading = document.getElementById("led_status");
          status_heading.innerHTML = "LED Status: " + message.payloadString;
          // Accomodates one or two byte "on" commands.  Anything else is off.
          if (message.payloadString == "on" || message.payloadString == "o"){
             led_is_on = true;
          }
          else {
             led_is_on = false;
          }
       }
       else  (message.destinationName == status_topic) {
          var status_heading = document.getElementById("rly_status");
          status_heading.innerHTML = "Relay Status: " + message.payloadString;
          // Accomodates one or two byte "on" commands.  Anything else is off.
          if (message.payloadString == "on" || message.payloadString == "o"){
             rly_is_on = true;
          }
          else {
             rly_is_on = false;
          }
       }
    }

    // Provides the button logic that toggles our display LED on and off
    // Triggered by pressing the HTML button "status_button"
    function led_toggle(){
       if (led_is_on){
          var payload = "off";
          led_is_on = false;
       } else {
          var payload = "on";
          led_is_on = true;
       }

    function rly_toggle(){
       if (rly_is_on){
          var payload = "off";
          rly_is_on = false;
       } else {
          var payload = "on";
          rly_is_on = true;
       }



       // Send messgae
       message = new Paho.MQTT.Message(payload);
       message.destinationName = status_topic;
       message.retained = true;
       client.send(message);
       console.info('sending: ', payload);
    }

＆＃13;

    <body>

          <h2 align=center>Welcome To The Shortest JavaScript MQTT Demo Ever!</h2>

          <h3 id="temp_display">Waiting for temperature update...</h3>
          <h3 id="humidity_display">Waiting for humidity update...</h3>
          <h3 id="led_status">Waiting for LED status update...</h3>
          <h3 id="rly_status">Waiting for Relay status update...</h3>

          <button id="status_button" type="button" onclick="led_toggle();">Click Me to Toggle LED Display!</button>    
          <button id="rly_button" type="button" onclick="relay_toggle();">Click Me to Toggle RELAY Display!</button>
          <!-- Source Paho MQTT Client-->
          <script src="lib/mqttws31.js"></script>
          <!-- Our Code Goes Here -->
          <script src="bbutton_test.js"></script>
          <!-- Start it up! -->
          <script>connect();</script>

       </body>

＆＃13;

＆＃13;

＆＃13;