[置顶] 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

今天没有延续上一篇讲的内容，穿插一段小插曲，WebSocket 实时数据通讯同步的问题，今天我们并不是很纯粹地讲 WebSocket 相关知识，我们通过 WebGL 3D 拓扑图来呈现一个有趣的 Demo。接下来我们就看看这个实时数据通讯是一个什么样的套路。

我们先来聊聊这次 Demo 的思路吧，首先我要有一个 3D 的拓扑图组件，在上面创建几个节点，然后通过拉力布局（ForceLayout）将这些节点自动布局，但是有一定，需要在不同的网页窗口下，对应节点的位置是一样的，简单地说就是不同网页窗口所呈现的节点布局是一样，而且拖动不同网页窗口中的任意的节点，都将更新所有页面窗口，让所有窗口的呈现都是一样的。

根据上面的思路，我们该如何去规划呢？既然需要实时数据通讯，那么就需要使用 WebSocket，WebSocket 又是什么呢？WebSocket 是 HTML5 一种新的协议，它没有标准的 API，各个实现都有自己的一套 API，在这里我们就不去详细研究 WebSocket 的具体实现，我也讲不了，至少现在讲不了。

在这里我们用比较易上手的 Node.js 的 Socket.IO 做通讯框架，Socket.IO 让长连接通讯变得无比简单，服务器再也不用等待客户端的请求就可以直接给客户端发送消息，根据这样的特性就可以实现数据通讯同步的问题。

我们来写一个最简单的例子，将任何一个客户端发送到服务器的消息，原封不动的转发到所有连接到服务器的客户端，我们来看看要实现这样的一个功能，服务端要怎么设计。