html5 – Grid com auto refresh html + angularJS

Question:

Well I have a grid and it needs to be ALWAYS updated because it contains information that needs to be dynamically updated.

This grid is populated with a rest flame that gives me a json. I need the grid to be updated as soon as the json of the rest call has any changes.

In my case to handle the json data and put it on the grid I'm using AngularJS and populating it with an ng-repeat. Today I'm getting updates with a 1 second setInterval… but that's not cool, because if I have to put some checkbox on this grid, I won't be able to check it because as it updates every 1 second it would always return to FALSE.

Would you have any solution? I don't know how sites that "broadcast" football games work… but it's more or less like this. I would like to know how they do to add or remove lines from the grid without having to refresh the grid or the entire scope.

My JS:

 var app = angular.module("teste", []);



 app.controller("GridController", ['$scope', '$http', function (ng,
 $http) {

     ng.locations = [];

    setInterval(function() {
             $http.get("http://testechamarest.com:18888/json").success(function
 (dados) {
               ng.locations = $.map(dados, function (dev) {
              return dev;
            });

 }, 1000); ]);

New problem: When I change the time of updates, for example: I put 3000 (3 secs) the page takes 3 seconds to open… in the current case it's taking 1 sec to open… my logic when doing this must be all wrong… but I don't know what I could improve on. 🙁

Answer:

Take a look at WebSocket, the problem is that it only works on newer browsers and it's still a little precarious, but I think it's more or less what you need.

Regarding your grid, I don't know how the library you use works, but it must have a method that inserts new lines instead of refreshing the whole thing

I use this bibliography here http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/15_navigation/01_pro_keymap_access.html

Very complete even in the free version

Att.

Example of use

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            var JSON_que_estou_usando = {};

            function WebSocketTest() {
                if ("WebSocket" in window) {
                    alert("WebSocket is supported by your Browser!");
                    // Let us open a web socket
                    var ws = new WebSocket("ws://localhost:9998/echo");
                    ws.onopen = function() {
                        // Web Socket is connected, send data using send()
                        ws.send("Message to send");
                        console.log("Message is sent...");
                    };
                    ws.onmessage = function(evt) {
                        var received_msg = evt.data;
                        console.log("Message is received...");

                        //faz a verificação
                        if(JSON_que_estou_usando.stringify == received_msg.stringify){
                            //adiciona linhas na grid
                        }
                    };
                    ws.onclose = function() {
                        // websocket is closed.
                        console.log("Connection is closed...");
                    };
                }
                else
                {
                    // The browser doesn't support WebSocket
                    alert("WebSocket NOT supported by your Browser!");
                }
            }
        </script>
    </head>
    <body>
        <div id="sse">
            <a href="javascript:WebSocketTest()">Run WebSocket</a>
        </div>
    </body>
</html>

I saw this example here and just added a few lines in the "onmessage" method. This should do what you need

I hope it helps

Scroll to Top