时间戳

首页 > 解决方案 > 将 http 发送到 NodeJS/Express 后端以执行功能的按钮

javascript - 将 http 发送到 NodeJS/Express 后端以执行功能的按钮

问题描述

我的前端有一个按钮，并且在我的服务器端后端使用 nodejs 和 express。我在后端有一个函数（主要是控制 Philips Hue API），我希望在单击按钮时通过 http 请求执行它。

我尝试了不同的方法。飞利浦 Hue 控件的后端脚本在我提取它并在 git bash 中运行时独立工作。我认为最终存在一些概念或编码错误。

HTML 按钮

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

客户端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);
    });
});

后端/服务器端 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();
});

标签： javascripthtmlnode.jshttpexpress

解决方案

隔离问题。在添加任何其他内容之前，请确保您的服务器和浏览器控制台都能正常通信。这或多或少是客户端和服务器通信的最少代码。运行node server.js，test导航到localhost:3000，单击文本，观察控制台输出。

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>

推荐阅读