如何在HTML Web中输入变量（int）并将其发送到客户端，然后再发送到服务器？

Question

我已经在我的网站上设置了一个客户端，并使用Node.js运行服务器。我有一个输入框，我在其中输入1-100，然后单击“发送”，然后html Web客户端会将其发送到我必须使用数据的服务器。

可以，但是出于某种原因，它总是采用我输入的旧输入。当我在客户端中“ console.log（...）”时，我看到了正确的输入内容，但是服务器由于某种原因仍然会收到较旧的消息，直到我重新加载页面为止。我使用JSON和Node.js（Javascript）运行它，但这可能是我从网站发送数据的方式吗？我不太确定我发布了服务器，客户端和我的html代码之一。

服务器：

const WebSocket = require("ws");
var port = { port: 9000 };

//valgte plante
var plante1 = false;
var plante2 = false;
var plante3 = false;

const serverSocket = new WebSocket.Server(port);

console.log("Starting server.");

serverSocket.on("connection", function (clientSocket) {
    console.log("\nClient connected");
    clientSocket.on("message", function (message) {

        console.log("Message from client: " + message);
        try {
            var responseObj = JSON.parse(message);
            console.log(message);
            console.log("Parsing json. Command: " + responseObj.command);

            switch (responseObj.command) {
                case "BrugerIndtastTF":
                    console.log("Brugeren indtastet temp: " + responseObj.brugerT + " grader");
                    console.log("Brugeren indtastet fugt: " + responseObj.brugerF + "%");
                break;
                case "PlantTypeRec":
                    console.log("Reciving default plant information.");
                    //clientSocket.send(PlantTypeRec);
                break;
                case "PlantList":
                    console.log("Transmitting list of plants.");
                    clientSocket.send(PlantList);
                     break;
                case "PlantSettings":
                    console.log("Reciving plant information.");
                    //clientSocket.send(PlantSettings);
                break;
                case "ReqData":
                    console.log("Requesting data.");
                    clientSocket.send(ReqData);
                break;
                case "SetDefPlants1":
                    plante1 = true;
                    console.log("Receiving default plant settings 1. " + plante1);
                    console.log("Fugt: " + responseObj.plantF1);
                    console.log("Temp: " + responseObj.plantT1);
                break;
                case "SetDefPlants2":
                    plante2 = true;
                    console.log("Receiving default plant settings 2. "+ plante2);
                    console.log("Fugt: " + responseObj.plantF2);
                    console.log("Temp: " + responseObj.plantT2);

                break;
                case "SetDefPlants3":
                    plante3 = true;
                    console.log("Receiving default plant settings 3. "+ plante3);
                    console.log("Fugt: " + responseObj.plantF3);
                    console.log("Temp: " + responseObj.plantT3);

                break;
            }
        } catch {
            console.log("Failed parsing json");
        }

    });

    clientSocket.on("close", function (message){
        console.log("Connection closed with message: " + message);
    });

    clientSocket.on("error", function(message){
        console.log("Connections error: " + message);
    });

});

// ---- TEST JSONS ----
var PlantList = '{"Plants1":"Gulderod","Plants2":"Løg","Plants3":"Chili","Temp1":"14","Temp2":"15","Temp3":"16","Fugt1":"60","Fugt2":"65","Fugt3":"70" }';



/*var PlantTypeRec = "{\"Temp\": {\"Fugt\": \
            [\"14 Grader\", 65%] } }";


var PlantSettings ="{\"TempS\": {\"FugtS\": \
            [t, f] } }";*/

var ReqData = "{\"Temp\": {\"Fugt\": \
[\"14 Grader\",65] } }";

客户：

// statics
//var reqPlants = false; //ms

//JSON transmissions

//test til terminalen
var AktFugt = 1;
var AktTemp = 13;


//værdien af reqlist stage
var reqList = false;
//sættes til true hvis listen er updatet
var setDefPlants = false;
//state tjekker bruger indstast
var BrugerTemp = '';
var BrugerFugt = '';

var reqPlantType = {
    command: "PlantTypeRec"
};

var reqPlantList = {
    command: "PlantList"
};

var reqPlantSettings= {
    command: "PlantSettings"
};

var Data = {
    command: "ReqData"
};

