通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

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

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

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

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

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

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

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

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