每次单击 HTML 和 javascript 上的按钮时,使用 TCP 向客户端发送一个值,其中每个按钮发送不同的值

Send a value to client using TCP each time click on a button on HTML and javascript, where each button sends a different value

我已经投入到我自己的项目中,以便我可以了解网络和使用网络的应用程序。但是,我目前停留在某一点上,还没有找到合适的答案。我通过 TCP 连接到远程设备。它正在监听,每次我按 A、B 或 C 时,我都想发送一个不同的整数值。我能够发送一个值,但只能发送一次,而且我也不知道如何更改它(它只发送我已经发送的值为其设置,例如 32).

比如我想A发131,B发1118,C发12819,数字是随机的,为了举例说明。

<ul id="menu">
        <li class="parent"><a href="#">Encode Mode<span class="expand">&raquo;</span></a>
            <ul class="child">
            <li><a href="#" nowrap>A</a></li>
            <li><a href="#" nowrap>B</a></li>
            <li><a href="#" nowrap>C</a></li>
            </ul>
        </li>
</ul>
   var net = require('net');

    var setval = 32;

    var buf = new Buffer(1024);
    buf.writeInt32LE(setval, 0); //max value to send 2147483647

    let client = new net.Socket();
    client.connect(PORT, IP , () => {
    console.log("Connected");
    client.write(buf); //This will send the byte buffer over TCP
    });

在您的 html-file 中,您可以使用三个不同的 ID 创建三个不同的按钮

<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>

然后在你的 js 文件 中为你的按钮创建三个不同的 eventListeners

document.getElementById("btn1").addEventListener('click', function() {
    const data = {value: 131};
    const options = {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data)
    };
    await fetch('/startMyFunction', options); 
})

其他两个具有不同值的按钮也是如此

在您的服务器端 js 文件中,您必须创建这样的函数

myFunction(val) {

var buf = new Buffer(1024);
buf.writeInt32LE(val, 0); //max value to send 2147483647

// Assumes the connection is established
client.write(buf); //This will send the byte buffer over TCP
});
} 

你还必须监听路径,例如

app.post('/startMyFunction', (req, res) => {
    // read the parameter out of the request body
    const val = req.body.value
    // Call the function with this parameter
    myFunction(val);
 });

代码片段(改编自)我的存储库,您可以在那里看到完整的代码 https://github.com/CreaTorAlexander/corona-motivator