How to change the current static html file to another html file in Nodejs ?

Question

i am trying to get my nodejs script to change the html file displayed when a certain socket.io is fired see my script below

var app = require('express')();
var server = require('http').createServer(app);
var bin = "casperjs";
var args = ['server.js'];
var io = require('socket.io').listen(server);
server.listen(process.env.PORT);

app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/index.html');
});

io.sockets.on('connection', function (socket) {
    console.log("socket connection incoming");




socket.on('dout', function () {
var spawn = require('child_process').spawn,
child = spawn(bin, args);
child.stdin.setEncoding = 'utf-8';



socket.on('trout', function(data){
child.stdin.write(data.message + '\n');


//child.stdout.pipe(process.stdout);
child.stdout.on('data', function (data) {
console.log('  ' + data);
});


socket.on('mout', function() {
       console.log('communicatio\n');
       /*
       trying to change the html file displayed 
       to account.html from index.html

       i have tried this with no success 

app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/index.html');
});


       */
    }); 




});
// console.log(child.stdout);
//console.log(child.stdout.pipe(write.stdout));
    });
});

this is what i am trying to get to work

socket.on('mout', function() {
       console.log('communicatio\n');
       /*
       trying to change the html file displayed 
       to account.html from index.html

       i have tried this with no success 

app.get('/', function (req, res) {
res.sendfile(__dirname + '/client/index.html');
});


       */

can anyone help me on how i can do this correctly

Answer 1

Socket.io events happen outside of the traditional request/response lifecycle of an express app. Once the user has loaded your initial route, an express route will only get triggered by an additional request. You should handle communication via socket.io's on and emit methods.

Something like the following psuedocode should work:

Server

socket.on('mout', function() {
  // this may be a little heavy handed
  // ideally you are only updating small parts of the page as they change
  // or notifying the client that they need to make an additional request ajaxically
  fs.readFile('__dirname + '/client/index.html', 'utf8', function (err, content) {
    if (err) return;
    socket.emit('pageUpdate', function () {
      content: content
    });
  });

});

Client:

// when the pageUpdate event is fired, 
// change the body content of the response
socket.on('pageUpdate', function (content) {
  $('body').html($('body', content));
});