Node Js server refreshing page when receiving a JSON update

Question

My application is a web interface to monitor changes on "objects" processed by the pc and in particular when they get over a particular threshold.

The Node Js server runs on the same pc and has the only use of displaying data on a table, refreshing it when one of them reached a given threshold. At that point the program that calculates the "objects" opens a socket to the Node Js server and sends the json data.

My issue is to reload the page on the user browser to diplay the new resoults without having the user to manually hit the browser refresh button.

For the server I used the express, express-ejs-layouts and body-parser modules.

This is my server code:

// require our dependencies
var express        = require('express');
var expressLayouts = require('express-ejs-layouts');
var bodyParser     = require('body-parser');
var app            = express();
var port           = 3000;

// use ejs and express layouts
app.set('view engine', 'ejs');
app.use(expressLayouts);

// use body parser
app.use(bodyParser.json({extended : true}));

// route our app
var router = require('./app/routes');
app.use('/', router);


// set static files (css and images, etc) location
app.use(express.static(__dirname + '/public'));

// start the server
app.listen(port, function() {
console.log('app started');
});

Leaving aside page estetics (css,images, layouts) the core of the server, serving GET and POST requests is on the routes.js file that, on GET requests renders the pages passing the JSON data to the javascript page containing the table and on POST requests saves the JSON passed by my "objects" calculator.

This is the routes.js code:

// require express
var express = require('express');
var path    = require('path');

// create our router object
var router = express.Router();

// export our router
module.exports = router;

router.post("/", function(request, response) {
global.exportage = request.body;
});

// route for our homepage
router.get('/displayobj', function(req, res) {
//res.send(global.exportage);
res.render('pages/displayobj',{data:global.exportage});
});

How you can see I'm using a quite horrible global variable to pass data but I wanted to keep it as simple as possible.

How could I force the reload on the user browser when a new JSON is received?

I tried using location.reload(true) but I get an error during execution saying: "location is not defined".

The problem, in my opinion, is that the server satisfies the GET request issued by the browser and nothing else happens cause the communication is already completed. I would like not to refresh the page with a fixed interval of time but using the new JSON as triggering event (edited after reading comments).

Answer 1

You cannot do real time communication from server to client with simple HTTP requests. Consider using either long polling or websockets.

The simplest solution for you is to use a library like Socket.io that handles it. When the content need to be refreshed, send an event to the client and then either refresh using window.location.reload() or update the content with the DOM API.