How to Update live data from socket on browser with DataTables without ajax calls?

Question

I built a bridge between socket and websocket with webtcp. Then i was able to display the data on browser, however it is not updating in real time unless i refresh the whole page. It needs to be updated constantly showing all the data. This is how i get the data, parse it and update it.

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

    var arr = data.split("|").slice(1);
    var dataSet = {};
    arr.map((o, i) => {
        if ((i + 1) % 2 != 0) dataSet[o] = arr[i + 1];
    });
    console.log(dataSet);

    $(document).ready(function () {
        $("#example").DataTable({
            retrieve: true,
            deferRender: true,
            searching: false,
            paging: false,
            "data": [dataSet],
            "columns": [
                {"data": "power"},
                {"data": "mode"},
                {"data": "execution"},
                {"data": "Xact"},
                {"data": "Yact"},
                {"data": "Zact"},
                {"data": "Xcom"},
                {"data": "Ycom"},
                {"data": "Zcom"},
                {"data": "path_feedrate"},
                {"data": "line"},
                {"data": "Block"},
                {"data": "program"}
            ],
        });
    });
});

This is my html:

<table id="example" class="display" width="100%">
    <thead>
    <tr>
        <th>Power</th>
        <th>Mode</th>
        <th>Execution</th>
        <th>Xact</th>
        <th>Yact</th>
        <th>Zact</th>
        <th>Xcom</th>
        <th>Ycom</th>
        <th>Zcom</th>
        <th>path_feedrate</th>
        <th>line</th>
        <th>Block</th>
        <th>program</th>
    </tr>
    </thead>
</table>

This is how my data looks on console and on browser, it gets updated on console as waterjet machine is working but not on browser:

This is how looks raw data from socket:

2018-08-14T22:17:00.0631|Xcom|0.00|Ycom|0.00|path_feedrate|0.00
2018-08-14T22:17:00.0683|line|389286|Block|389286
2018-08-14T22:17:00.0709|Xact|402.79|Yact|33.84|Xcom|38.71|Ycom|24.19|path_feedrate|45.65
2018-08-14T22:17:00.0735|Xcom|0.00|Ycom|0.00|path_feedrate|0.00
2018-08-14T22:17:00.0787|line|389288|Block|389288
2018-08-14T22:17:00.0840|Xact|402.78|Xcom|19.36|path_feedrate|19.36
2018-08-14T22:17:00.0866|Xcom|0.00|path_feedrate|0.00|line|389290|Block|389290
2018-08-14T22:17:00.0944|Xact|402.75|Yact|33.83|Xcom|58.07|Ycom|24.19|path_feedrate|62.91
2018-08-14T22:17:00.0970|Xcom|0.00|Ycom|0.00|path_feedrate|0.00|line|389292|Block|389292

and so on....

score 0 · Answer 1 · answered Aug 14 '18 at 23:16

You are right to wait for the document to load at first, but after that the code you use to populate the table isn't running again until the document is loaded again (refresh).

Put the code that populates the table in a function and have it check the document.readyState property, to only run once the DOM is loaded:

function fillDataTable(dataSet){
  if(document.readyState === "complete") {
    $("#example").DataTable({
        retrieve: true,
        deferRender: true,
        searching: false,
        paging: false,
        "data": [dataSet],
        "columns": [
            {"data": "power"},
            {"data": "mode"},
            {"data": "execution"},
            {"data": "Xact"},
            {"data": "Yact"},
            {"data": "Zact"},
            {"data": "Xcom"},
            {"data": "Ycom"},
            {"data": "Zcom"},
            {"data": "path_feedrate"},
            {"data": "line"},
            {"data": "Block"},
            {"data": "program"}
        ],
    });
  }
}

And then call it in the socket.on method:

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

  const arr = data.split("|").slice(1);
  let dataSet = {};
  arr.map((o, i) => {
    if ((i + 1) % 2 != 0) dataSet[o] = arr[i + 1];
  });
  console.log(dataSet)

  fillDataTable(dataSet)

});

thank you for the quick help, I will test it tomorrow when the waterjet starts up again. Is my data going to show only on the first row as in the picture or it will show all of it? Because i want to show all the data in progress. — Asyl, Aug 14 '18 at 23:23
Right, there is still a problem with your code, as you override the properties of an object over an over instead of creating an array. Could you share an example of the data you feed into the socket? — Luca Kiebel, Aug 14 '18 at 23:26
I just edited and added the raw data I get from socket on my question. Could you show me more efficient way of doing that? Is it possible to just create an array ? — Asyl, Aug 14 '18 at 23:30
it is not updating the data on browser still. What could be the problem? And why somebody downvoted my question? — Asyl, Aug 15 '18 at 16:07

score 0 · Accepted Answer · answered Aug 16 '18 at 22:21

The answer is easier than I thought and it is better without using any external libraries and tables.

 <div class="cell">
        <div class="row">
            <div class="cell">
                <div class="info">
                    <div>POWER:</div>
                    <div>MODE:</div>
                    <div>EXECUTION:</div>
                    <div>BLOCK:</div>
                    <div>LINE:</div>
                    <div>FEEDRATE:</div>
                    <div>PROGRAM:</div>
                </div>
            </div>
            <div class="cell">
                <div class="live-data">
                    <div id="power"></div>
                    <div id="mode"></div>
                    <div id="execution"></div>
                    <div id="block"></div>
                    <div id="line"></div>
                    <div id="feedrate"></div>
                    <div id="program"></div>
                </div>
            </div>
        </div>
    </div>

and this is my js:

    if (dataSet.power) document.getElementById("power").innerHTML = dataSet.power;
    if (dataSet.mode) document.getElementById("mode").innerHTML = dataSet.mode;
    if (dataSet.execution) document.getElementById("execution").innerHTML = dataSet.execution;
    if (dataSet.block) document.getElementById("block").innerHTML = dataSet.block;
    if (dataSet.line) document.getElementById("line").innerHTML = dataSet.line;
    if (dataSet.path_feedrate) document.getElementById("feedrate").innerHTML = dataSet.path_feedrate;
    if (dataSet.program) document.getElementById("program").innerHTML = dataSet.program;
    if (dataSet.Xact) document.getElementById("xact").innerHTML = dataSet.Xact;
    if (dataSet.Yact) document.getElementById("yact").innerHTML = dataSet.Yact;
    if (dataSet.Zact) document.getElementById("zact").innerHTML = dataSet.Zact;
    if (dataSet.Xcom) document.getElementById("xcom").innerHTML = dataSet.Xcom;
    if (dataSet.Ycom) document.getElementById("ycom").innerHTML = dataSet.Ycom;
    if (dataSet.Zcom) document.getElementById("zcom").innerHTML = dataSet.Zcom;

That's it, and it works great.

How to Update live data from socket on browser with DataTables without ajax calls?

2 Answers2