How to update constantly data from server in JS?

Question

There are data that are constantly updated on the server and written to the file (every 100 ms), i need to transfer that to the client side, for the time being I did this through the setInterval function (which should check them at the same interval), checking this JSON file, and im not sure if it's a correct solution of the problem.

Server side code:

function SerialPortStart(COM, Input){
console.log( COM, Input);
var serialPort = new SerialPort(COM, {
    parser: SerialPort.parsers.readline('\n'),
    baudrate: +Input || 9600
});
serialPort.on('data', function (data) { 
     thermodata = data.toString();
    console.log(data);
    fs.writeFileSync(__dirname +'/views/cockpit.json',JSON.stringify(thermodata));
});

};

Client side code:

function SerialPortStart(){
var xhr = new XMLHttpRequest();
setInterval(function() {
    xhr.open('GET', 'cockpit.json', true);
    xhr.send();
            xhr.onreadystatechange = function() {
                if(this.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    console.log(data);
                    obj = data.split(';');
                    if(cockpitNum[3] != null){
                        $('header .mainBlock1 .cockpit .elements .blockHaw .cirle').css({
                            transform: 'rotate('+(obj[cockpitNum[3]]) +'deg)'
                        }); }
                    }, 50);

Martijn · Answer 1 · 2017-10-03T12:54:45.877

2

You are now no longer in the realm of AJAX. A normal request can take around 500ms to complete, thats to slow and apart from that, it consumes way to much resource.

Time to learn Websockets. A websocket is (sortof) a small connection (just like http), but it doesnt close (unlike http which closes at the end of the call). This way you can broadcast data to all connected to the websocket and it's super fast.

Node.js is an example which allows you to set this up via Socket.io. You can think of your situation as a kind of one-direction-chat :)

edited Oct 03 '17 at 12:54

answered Oct 03 '17 at 12:24

Martijn

15,791
4
36
68

Thanks for reply. I found the protocol WebSocket and besides it socket.io, so what would you recommend in this case? – Ilya Pribil Oct 03 '17 at 12:38
I have heard of it, AFAIK it's fine. You don't require funny stuff, about any socket will do :) – Martijn Oct 03 '17 at 12:44
@Martijn - The OP is using a browser as the client. You can't use any socket from a browser. Your choices in the browser are an Ajax (http) connection or a webSocket connection. – jfriend00 Oct 03 '17 at 12:51

jfriend00 · Answer 2 · 2017-10-03T12:52:56.610

I would suggest that you use the socket.io library and open a socket.io connection from your web page to your server. This is a continuous connection between client and server and allows data to be sent either direction from client to server or server to client with very low overhead. It is ideal for lots of transactions between client and server and is ideal when the server wants to regularly send data to the client. It is way more efficient than Ajax polling from the client.

You would implement a node.js server that listens for incoming socket.io connections, does whatever authentication is needed to establish who is listening on the other end and then your server can regularly send that client data whenever there is new data to send it.

You can read about socket.io here. There are libraries there for both client and server. The client-side library uses the webSocket transport (which all modern browsers support), but socket.io adds a number of very useful features on top of socket.io (such as connection monitoring, auto-reconnection, auto-serialization to JSON, etc...).

See this post for a list of features socket.io adds on top of webSockets:

Socket.io features beyond plain webSocket

How to update constantly data from server in JS?

2 Answers2