Jstree lazy loading using Socket IO

Question

I have seen lazy loading using request response of jquery ajax but isn't there any way I can load the node data lazily using Socket IO? For example I want something like this

$("#tree").jstree({
      "core": {
          "data": function(data){
            socket.on("node",function(node){
              data = node;
            })
          }
       }
    });

And on each click I would be able to call the data callback to set the node. Any thoughts on that? Thanks in anticipation.

Answer 1

I don't know about Socket IO but i'm sure you're not doing it right with jstree : here is what your function should look like :

function(currentNode, callback){
        //we got it called twice, prolly because of angular
        if(currentNode.id=='#'){
            var me = this;
            // perform a request with your framework here and call this once you have your data, '#' mean we're loading the root nodes
            var nodes = <your data>  
            callback.call(me, nodes);
        }else{
           var me = this;
           // we're loading child nodes
           // same as before ask the nodes to the server then call the callback with the data loaded.
           var nodes = <your data>
           callback.call(me, nodes)
       }    

}

Note : "this" is the tree instance.

Answer 2

Does this help?

var ws = new WebSocket("ws://xxxx.xx/xxx/");
ws.onopen = function () {
    ws.onmessage = function (evt) {
        $("#codeeditor").jstree({
            "core": {
                "data": {
                    "data": function(data){
                         data = evt.data;
                    }
                }
            }
        });
    };
};

Also some approach to keep the WebSocket connected all along is needed, which I didn't show here.