CODEWITHSUNDEEP
javascripthtmlnode.jsexpress
Kevin Kraft
Kevin Kraft

Reputation: 160

Send new HTML page and make GET request to it after POST request from original page

I'm new to Node.js and JavaScript. I have a specific problem but mostly need advice on the best solution.

I'm running a Node server. I want the client to be able to submit a string to the server, then the server to display a new HTML page that shows the string data.

I'm using Express and Socket.io.

In the following files, the client sees index.html, then after submitting the form it sees return.html. I print the input string to the console, and the output is as expected (whatever the user enters). But the return.html is never updated with the input string.

I also tried sending the return.html page and the change_result call in an async series, but the sendFile function never ends and the second function in the series is never called. In previous attempts it worked intermittently with a setTimeout around the emit('change_result') function.

Why doesn't the call to change_result do anything? I used the same technique to update the headings of the original index.html in previous versions. Should I be routing to localhost.../return.html and sending the post data there, or something like that?

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>

Upvotes: 1

Views: 1943

Answers (1)

thomas_892
thomas_892

Reputation: 11

I'm not knee-deep inside socket.io, but IMO the problem is, that the server has no way to know if any listeners are ready.

I think you should emit a 'ready' event, once the return.html is loaded, then listen to 'change_result'. Also separate the socket communication from the POST response on the server. Like so.

server.js

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

return.html

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

Upvotes: 1

Related Questions