I don't see on client in real time the value of json file with node js

Question

I see this example on a precedent question on this link how to display a realtime variable in nodejs in HTML and i dont't see in real time the value of json file on client despite the answer is defined correctly. Moreover in the bash i launch the command node --inspect socketProva.js (socketProva.js is the name of my server file) and i see in the page of inspect this message "WebSockets request was expected". The strange thing is that the server show correctly in real time the data of json file but the communication with client it does not seem to happen. Thanks for the answers and excuse for my bad english.

socketProva.js and index.html

var io = require('socket.io')(8080); // The port should be different of your HTTP server.
var fs = require('fs');
var obj = JSON.parse(fs.readFileSync('prova.json', 'utf8'));

io.on('connection', function (socket) { // Notify for a new connection and pass the socket as parameter.
    console.log('new connection');

    var incremental = 0;
    setInterval(function () {
        console.log('emit new value', obj);
        obj = JSON.parse(fs.readFileSync('prova.json', 'utf8'));
        socket.emit('update-value', obj); // Emit on the opened socket.
        incremental++;
    }, 1000);

});

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p id="messages"></p> 
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <pre id="incremental"></pre>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        var socket = io('http://localhost:8080'); // Connect the socket on the port defined before.

        socket.on('update-value', function (value) { // When a 'update-value' event is received, execute the following code.
            console.log('received new value', value);

            $('#incremental').html(value);
        });
    </script>
  </body>
</html>

JSON File: prova.json

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

Did you make sure to use a different port than your http server? — mpasko256, Nov 27 '18 at 16:34
Yes, the port is correctly i use the 8080 that it does not conflict with nothing. I edit my question add the code of my source code of my project. — fabios95, Nov 27 '18 at 16:44
rejnev i accept your suggestion therefore I modified the json file (on stackoverflow) but in my project on pc the json file was written in the same way that you suggested me. Therefore the problem continues to exist and I can not see the json file data in real time in the client. Do you know how to solve the problem? Thanks again. — fabios95, Nov 27 '18 at 21:03

score 1 · Accepted Answer · answered Nov 28 '18 at 09:55

If the prova.json don't change during time, there is no need to read it using fs.readFileSync. You can require it.

var obj = require('prova.json');

The full example is shown below: (remember I changed the client socket.io.js version)

server:

var io = require('socket.io')();
var data = require('./data.json')

io.on('connection', function (socket) {
    console.log('connected:', socket.client.id);
    setInterval(function () {
        data.value = Math.random();
        socket.emit('update-value', data);
        console.log('message sent to the clients');
    }, 1000);
});

io.listen(8080);

client:

<!DOCTYPE html>
<html>

<head>
  <!-- this changed -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>
  <div id="incremental"></div>

  <script>
    var socket = io('http://localhost:8080');

    socket.on('update-value', function (data) {
      console.log('received new value', data);
      var $div = $('<div>');
      $div.text(data.value)
      $('#incremental').append($div);
    });
  </script>
</body>

</html>

And data.json:

{
    "value": 1
}

I don't see on client in real time the value of json file with node js

1 Answers1