1

First a Heads Up! I am very new to the world of node.js and socket.io I have a json file which contains following data for example:-

{
"football": {

            "id": 1,
            "home": "Liverpool",
            "away": "Chelsea",
            "score": "1-0",
            "last scorer":"Gerrard"
             }
}

This file is updated live on few seconds basis.

What i really want to achieve is to parse this json and update the same to html on client side, in addition to that i want to listen for any changes in json file and update the same again to html client side. How can i achieve this, sorry if the question seemed dumb enough, but any suggestion can help.

Improve this question
1
  • 2
    My guess is that it was downvoted because you asked a question of "how do I do this?" rather than "I tried this, and it doesn't work; why doesn't it work and how can I fix it?" Commented Jun 19, 2015 at 13:25

2 Answers 2

Reset to default
5

i finally found something and with a little tweak and researching other answers i have finally made a working code First a brief review of what this code does watches your json file (in this case sports.json) if change detected then only reads the json file (in this case sports.json) then emits the read json file to connected clients

on the client side the magic begins as soon as you make changes to your json file

PS: There is a discussion regarding fs.watch firing twice on manual editing and saving (i will come up with a workaround soon and update here)

Server Side

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var jf = require('jsonfile'); //jsonfile module
var fs = require('fs'); //require file system

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



io.sockets.on('connection', function(socket) {
fs.watch("sports.json", function(event, fileName) { //watching my        sports.json file for any changes
    //NOTE: fs.watch returns event twice on detecting change due to reason that editors fire 2 events --- there are workarounds for this on stackoverflow

    jf.readFile('sports.json', function(err, data) { //if change detected read the sports.json 

        var data = data; //store in a var
        console.log('sent') //just for debugging
        socket.volatile.emit('notification', data); //emit to all clients
    });

});

});

http.listen(3000, function() { //listen to 3000
console.log('listening on *:3000');
});

Client Side:

<!doctype html>
<html>
  <head>
    <title>Socket.IO data</title>
<body>


<p id ="data">A data will appear here on change</p>

<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
 <script>
       var socket = io.connect('http://localhost:3000'); //you can replace localhost with your public domain name too!!

    socket.on('notification', function (data) {

        $('#data').text(data.football.home); //Liverpool

    });

    </script>
</body>

sports.json File

{
"football": {

            "id": 1,
            "home": "Liverpool",
            "away": "Chelsea",
            "score": "1-0",
            "last scorer":"Gerrard"
             }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Because you seem new to SO: if an answer helps you, even if it's not one to your own question (which I believe is relevant here, as you said you referenced other answers), it's helpful to upvote that answer so that users know that it is helpful.
2

(Sorry for the little-detailed answer, I'm having computer problems and it's hard to do much; I'll edit it after they're resolved and everything stops crashing)

To look for a change in the file, try something like: Monitor file change through AJAX, how? or Check if file has changed using HTML5 File API

Server file:

var EventEmitter = require('events').EventEmitter;
var footballWatcher = new EventEmitter();

io.on('connection', function (client) {

//
//Existing Code
//

//Node.js Event listener:
footballWatcher.on('update', function(){
    io.emit('footballUpdate', footballData);
});

//Code to look for a change in the file, use this in it:
if(updated){
    footballWatcher.emit('update');        
});

Client File:

//
//Existing Code (connections, methods, emits and responses, etc.)
//

socket.on('football', function(footballJSONData){
    //JSON interpretation
});
Improve this answer

3 Comments

I'm assuming you're having trouble with the node.js and socket.io parts of this, as you said you are new to them, so I'll try to help you more with those.
i took note of file watching idea of yours and implemented somthing i found elsewhere, thanks for your help!!!
No problem, I hope everything works out. Be sure to select an answer to your question if one of them solved your problem so that others don't attempt to solve an already solved problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.