2017-10-24 5 views
0

私は、すべてのトピックからMQTTメッセージを受信するために、paho web socket javascriptを使用しています。実行時に購読しているメッセージからメッセージを取得できますが、選択ボックスを使用してトピックを動的に変更し、選択したトピックのみからメッセージを受信する必要があります。paho websockedで登録したトピックを動的に変更できますか?

私はいくつかのソリューションを試してみましたが、すべてを検索しましたが、成功しませんでした。

<?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>Mosquitto Websockets</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta charset="utf-8"> 
    <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; 
    var selectedtopic='#'; 
    function MQTTconnect(selectedtopic) { 
    if (typeof path == "undefined") { 
     path = '/mqtt'; 
    } 
    mqtt = new Paho.MQTT.Client(
      host, 
      port, 
      path, 
      "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 + ", path=" + path + " TLS = " + useTLS + " username=" + username + " password=" + password); 
     mqtt.connect(options); 
    } 

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

    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(selectedtopic); 
     $('#topic').change(function() 
     { 
      selectedtopic = $(this).val(); 
      console.log("change "+selectedtopic); 
     }) 
    }); 

    </script> 
    </head> 
    <body> 
    <h1>Things</h1> 
    <div> 
     <div>Location 
      <select id="topic"> 
       <option value="#">All</option> 
       <option value="emergency-room/#">Emergency room</option> 
       <option value="ward/#">Ward</option> 
      </select> 
      Status: <input type='text' id='status' size="80" disabled /></div> 

      <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul> 
    </div> 
    </body> 
</html> 

答えて

2

PAHO JavaScriptクライアントを使用すると、受信メッセージに適用されるトピックフィルタを変更することができますsubscribeunsubscribe方法の両方を持っています。

このような何か作業をする必要があります:

$(document).ready(function() { 
    MQTTconnect(selectedtopic); 
    $('#topic').change(function() 
    { 
     mqtt.unsubscribe(selectedtopic); 
     selectedtopic = $(this).val(); 
     mqtt.subscribe(selectedtopic); 
     console.log("change "+selectedtopic); 
    }) 
}); 
関連する問題