Automatic layout of 3D network topology based on HTML5

The previous algorithm for the 3D topological elastic layout of the HT for Web runs in the Web Workers Backend (http://www.hightopo.com/blog/70.html), which we will further toss, The algorithm runs to the real backstage: node. js, in advance to affirm that node. js and Web workers, in this application scenario can not improve performance, purely for the sake of fun, of course, will not play, life is in the toss, only toss to really grow.

The core implementation code and Web workers are basically consistent, the only difference is the way the front and back interaction, the worker through PostMessage and AddEventListener (' message ' can send and receive messages, For the real separation of the front and back of the node. JS nature is not so simple, I adopted the Socket.io communication framework, Socket.io make long-connected communication is very simple, and the Web workers communication almost as easy, socket.io usage at a glance:

The node. JS Backend code follows the introduction of the HT and Socket.io related class libraries via require, IO = require (' Socket.io '). Listen (8036) build a service that listens on 8036 ports, Through the Io.sockets.on (' connection ' waiting for the client page to establish the socket communication, through the Socket.on (' Movemap ', the listener client sent over the picture node drag change information to synchronize, through the Socket.emit (' Result ', results); the output of the Send automatic layout algorithm is push to the client.

IO = require (' Socket.io '). Listen (8036); HT = require (' Ht.js '). Ht;require ("Ht-forcelayout.js"); Reloadmodel = require ("    Util.js "). Reloadmodel; Io.sockets.on (' Connection ', function (socket) {var Datamodel = new ht.    Datamodel (), forcelayout = new Ht.layout.Force3dLayout (Datamodel);        forcelayout.onrelaxed = function () {var result = {}; Datamodel.each (function (data) {if (Data instanceof ht.           Node) {result[data._id] = DATA.P3 ();        }         });    Socket.emit (' result ', result);    };    Forcelayout.start ();        Socket.on (' Movemap ', function (movemap) {Datamodel.sm (). CS ();            for (Var ID in movemap) {var data = Datamodel.getdatabyid (ID);                if (data) {DATA.P3 (Movemap[id]);            Datamodel.sm (). as (data);    }        }         });       Socket.on (' Reload ', function (data) {Reloadmodel (Datamodel, data);           }); });

The

Client's code needs to get the handshake link socket object through the introduction of the Socket.io client class library through the socket = Io.connect (' http://localhost:8036/') linked server. The rest of the code is the same socket.emit send the client drag and drop information, as well as the Socket.on listener server pushed over the automatic layout results:

            G3D.MI (the function (evt) {                if (evt.kind = = = ' Betweenmove ') {                                    movemap = {};                    G3d.sm (). each (function (data) {                        if (data instanceof ht. Node) {                            movemap[data._id] = DATA.P3 ();                        }                    });                    Socket.emit (' Movemap ', movemap);                                }            );             Socket = Io.connect (' http://localhost:8036/');                                          Socket.on (' Result ', function (result) {for                (var ID in result) {                    var data = Datamodel.getdatabyid ([id]);                    if (Data &&!g3d.isselected (data)) {                        data.p3 (Result[id]);}}             );

A few points to note:

1, the preferred and web workers, the class library running in node. JS must not manipulate page-specific element objects such as window and document, and from this point of view, many poorly thought-out class libraries will limit themselves to the main thread of the page, HT for The web is thoughtful, not only ht.js including all Ht-forcelayout.js plugins are available on the web Workers and node. JS's non-GUI environment, because I also often need ht.js run in the background directly to the Datamodel data and foreground JSON data format conversion storage.

2, util.js definition of the Reloadmodel function I added This.reloadmodel = Reloadmodel; logic so that in node. JS Background Code Reloadmodel = require (". /util.js "). Reloadmodel; Such a way to get the function to call, the details can refer to the Http://nodejs.org/api/modules.html Chapter

3, this example is defective, the following video playback process you will find that I opened two pages, So there will be two sockets connected to the background node. js, and node. JS is single-threaded, and if you are processing a request-function-intensive operation, other requests can only be queued for processing, which is why I dragged a page layout in the video and another page could not be manipulated. Of course, you can improve the demo, using http://nodejs.org/api/cluster.html cluster way to achieve real background multi-core task processing

　　

Automatic layout of 3D network topology based on HTML5