Button to send http to NodeJS/Express backend to execute a function

Question

I have a button in my frontend, and am using nodejs and express on my server-side backend. I have a function (essentially controlling Philips Hue API) on the backend, and I would like it to be executed when the button is clicked, through a http request.

I have tried different methods. the backend script for the Philips Hue controls work independently when i extract it and run it in git bash. I think there's some conceptual or coding errors on end.

Html Button

<button id="pulse" type="button" class="btn btn-danger">Pulsing Lights</button>

Client side JS

const pulseButton = document.getElementById("pulse");
pulseButton.addEventListener('click', function() {
  fetch('/huePulseLight', {method: 'POST'})
    .then(function(response) {
      if(response.ok) {
        console.log('Click was recorded');
        return;
      }
      throw new Error('Request failed.');
    })
    .catch(function(error) {
      console.log(error);
    });
});

Backend/Server Side JS

const port = 3000;
const server = http.Server(app);
server.listen(process.env.PORT || 3000, function(){
    console.log('Server running on port ' + port);
});


const app = express();

pulseLight = lightState.create().on().colorLoop();

function setPulseLight() {
  nodeHueapi.setLightState(1, pulseLight, function (err, lights) {
    if (err) throw err;
    displayResult(lights);
  });

  nodeHueapi.setLightState(2, pulseLight, function (err, lights) {
    if (err) throw err;
    displayResult(lights);
  });

  nodeHueapi.setLightState(3, pulseLight, function (err, lights) {
    if (err) throw err;
    displayResult(lights);
  });
}

app.post('/huePulseLight', function(req, res){
console.log("Pulse Light Set");
setPulseLight();
});

nope. i think the endpoints are ok though. i suspect the problem lies with the http call. — abigfatcat
– abigfatcat, Commented Jan 31, 2019 at 0:02

Watercycle · Accepted Answer · 2019-01-30 04:03:19Z

2

Isolate the problem. Make sure both your server and browser consoles are communicating properly before adding anything else. This is more-or-less the minimum code for the client and server to communicate. Run node server.js in test, navigate to localhost:3000, click the text, observe the console outputs.

test/server.js

const express = require("express")
const app = express()

// make index.html accessible to clients
app.use(express.static('public'))

app.post('/huePulseLight', function(request, response){
  console.log("Pulse Light Set");
  response.send("Click Recorded")
});

app.listen(3000)

test/public/index.html

<html>
  <head></head>
  </body>
    <p id="pulse">foo</p>

    <script>      
      const pulseButton = document.getElementById("pulse")

      pulseButton.addEventListener('click', function() {
        fetch('/huePulseLight', {method: 'POST'})
          .then(response => response.text())
          .then(text => console.log(text))
      })
    </script>
  </body>
</html>

edited Jan 30, 2019 at 4:03

answered Jan 29, 2019 at 6:31

Watercycle

6171 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abigfatcat Over a year ago

no it does not. i think the http request is done incorrectly, would appreciate any help.

sirnobrain · Accepted Answer · 2019-01-29 05:50:14Z

1

You are missing app.listen(PORT) on your server.

Also, you're not sending back anything from the server to the client, that might cause the client to keep the connection open with the server and your fetch promise will never resolved.

answered Jan 29, 2019 at 5:50

sirnobrain

1331 silver badge8 bronze badges

2 Comments

abigfatcat Over a year ago

Thanks, I have the port config in front. Just didn't want to flood. Amended to reflect.

sirnobrain Over a year ago

If you're running your server on your local machine on port 3000, have you tried changing your fetch URI parameter to localhost:3000/huePulseLight

Collectives™ on Stack Overflow

Button to send http to NodeJS/Express backend to execute a function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related