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

Question

I have been jumped into project of my own so that I can learn about networks and apps using networks. However, I am currently stuck at one point and havent yet find a proper answer for that. I am connected to a remote device via TCP. It's listening and I want to send a distinct integer value each time I press A,B, or C. I am able to send a value but only for once and I also dont know how to change it(it only sends the value I already set for it e.g. 32).

For example, I want to send 131 for A, 1118 for B, and 12819 for C. Numbers are just random to examplify the subject.

<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
    });

question from:https://stackoverflow.com/questions/66060708/send-a-value-to-client-using-tcp-each-time-click-on-a-button-on-html-and-javascr

Answer 1

In your html-file you can create three different buttons with three differents ids

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

Then for your buttons make inside your js-file three different 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); 
})

The same for the two other buttons with the different values

In your server side js file you have to create a function like this

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
});
} 

Also you have to listen on a path for example

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);
 });

The code snippets are (adapted) from my repository, there you can see the full code https://github.com/CreaTorAlexander/corona-motivator