我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）》主要讲解了如何搭建一个实时数据通讯服务器，客户端与服务端是如何通讯的，相信通过上一篇的讲解，再配合上数据库的数据储存，我们就可以实现一个简易版的 Web 聊天工具了，有空的朋友可以自己尝试下实现，那么我们今天的主要内容真的是实现 WebGL 3D 拓扑图实时数据通讯了，请大家接着往下看。

有了前面的知识储备，我们就可以来真正实现我们 3D 拓扑图组件上节点位置信息的实时数据同步了，毋庸置疑，节点的位置信息必须是在服务端统筹控制，才能达到实时数据同步，也就是说，我们必须在服务端创建 DataModel 来管理节点，创建 ForceLayout 弹力布局节点位置，并在节点位置改变的过程中，实时地将位置信息推送到客户端，让每个客户端都更新各自页面上面的节点位置。

在服务端我们该如何创建 HT 的 DataModel 和 ForceLayout 呢？其实也很简单，我们可以看看下面的代码：

var ht = global.ht = this.ht = require('../../../build/ht-debug.js').ht,

    dataModel = new ht.DataModel(),

    reloadModel = require("../util.js").reloadModel;

reloadModel(dataModel, { A: 3, B: 5 });

require("../../../build/ht-forcelayout-debug.js");

var forceLayout = new ht.layout.Force3dLayout(dataModel);

forceLayout.onRelaxed = function() {

    var result = {};

    dataModel.each(function(data) {

        if (data instanceof ht.Node) {

            result[data.getTag()] = data.p3();

        }

    });

    io.emit('result', result);

};

forceLayout.start();

我们通过 require 将非 Node.js 模块包引入到程序中，并加以使用。在上面的代码中，我们确实创建了 HT 的拓扑节点，是通过 util.js 文件中的 relowdModel 方法创建的节点，那这个文件中到底是怎么实现创建 HT 拓扑节点的呢？接下来就来看看具体的实现：

function createNode(dataModel, id){

    var node = new ht.Node();

    node.setId(id);

    node.setTag(id);

    node.s3(40, 40, 40);

    node.s({

        'shape3d': 'sphere',

        'note': id,

        'note.position': 17,

        'note.background': 'yellow',

        'note.color': 'black',

        'note.autorotate': true,

        'note.face': 'top'

    });

    dataModel.add(node);

    return node;

}

function createEdge(dataModel, source, target){

    var edge = new ht.Edge(source, target);

    edge.s({

        'edge.width': 10,

        'shape3d.color': '#E74C3C',

        'edge.3d': true

    });

    dataModel.add(edge);

    return edge;

}

function reloadModel(dataModel, info){

    dataModel.clear();

    var ip = "192.168.1.";

    var count = 0;

    var root = createNode(dataModel, ip + count++);

    for (var i = 0; i < info.A; i++) {

        var iNode = createNode(dataModel, ip + count++);

        createEdge(dataModel, root, iNode);

        for (var j = 0; j < info.B; j++) {

            var jNode = createNode(dataModel, ip + count++);

            createEdge(dataModel, iNode, jNode);

        }

    }

}

this.reloadModel = reloadModel;

在这个文件中，封装了创建节点的方法 createNode，和创建连线的方法 createEdge，最后是通过 reloadModel 方法将前面的两个方法连接起来，在这个文件的最后，我们可以看到，只公开了 reloadModel 的函数接口。

当然光这些是不够的，这些还不能够达成实时数据通讯的功能，我们还需要监听和派发一些事件才能够达到效果，那么我们都监听了什么借口，派发了什么事件呢？

io.on('connection', function(socket) {

    socket.emit('ready', dataModel.serialize(0));

    console.log('a user connected');

    socket.on('disconnect', function() {

        console.log('user disconnected');

    });

    socket.on('moveMap', function(moveMap) {

        dataModel.sm().cs();

        for (var id in moveMap) {

            var data = dataModel.getDataByTag(id);

            if (data) {

                data.p3(moveMap[id]);

                dataModel.sm().as(data);

            }

        }

    });

});

上面那串代码是我们的事件监听，我们通过监听 moveMap 的事件，并获取从客户端传递上来的移动的节点坐标信息，根据参数的内容，我们将其改变服务端的 DataModel 中对应节点的坐标，改变后 ForceLayout 就会根据当前的状态去调整整个拓扑上所有节点的位置。那么在调节的过程中，我们是怎么知道 ForceLayout 是正在调整的呢？在前面介绍如何在 Node.js 上面创建 HT 相关的组件时贴出来的代码中就告诉我么怎么做了。

