javascript - 将 'null' 返回到我的服务器

Question

这是我第一次使用 html/javascript 进行开发，因为我以前的职业是编程飞机，所以一切看起来都很奇怪!

所以......我拿起了一个 Raspberry Pi 并决定开发服务器/客户端软件，这样我就可以使用我的 wifi 系统通过我的手机控制我的花园照明和水景。

我现在可以通过任何手机打开和关闭花园里所有的灯和水泵。

我现在正在改进软件，这个简单的项目让我很困惑。当用户打开水功能时，我希望服务器在用户设置的分钟数到期时关闭水功能。

html 有:

<p>
<input type="checkbox" id="waterFeatureZenGarden">
<label for="waterFeatureZenGarden">Water Feature Zen Garden</label>
<input type="number" min="1" max="180" value="60" id="waterFeatureZenGardenTimer">
</p> 

我在 html 页面上的 Java 脚本有:

<script>
var socket = io(); //load socket.io-client and connect to the host that serves the page

window.addEventListener("load", function(){ //when page loads
  var gateStatus = document.getElementById("gate");
  var getWFZG = document.getElementById("WaterFeatureZenGarden");
  var getWLZG = document.getElementById("WallLightsZenGarden");
  var getLLZG = document.getElementById("LanternLightsZenGarden");

  getWFZG.addEventListener("change", function() { 
    socket.emit("WaterFeatureZenGarden", Number(this.checked));
    socket.emit("WaterFeatureZenGardenTimer", Number(this.value));
   });

我的服务器代码接收如下 socket.emit 事件:

  socket.on('waterFeatureZenGarden', function(data) {
    wFZGvalue = data;
    if (wFZGvalue != onWFZG.readSync()) { 
      onWFZG.writeSync(wFZGvalue); //turn pump on/off
    }
  });

  socket.on('waterFeatureZenGardenTimer', function(data) { 
    wFZGTvalue = data;
    // code will go here to start timer for how long the pump will run
    console.log(wFZGTvalue); // added this line to see what wFZGTvalue is
  });

控制台显示 wFZGTvalue 为“null”。

我做错了什么？是服务端还是客户端？

如果我将客户端 js 更改为:

socket.emit("waterFeatureZenGardenTimer", 100);

服务器收到“100”，所以我似乎没有正确访问 html 元素，但我得到了所有打开和关闭功能的复选框。

谢谢

Answer 1

当您在监听器内部访问 this.value 时，this 指的是:

  <input type="checkbox" id="waterFeatureZenGarden">

那没有任何值(value)。

您可能想要获得计时器:

  var timer = document.getElementById("WaterFeatureZenGardenTimer");

然后取定时器值:

 socket.emit("timer", timer.value);

---

现在在服务器端你可以定义一个全局变量来保存你的计时器:

  let timer;

然后当您收到客户端的计时请求时，您可以终止正在进行的超时并设置一个新的:

 if(timer) clearTimeout(timer);
 timer = setTimeout(function(){
   onWFZG.writeSync("0");
 }, +userValue * 60 * 1000);