2017-10-24 13 views
0

모든 주제에서 MQTT 메시지를 받기 위해 paho 웹 소켓 자바 스크립트를 사용하고 있습니다. 런타임에 구독하는 메시지에서 메시지를 가져올 수 있지만 선택 상자를 사용하여 동적으로 항목을 변경하고 선택한 항목에서만 메시지를 수신해야합니다.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 자바 스크립트 클라이언트가 들어오는 메시지에 적용 주제 필터를 변경할 수 있도록하는 subscribeunsubscribe 방법 모두 있습니다.

이런 식으로 뭔가 작업을해야합니다 :

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