上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台(http://www.hightopo.com/blog/70.html),这篇我们将进一步折腾,将算法运行到真正的后台: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) { 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); }); });
客户端的代码需要通过引入Socket.io客户端类库,通过socket = io.connect('http://localhost:8036/')链接服务器获得握手链接socket对象,剩下的代码就是同socket.emit发送客户端拖拽信息,以及socket.on监听服务器推送过来的自动布局结果:
g3d.mi(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]); } } });
几个注意点:
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; 这样的方式得到该函数进行调用,细节可以参考 http://nodejs.org/api/modules.html 的章节
3、这个例子是有缺陷的,以下视频播放过程你会发现,我打开了两个页面,这样就会有两个socket分别连接后台Node.js,而Node.js默认是单线程的,如果正在一个请求函数密集运算处理,则其他请求只能排队等待处理,这也是视频中我拖拽一个页面布局是,另一个页面无法操作的原因。当然你可以改进demo,采用http://nodejs.org/api/cluster.html的cluster方式,实现真正的后台多核任务处理
http://v.youku.com/v_show/id_XNjc1MjY2ODE2.html
相关推荐
网络拓扑自动布局算法几篇比较实用的算法论文,写的还可以,自己留做备份
针对现有网络拓扑图布局算法多以节点分布均匀为目标,没有考虑边的布局,可能会导致生成的拓扑图中边布局不清晰,提出一种基于扩展力学模型的网络拓扑图布局算法。该算法通过引入点边斥力保证边布局清晰,通过节点...
现代计算机网络迅猛发展,网络管理的任务也日趋复杂,而保证网络管理系统高效运行的基础正是网络拓扑发现。网络拓扑表现为计算机网络中各设备之间的连接关系。...本文介绍的就是基于SNMP协议的网络拓扑发现
功能如下: ...拓扑图可以按树型、Spring、圆形、Organic等自动布局排列。 4.设备内部资源发现 自动发现出设备内部的网口、光口、电口、磁盘、内存、CPU、软件服务等资源信息,进一步了解设备的内部状态。
基于pygame实现的网络拓扑可视化 功能包括:改变节点位置,颜色,改变边颜色,粗细,权重。
电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等都可以用 HTML5 的图形化界面来完成,所有这些简称为拓扑图。使用 HT 会让你的开发变得更加快速,快来玩玩吧!
网络拓扑图动态线条实现
基于SNMP的网络拓扑发现 一、 SNMP简介 SNMP(Simple Network Management Protocol,简单网络管理协议)是一种基于TCP/IP协议的互连网管理协议。 SNMP诞生于1988年,当时只想把它作为一个短期的网络管理框架,临时...
免费的网络拓扑自动发现工具,可以讲企业的网络拓扑自动构建以便以后随时发现问题,帮助管理员、工程师快速解决网络及系统故障
利用qunee实现js和html5完成网络拓扑图的自动排列展示
_基于SNMP协议的网络拓扑发现程序_
基于Zigbee技术的无线传感网络拓扑设计与实现
针对这一问题,面向一层或二层星型、一层mesh型和mesh型与星型两层混合的工业监控网络结构,根据网络结构特点和节点关系属性改进斥力张力模型,提出一种基于节点属性的启发式网络拓扑布局算法。实验结果证明该算法...
这是一个java源码,能够根据节点信息,自动绘制网络拓扑
基于网络化数据挖掘的拓扑布局算法研究.pdf
基于邻接表的网络拓扑结构描述 有7,800行代码
visio 网络拓扑图插件和倾斜线连线元素(含常用网络设备模具、3D倾斜线等)
本程序可以探测网络上某特定路由器的相邻路由器连接拓扑图,并在用户界面是一图状结构显示;同时提供显示路由器详细信息,获得路由器所在子网全部主机信息等相关功能。 开发环境 Windows XP SP2 + Microsoft Visual...
该文档详细介绍了网络拓扑所相关的使用知识,方便大家学习和了解更多的东西