Parsing JSON url with NODE.JS and keeping it up to date with SOCKET.IO

Question

Parsing JSON url with NODE.JS and keeping it up to date with SOCKET.IO

I am very new to node.js and socket.io and I am trying to figure out how to read a JSON array from an external url, then parse it and display on the main page. Then I believe I use socket.io to keep that connection open and keep the JSON object up to date when a change occurs.

This is what I have so far for node.js.

var http = require("http");
var fs = require('fs');
var options = 'http://api.trakt.tv/user/watching.json/APIKEY/USERNAME';

var server = http.createServer(function(request, response){ 
  console.log('Connection');

http.get(options, function(res){
var data = '';

res.on('data', function (chunk){
    data += chunk;
});

res.on('end',function(){
    var obj = JSON.parse(data);
    console.log( obj );
})

});
  response.end(); 
}); 

server.listen(8888);

When I connect to localhost:8888 I see the console show up with "connection" and then the console logs the contents of the JSON object. This is as far as I have managed to get. I would appreciate and help and pointers on how to get that JSON object displayed and styled on my index page and keep it up to date

TIA Mark

javascript
node.js
websocket
socket.io

Answer 1

Okay, now that I understand the problem, here is my answer. It's going to be a bit advice laden, as there is no true "right way" to do what you want. All we can be assured if is that yes, you are going to want to use WebSockets (or in this case socket.io, which can emulate websockets on older browsers).

Your current pull code is probably fine, though you're going to want to tweak that code to run on a timeout so that the latest JSON is pulled every so often. In addition, we want to keep the various moving parts of this seperate: Reading from the API/writing the cache, listening to the cache, and then feeding the cache out to connected clients:

var http = require("http");
var fs = require('fs');
var url = 'http://api.trakt.tv/user/watching.json/APIKEY/USERNAME';
var cacheFile = '/path/to/cachefile';
var connectedSockets = [];

function fetchJson() {
    http.get(url, function(res) {
        body = '';

        res.on('data', function(data) {
            body += data;
        });

        res.on('end', function() {
            fs.writeFileSync(cacheFile, body);
            setTimeout(fetchJson, 1000); // Fetch it again in a second
        });
    })
}

fetchJson(); // Start fetching to our JSON cache

// Start watching our cache file
fs.watch(cacheFile, function(event, filename) {
    if(event == 'change') {
        fs.readFile(cacheFile, function(data) {
            connectedSockets.forEach(function(socket) {
                socket.emit('data', JSON.parse(data));
            });
        });
    }
});

// Now setup our socket server
var io = require('socket.io').listen(8888);
io.sockets.on('connection', function(socket) {
    connectedSockets.push(socket);
});

I don't handle disconnected here (you'll want to remove disconnected or err'ed sockets from the connectedSockets list), and I didn't actually run this...but it should give you an idea of where to head.

On the client, it should be a matter of simply:

var socket = io.connect('http://localhost:8888');
socket.on('data', function (data) {
    // Data will contain your JSON object, do your DOM manip here
});