How can I make a web UI where the user can set time to trigger an output pin in nodejs?

Question

I am running nodejs webserver on my raspberry pi 3 and I want to create a user interface where the user can set a specific time of a day and trigger an output on that particular time. I have tried websocket to control an led from my webpage and I want for it to light up at a pre-set time.

Answer 1

NODE webserver GPIO

You can use node.js as a server and generate HTML with the vanilla javascript way. You can use express.js or simply XMLHttpRequest! The backend would respond to your GPIO input. So I would have the following files server.js, client.js, index.html

Roughly have this sort of setup off.

From backend.

#Server.js
var server = http.createServer(function(request, response) {
fs.readFile(index, function (err, html) {
        if (err) {
            response.writeHead(404)
            response.write("File not found")
            throw err;
        } 
    switch(request.method){
            case "GET":
                if(request.url ==='/'){
                    response.writeHeader(200, {"Content-Type": "text/html"});
                    response.write(html)
                    response.end()
                }
                else if(request.url ==='/client.js'){
                    response.writeHeader(200, {"Content-Type": "text/html"});
                    response.write(clientjs)
                    response.end()
                }
             break;
          case "POST":
                 if (request.url === '/trigger){
                            response.write(data)
                            setTimeout(()=>{
                              GPIO = 1
                            },data)
                            response.end() 

                    })
                }
})

Then on your client you could handle the HTML.

#client.js
var myForm = document.getElementById('time')
var xhr = new XMLHttpRequest();
xhr.open('POST', 'trigger', true);
xhr.onerror = function(){
    console.log("request error...")
}
xhr.onload = function (){
    if(this.status == 200){


    }
}
xhr.send(myForm)

On your HTML #all the HTML mark up and JS srcs

Also not what your asking but node red does something similar.