var SetDef1 = {
    command: "SetDefPlants1",
    plantT1: sessionStorage.getItem("planteT1"),
    plantF1: sessionStorage.getItem("planteF1")
}
var SetDef2 = {
    command: "SetDefPlants2",
    plantT2: sessionStorage.getItem("planteT2"),
    plantF2: sessionStorage.getItem("planteF2")

}
var SetDef3 = {
    command: "SetDefPlants3",
    plantT3: sessionStorage.getItem("planteT3"),
    plantF3: sessionStorage.getItem("planteF3")
}
var SetBruger = {
    command: "BrugerIndtastTF",
    brugerT: sessionStorage.getItem("BT"),
    brugerF: sessionStorage.getItem("BF")

}

var serverConnection = new WebSocket('ws://localhost:9000');

serverConnection.onopen = function () {
    console.log("Connection open");

  /*  if (reqPlants== true) { //ms
        serverConnection.send(JSON.stringify(reqPlantList));
        console.log("Requesting list from server.");
        reqPlants = false;
    }*/
}
//error message
serverConnection.onerror = function (event) {
    console.log("WebSocket error: " + event);
}

var messageObj
//skaffer message
serverConnection.onmessage = function (message) {
    console.log("Message from server: " + message.data);

    //tjekker om den skal sende listen af planter eller ikke
    console.log("Plantelist true/false: " + reqList);
    if (reqList == true)
    {

    messageObj = JSON.parse(message.data);
    console.log("reqList: " + reqList);
    DisplayPlanter(message.data);
    CreateTableFromJSON();
    reqList = false;
    }
}

//displayer listen af planter efter click op request list i html
//planter = "" er default værdi så der ikke står undefine
function DisplayPlanter(planter = "") {
    console.log("Generating list" + planter);
    }

/*
function DisplayPlanter(planter) {
    var htmlTxt = "<p><table class='center' border='0'><tr>";

    for (var i in planter) {
        if (i % 3 == 0) {
            htmlTxt += "</tr><tr>"
        }
        htmlTxt += "<td> message.data </td>";
    }
    htmlTxt += "</tr></table>"
    document.getElementById("p3").innerHTML = htmlTxt;
}*/
//anmoder serveren om listen 'Plantlist'
function requestList() {
    reqList = true;
    serverConnection.send(JSON.stringify(reqPlantList));
    console.log("Requesting list from server.");
    //kører display funktionen
    DisplayPlanter()
}

function AktuelleFugt() {
    var fugtData = 'Fugtighed: ' + AktFugt +'%';
    document.getElementById("p1").innerHTML = fugtData;
    AktFugt++;

}

function AktuelleTemp() {
    var tempData = 'Temperatur: ' + AktTemp +' grader';
    document.getElementById("p2").innerHTML = tempData;
    AktTemp++;
}

function requestData() {

    window.setInterval(function(){
        serverConnection.send(JSON.stringify(Data));
        console.log("Requesting Data from server.");
        AktuelleFugt();
        AktuelleTemp();

    }, 10000);

}


function CreateTableFromJSON() {


    document.getElementById("Plante1").innerHTML = messageObj.Plants1;    
    document.getElementById("Plante2").innerHTML = messageObj.Plants2;    
    document.getElementById("Plante3").innerHTML = messageObj.Plants3;    

    document.getElementById("Fugt1").innerHTML = messageObj.Fugt1 + "%";    
    document.getElementById("Fugt2").innerHTML = messageObj.Fugt2 + "%";    
    document.getElementById("Fugt3").innerHTML = messageObj.Fugt3 + "%";

    document.getElementById("Temp1").innerHTML = messageObj.Temp1 + " grader";    
    document.getElementById("Temp2").innerHTML = messageObj.Temp2 + " grader";    
    document.getElementById("Temp3").innerHTML = messageObj.Temp3 + " grader";

    setDefPlants = true;
}

function SetDefPlant(nr = '') {

    if(setDefPlants == true)
    {
        if(nr == 1)
        {

            //sender plante 1 fugt temp, disse variabler bliver anvendt over i server
            var cPlantF1 = messageObj.Fugt1;
            var cPlantT1 = messageObj.Temp1;

            sessionStorage.setItem("planteF1", cPlantF1);
            sessionStorage.setItem("planteT1", cPlantT1);

            console.log(messageObj.Plants1);
            serverConnection.send(JSON.stringify(SetDef1));
            console.log("Valg: " + messageObj.Plants1 + " sendt til server");
        }
        else if(nr == 2)
        {
            //sender plante 1 fugt temp, disse variabler bliver anvendt over i server
            var cPlantF2 = messageObj.Fugt2;
            var cPlantT2 = messageObj.Temp2;

            sessionStorage.setItem("planteF2", cPlantF2);
            sessionStorage.setItem("planteT2", cPlantT2);

            console.log(messageObj.Plants2);
            serverConnection.send(JSON.stringify(SetDef2));
            console.log("Valg: " + messageObj.Plants2 + " sendt til server");
        }
        else if(nr == 3)
        {
            var cPlantF3 = messageObj.Fugt3;
            var cPlantT3 = messageObj.Temp3;

            sessionStorage.setItem("planteF3", cPlantF3);
            sessionStorage.setItem("planteT3", cPlantT3);

            console.log(messageObj.Plants3);
            serverConnection.send(JSON.stringify(SetDef3)); 
            console.log("Valg: " + messageObj.Plants3 + " sendt til server");
        }
        else {
            console.log("Error SetDefPlant");
        }

    }else{

        console.log("List not updated: " + setDefPlants);
    }
}