在创建 ForceLayout 组件的代码后面，紧跟着就是重载 ForceLayout 组件的 onRelaxed 方法，每次布局玩后，都会调用这个方法，这样我们就可以在这个方法中，编辑获取到 DataModel 中的所有节点的当前位置，并通过 io.emit 方法通知给所有的客户端，让客户端去实时更新对应节点的坐标位置。

但是还有一个问题，我们要怎么样让客户端显示的节点和服务端上的节点一一对应呢？首先不能让客户端自己创建节点，我们的做法其实也很简单，虽然不能保证客户端的节点 ID 会和服务端的节点 ID 一模一样，但是我们可以保证其他关键属性是一样，因为我们利用了 HT 的序列化功能，当有客户端连接到服务器时，就会向客户端派发 ready 事件，将 DataModel 序列化的结果返回到客户端，让客户端反序列化，从而达到数据基本一致的效果。

那么客户端和服务端的节点是如何保持一一对应的呢？首先我们得了解 HT 在获取节点对象上提供了几个方法，熟悉的朋友应该知道，有 getDataById 和 getDataByTag 两个方法，其中 ID 是 HT 系统自己维护的属性，Tag 是提供给用户自己维护其唯一性的属性，一般不建议使用 ID 作为业务上面的唯一标识，因为在序列化和反序列化时候可能会有细微的差别，很难保证反序列话后的节点 ID 和序列化前的 ID 是一样的。因此在本文中，我们是通过 Tag 属性来控制服务器和客户端的节点一一对应的。

接下来我们来看看客户端的实现吧：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="/socket.io/socket.io.js"></script>

        <script src="/build/ht-debug.js"></script>

        <script>

            var socket = io();

            var init = function() {

                var dm = window.dataModel = new ht.DataModel(),

                    sm = dm.sm(),

                    g3d = new ht.graph3d.Graph3dView(dm);

                g3d.setGridSize(100);

                g3d.setGridGap(100);

                g3d.setGridVisible(true);

                g3d.addToDOM();

                var moveNodes = null;

                g3d.mi(function(evt){

                    if ( evt.kind === 'beginMove'){

                        moveNodes = sm.getSelection();

                    }

                    else if (evt.kind === 'betweenMove'){

                        moveMap = {};

                        g3d.sm().each(function(data){

                            if(data instanceof ht.Node){

                                moveMap[data.getTag()] = data.p3();

                                console.info(data.p3());

                            }

                        });

                        socket.emit('moveMap', moveMap);

                    }

                    else if (evt.kind === 'endMove') {

                        moveNodes = null;

                    }

                });

                socket.on('ready', function(json) {

                    dm.clear();

                    dm.deserialize(json);

                });

                socket.on('result', function (result) {

                    for(var id in result){

                        var data = dm.getDataByTag([id]);

                        if (!data)

                            continue;

                        if (moveNodes && moveNodes.indexOf(data) >= 0)

                            continue;

                        data.p3(result[id]);

                    }

                });

            };

        </script>

    </head>

    <body onload="init();">

    </body>

</html>

代码并不长，我来介绍下具体的实现。首先是创建 3D 拓扑图组件，并做一些设置，让场景上出现线条，然后就是监听拓扑图上面的操作，当监听到 betweenMove 时，或许当前被移动的节点位置信息，向服务器派发该信息；接下来是监听服务器的 ready 事件，在事件回调中做了反序列化的操作，但是在反序列化之前，为什么要将场景中的所有节点 Clear 掉呢？是因为页面有可能是断线重连，如果是断线重连的话，没有将场景中的节点都 Clear 掉的话，反序列化后就会有节点重叠了，而且 Tag 属性也不再是唯一的了，所以这时候操作节点的话，将会很混乱；最后呢，就是监听服务器的 result 事件，在事件的回调中，跟新回调参数中对应节点的位置信息，但是其中做了些过滤，这是过滤正在移动的节点，因为正在移动的节点位置是认为控制的，所有不需要更新其节点位置信息。

那么实时数据通讯系列到这里就介绍完了，如有什么问题，欢迎批评指正。

通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）的更多相关文章

  1. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  2. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...

  3. Sqlserver2000联系Oracle11G数据库进行实时数据的同步

    Sqlserver2000联系Oracle11G数据库进行实时数据的同步 1,前提条件 我有sqlserver2000环境,已经存在oracle11g环境,准备这两个数据库,建立各自的訪问账号,两者之 ...

  4. 企业级实时数据文件同步服务_【all】

    全网数据定时备份方案[cron + rsync] [更多参考]全网数据定时备份方案[cron + rsync] 全网数据实时备份方案[inotify,sersync] [更多参考]全网数据实时备份方案 ...

  5. 使用wesocket从 rabbitMQ获取实时数据

    rabbitmq支持stomp组件,通过stomp组件和websocket可以从rabbitMQ获取实时数据.这里分享一个demo: 使用时需要引入的js ,用到了sock.js和stomp.js & ...

  6. Android Wear开发 - 数据通讯 - 第三节 : 事件处理

    http://developer.android.com/training/wearables/data-layer/events.html 以下是本人在学习官方开发文档时的笔记,主要是翻译为主,并在 ...

  7. 实时数据推送webSocket

    实时数据推送 在Web或移动项目中,服务器向客户端实时推送消息是一种常见的业务需求. 实现方式 Polling:轮询(俗称“拉”),即定期重新请求数据. Long-Polling:长轮询,是 Poll ...

  8. python采集websocket实时数据

    之前大部分的数据采集基本都是http的,也一直对如何采集websocket的实时数据有疑问,不知道入从哪里入手,一筹莫展,今天在知乎上看到了一篇采集websocket的文章,讲的很透彻 终于把这个疑问 ...

  9. iNeuOS工业互联网操作系统，三维（3D）模型在线编辑应用和实时数据统计（和值、均值、众数、方差、中位数等）

    目       录 1.      概述... 1 2.      三维(3D)模型在线编辑与应用... 2 3.      实时数据统计... 4 1.   概述 此次,iNeuOS工业互联网操作系 ...

随机推荐

  1. POI读取Excel常见问题

    最近在做一个将excel导入到报表中的功能,使用了POI来实现,发现POI使用有诸多不便之处,先记录下来,以后可能考虑使用Openxml. 1. 数值类型处理 通过POI取出的数值默认都是double ...

  2. 浏览器访问Servlet

    浏览器访问Servlet1.指定一个Servlet路径(                     在web.xml :              <servlet>             ...

  3. sublime text2 安装less2css插件

    之前一直用PhpStorm,功能十分强大,各种插件也有,不过比较占内存,有时候,左边的项目列表都刷不出来,今天又出现了这个问题,于是果断换sublime了. 由于项目中要用less编译,所以得装个le ...

  4. 我所记录的git命令（非常实用）

    一.前言 记录一下工作中常用到的git命令,只是简单的笔记,欢迎大家交流... [ 顺便问下园友们,怎么感觉博客园发布的博客搜索有时都搜不到,后台编辑能填的都填写了,还是觉得搜索排名不高? 相同的标题 ...

  5. Atom使用纪要

    一直在更新的原文地址奉上,欢迎PR:Atom使用纪要 官网地址: atom.io 目前(2015/7/29)Atom主题已有725个:Package已有2394 简单交代背景 Atom 是 Githu ...

  6. Atitit 动态调用webservice与客户端代理方式调用

    Atitit 动态调用webservice与客户端代理方式调用 方式1: 使用call.invoke  直接调用WSDL,缺点:麻烦,不推荐--特别是JAVA调用.NET的WS时,会有不少的问题需要解 ...

  7. MySQL_01之MySQL数据库基础

    1.通过SQL(结构化查询语言)操作数据库: DDL:数据定义语言,创建库,创建表,选择: DML:数据操作语言,完成数据增删改: DQL:数据查询语言,完成数据查询: DCL:数据控制语言,授权.回 ...

  8. 关闭form上chrome的autofill

    Chrome的autofill会自动找到form中的type=password的元素,然后把这个元素前面的元素当做是用户名,它不在乎这个元素叫什么名字.这样又是注册又是登录,你会发现它自作聪明的aut ...

  9. JS原生第六篇 （帅哥）

    复习 按钮不可用    disabled =  "disabled"  ||  true setTimeout   只执行一次    setInterval  执行很多次 递归调用 ...

  10. SSIS Data Flow 的 Execution Tree 和 Data Pipeline

    一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...