无法从 Javascript 中的 phao mqtt onMessageArrived 函数分配变量答案

【问题标题】：Trouble assigning variables from phao mqtt onMessageArrived function in Javascript无法从 Javascript 中的 phao mqtt onMessageArrived 函数分配变量
【发布时间】：2021-07-17 21:34:54
【问题描述】：

我正在使用带有 Javascript 的 Eclipse Paho，我正在尝试将 message.payloadstring 分配给变量，我在脚本开头声明了一个变量并在 onMessageArrived 函数 if(topic === "AVfanControl/DeviceName") deviceName = message.payloadString; 中分配它，以便我可以在其他地方使用它根据我的需要。但是，变量保持为未定义的共同点。我可以在 HTML 中看到设备名称，但如果我尝试使用 console.log(document.getElementById("device_name").innerHTML); 或 console.log(document.getElementById("device_name").innerText);，我只会得到一个空白的 console.log，即使我可以在屏幕上的 HTML 中看到设备名称。

const client = new Paho.MQTT.Client(hostname, port, clientID);

client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

client.connect({onSuccess:onConnect});

function onConnect() {
    client.subscribe("AVfanControl/DeviceName");
}

const devName = document.getElementById("device_name");
let deviceName;

function onMessageArrived(message) {
    let topic = message.destinationName;
    if(topic === "AVfanControl/DeviceName"){
        deviceName = message.payloadString;
        devName.innerHTML = message.payloadString;
    }
}
console.log(deviceName); // undefined
console.log(document.getElementById("device_name").innerText); // blank log
console.log(document.getElementById("device_name").innerHTML); // blank log

function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }
  
  // // function to compile the string to sens as MQTT
  function messageString(input){
      return new Paho.MQTT.Message(input);
}

【问题讨论】：

onMessageArrived 将在收到消息时调用；您对console.log 的调用将在脚本启动时运行（在收到消息之前）。为了演示这一点，在onMessageArrived 中添加console.log("message received")，我想您会看到此输出将出现在您现有的日志调用之后。
@Brits 谢谢你的回复，我明白你对日志的意思，消息每秒更新一次，但变量 deviceName 仍未定义，即使在大量消息之后似乎也没有更新已收到，如果我尝试在其他未定义的地方使用该变量，我错过了什么？
请更新您的示例以显示您如何尝试访问deviceName“在收到大量消息后”（我假设您正在使用按钮或计时器来触发此操作？）。当调用console.log 时，您的示例当前编写deviceName 的方式将始终未定义。

标签： javascript mqtt

【解决方案1】：

“已解决”@Brits 谢谢你，正如你所说，我需要一个计时器来在初始日志之后更新日志，以便有时间让第一条消息通过谢谢你的输入！

const client = new Paho.MQTT.Client(hostname, port, clientID);

client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

client.connect({onSuccess:onConnect});

function onConnect() {
    client.subscribe("AVfanControl/DeviceName");
}

const devName = document.getElementById("device_name");
let deviceName;

function onMessageArrived(message) {
    let topic = message.destinationName;
    if(topic === "AVfanControl/DeviceName"){
        deviceName = message.payloadString;
        devName.innerHTML = message.payloadString;
    }
}

// interval to log devicename
setInterval(function(){
    console.log(deviceName);
    console.log(document.getElementById("device_name").innerHTML);
}, 1000);
    

function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      console.log("onConnectionLost:"+responseObject.errorMessage);
    }
  }
  
  // // function to compile the string to sends as MQTT
  function messageString(input){
      return new Paho.MQTT.Message(input);
}

【讨论】：