Question

我是Node.js和JavaScript的新手。我有一个特定的问题，但大多需要有关最佳解决方案的建议。

我正在运行Node服务器。我希望客户端能够向服务器提交字符串，然后服务器显示一个显示字符串数据的新HTML页面。

我正在使用Express和Socket.io。

在以下文件中，客户端会看到index.html，然后在提交表单后会看到return.html。我将输入字符串打印到控制台，输出是预期的（无论用户输入什么）。但return.html永远不会使用输入字符串进行更新。

我还尝试在异步系列中发送return.html页面和change_result调用，但sendFile函数永远不会结束，系列中的第二个函数永远不会被调用。在之前的尝试中，它在setTimeout函数周围emit('change_result')间歇性地工作。

为什么对change_result的呼叫没有做任何事情？我使用相同的技术更新以前版本中原始index.html的标题。我应该路由到localhost.../return.html并在那里发送帖子数据，还是类似的东西？

server.js

var express    = require('express');
var app = express();
var server = require('http').createServer(app);
var io     = require('socket.io')(server); 
var bodyParser = require('body-parser') //for POST request
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

server.listen(8080, function() {
  console.log("Server running on port 8080.");
});

var dir = __dirname;

app.get('/', function(req, res) {
    res.sendFile(dir + '/index.html');
});

app.post('/', function(req, res) {
  var query1=req.body.input1
  console.log("Server: In post request.")
  console.log(query1);
  res.sendFile(dir + '/return.html');
  io.emit('change_result', {
    result: query1
  });
});

的index.html

<!DOCTYPE html>
<html>
<body id="body">
<form method="post" action="http://localhost:8080">
String: <input type="text" name="input1" id="input1" />
<input type="submit" id="button1" value="Submit" />
</form>
</body>
</html>

return.html

<!DOCTYPE html>
<html>
<body id="body">
<p id="heading1">Result: </p>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var socket = io();
  socket.on('change_result', function(data) {
      document.getElementById('heading1').innerHTML = "Result: \""+data.result"\"";
  });
});
</script>
</body>
</html>

Answer 1

我在socket.io内部没有膝盖，但IMO的问题是，服务器无法知道是否有任何监听器准备就绪。

我认为你应该准备一个＆＃39; ready＆＃39;事件，一旦加载了return.html，然后收听＆＃39; change_result＆＃39;。还将套接字通信与服务器上的POST响应分开。像这样。

server.js

    $d1 = strtotime('2017-05-15');
    $d2 = strtotime('2017-05-31');
    $div = 24 * 3600;
    echo abs(($d2 - $d1) / $div); // 16 days

return.html

var query;

app.get('/', function(req, res) {
    res.sendFile(dir + '/index.html');
});

app.post('/', function(req, res) {
    query = req.body.input1;
    console.log("Server: In post request.");
    console.log(query);
    res.sendFile(dir + '/return.html');
});

io.on('connection', function(socket) {
    socket.on('ready', function() {
        socket.emit('change_result', {result: query});
    });
});

发送新的HTML页面并在从原始页面发出POST请求后向其发出GET请求

1 个答案: