基於HTML5的3D網路拓撲自動布局

上篇將ht for web的3d拓撲彈力布局的演算法執行在web workers後台（這篇我們將進一步折騰，將演算法執行到真正的後台：node.js，事先申明node.js篇和web workers篇一樣，在這個應用場景下並不能提高效能，純粹為了折騰好玩，當然也不會白玩，人生就在折騰中，只有折騰才能真正成長。

核心實現**和web workers篇基本一致，唯一區別在於前後臺互動的方式上，worker通過postmessage和addeventlistener('message' 就可以傳送和接收訊息，對於真正分離前後臺的node.js自然沒那麼簡單了，我採用了socket.io通訊框架，socket.io讓長連線通訊變得無比簡單，和web workers的通訊幾乎一樣的容易了，socket.io的用法下圖一目了然：

node.js後台**如下，通過require引入ht和socket.io相關類庫，io = require('socket.io').listen(8036)構建出乙個監聽在8036埠的服務，通過io.sockets.on('connection'等著客戶端頁面來建立的socket通訊，通過socket.on('movemap',監聽客戶端發過來的節點拖拽變化資訊進行同步，通過 socket.emit('result', result);傳送自動布局演算法的運算結果push到客戶端。

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) ;
datamodel.each(function(data) 
});socket.emit('result', result);
};forcelayout.start();
socket.on('movemap', function (movemap) 
} 
});socket.on('reload', function (data) ); 
});

客戶端的**需要通過引入socket.io客戶端類庫，通過socket = io.connect('http://localhost:8036/')鏈結伺服器獲得握手鏈結socket物件，剩下的**就是同socket.emit傳送客戶端拖拽資訊，以及socket.on監聽伺服器推送過來的自動布局結果：

幾個注意點：

1、首選和web workers一樣，跑在node.js的類庫肯定不能操作window和document之類的頁面特定元素物件，從這點說很多考慮不周全的類庫會把自己限制死只能在頁面主線程執行，這點ht for web考慮得很周到，不僅ht.js包括所有ht-forcelayout.js外掛程式都是可運在web workers和node.js的非gui環境，因為我也常需要ht.js執行在後台直接將datamodel的資料和前台進行json的資料格式轉換儲存。

2、util.js定義的reloadmodel函式我增加了this.reloadmodel = reloadmodel;的邏輯，這樣才能在node.js後台**reloadmodel = require("../util.js").reloadmodel; 這樣的方式得到該函式進行呼叫，細節可以參考的章節

基於HTML5的3D網路拓撲自動布局

基於 HTML5 結合網際網路的 3D 隧道

基於HTML5實現3D監控應用流動效果

基於HTML5實現3D監控應用流動效果

基於HTML5的3D網路拓撲自動布局

基於 HTML5 結合網際網路 的 3D 隧道

基於HTML5實現3D監控應用流動效果

基於HTML5實現3D監控應用流動效果

相關推薦

基於 HTML5 結合網際網路的 3D 隧道