基于 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 序列化的結果傳回到用戶端，讓用戶端反序列化，進而達到資料基本一緻的效果。

接下來我們來看看用戶端的實作吧：

那麼實時資料通訊系列到這裡就介紹完了，如有什麼問題，歡迎批評指正。