node.js - how to make a simple live page update?

Question

I\'m very very new to node.js, but there\'s actually only one simple thing that I am trying to achieve by learning the language.

I\'d like to create a webpage, where

Answer 1

Take a look at Socket.IO http://socket.io/#how-to-use

when the server decides to broadcast a change use:

io.sockets.emit('update-msg', { data: 'this is the data'});

on the client first connect socket.io and then wait for the "update-msg" event and update your dom:

var socket = io.connect('http://localhost');
socket.on('update-msg', function (msg) {
    console.log(msg);
    $('#mydiv').html(msg.data)
});

Answer 2

I created a system/methodology to live update (hot reload) front-end code using RequireJS and Node.js. I made sure it worked with both React and Backbone. You can read about it here:

https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

the basic steps involved in doing this yourself:

1. gulp.js watchers listen for filesystem changes
2. socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
3. client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
4. front-end app is configured / designed to re-evaluate all references to the modules that it wishes to hot-reload, in this case, only JS views, templates and CSS are available to hot reload - the router, controllers, datastores (Backbone Collections and Models) are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.