function brugerindtast() {


    BrugerFugt = document.getElementById("40").value;
    document.getElementById("brugerensFugt").innerHTML = BrugerFugt + "%";

    BrugerTemp = document.getElementById("41").value;
    document.getElementById("brugerensTemp").innerHTML = BrugerTemp + " grader";


    console.log("Fugtigheden: " + BrugerFugt);
    console.log("Temperaturen: " + BrugerTemp);

    sessionStorage.setItem("BF", BrugerFugt);
    sessionStorage.setItem("BT", BrugerTemp);
    serverConnection.send(JSON.stringify(SetBruger));

  }

其中一个HTML网站：

<html lang="dk">
<head>

  <!-- Basic side ting
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>A.A.C</title>
  <meta name="description" content="">
  <meta name="author" content="">


  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSS link
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="Style.css" rel="stylesheet" type="text/css"/>

  <!-- Icon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="icon.png">


  <script type="text/javascript" src="C:\Users\Mads\Documents\www\my-projekt'\bob\client.js"></script>

  <!--Req List-->

</head>
<body>


    <!--- Menuen -->
    <div id="navigationBackground">

<ul>
  <li><a class="active" href="home1.html">Forside</a></li>
  <div id="navMenu">
  <li><a href="indstillinger.html">Indstillinger</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#Brugervejledning">Brugervejledning</a></li>
    <li><a href="Home.html">Log af</a></li></div>
  </ul>
</ul>
</div>
    <!-- Informations linjen i bunden -->
    <div id="toolbar" style=" position: fixed; bottom: 0px; left: 0px; height: 18px; width: 100%; color: #fff; background: #111;">
        |&nbsp;&nbsp; <a href="https://www.facebook.com/people/Mads-Sander-H%C3%B8gstrup/1410687839">+45 26 11 70 34</a>&nbsp;&nbsp; | &nbsp;&nbsp; Adresse: <a href="https://www.google.dk/maps/dir/56.2405098,10.7447435/Holme+Bygade+1,+8400+Ebeltoft/@56.2401699,10.7403446,16z/data=!4m8!4m7!1m0!1m5!1m1!1s0x464dcd2ff76461f5:0xb2fb40a4ceaf855a!2m2!1d10.744722!2d56.24017" target="_blank">Holme Bygade 1, 8400 Ebeltoft</a>&nbsp;&nbsp; |&nbsp; &nbsp;Mail: Mads-sh@hotmail.com&nbsp; &nbsp;|

</div>
<!--Terminal aktuelle temp og fugt-->
<br><br><br><br>


    <br>
<form  class="form-style-9" type="submit" action="manuelindstilling.html">

    <ul class="test"><li>
        <input type="submit" value="Manuelindstilling">
    </li></ul>

    </form>

    <form class="form-style-9" type="submit" action="forudindstilling.html">

            <ul class="test"><li>
                <input type="submit" value="Forudindstilling">
            </li></ul>

            </form>


<br><br>
<h3>Indtast fugtighed.</h3>
<input type="number" id="40" value="0">
<br><br>
<h3>Indtast temperatur.</h3>
<input type="number" id="41" value="0">
<br><br>
<button onclick="brugerindtast()">Start regulering</button>

<p><strong>Fugtighed:</strong></p>
<p id="brugerensFugt"></p>
<p><strong>Temperatur:</strong></p>
<p id="brugerensTemp"></p>


<br><br>
<div class="boxed">
        <h3>Aktuelle Temperatur og Fugt</h3>
        <p id = "p1"></p>
        <p id = "p2"></p>
        <script>
            requestData();
        </script>
      </div>





</body>
</html>

我希望能够立即在服务器上输入我在网站上输入的内容，因为在用户单击“开始”之后，我需要立即在此处使用该变量。