今天沒有延續上一篇講的内容，穿插一段小插曲，WebSocket 實時資料通訊同步的問題，今天我們并不是很純粹地講 WebSocket 相關知識，我們通過 WebGL 3D 拓撲圖來呈現一個有趣的 Demo。接下來我們就看看這個實時資料通訊是一個什麼樣的套路。
根據上面的思路，我們該如何去規劃呢？既然需要實時資料通訊，那麼就需要使用 WebSocket，WebSocket 又是什麼呢？WebSocket 是 HTML5 一種新的協定，它沒有标準的 API，各個實作都有自己的一套 API，在這裡我們就不去詳細研究 WebSocket 的具體實作，我也講不了，至少現在講不了。
我們來寫一個最簡單的例子，将任何一個用戶端發送到伺服器的消息，原封不動的轉發到所有連接配接到伺服器的用戶端，我們來看看要實作這樣的一個功能，服務端要怎麼設計。
首先我們得搭建一個簡易的 web 伺服器。
以上的代碼的 Node.js 的代碼，将這串代碼貼到一個 js 檔案中，比如命名為 server.js 然後在 Terminal 中 cd 到 server.js 對應的檔案夾下，如果 node server.js 後回車，如果發現報了 Cannot find module ‘xxx’ 的字樣，那麼說明你在目前目錄下沒有安裝程式用到的相關包。那麼我們在目前目錄下建立一個叫 package.json 的檔案，然後把下面的程式拷貝到該檔案中，然後在 Terminal 中輸入 npm install，等安裝完後，就可以正常啟動伺服器了。
在 server.js 中加入上面那串代碼，就可以實作用戶端之間的實時資料通訊問題。但是在浏覽器輸入 localhost:4000 你看到的是 Hello Message! 的字樣，要怎樣才能通路到具體的 html 網頁内容呢？這個時候就需要稍微修改下我們的伺服器了。
也就是将前面提到的 res.end('<h1>Hello Message!</h1>’); 代碼換成 res.sendFile(__dirname + ‘/index.html'); 做個頁面跳轉，進而達到通路具體 html 網頁的目的，在這邊是是為了滿足 Demo 而做的方案，要搭建一個真正的 http 靜态伺服器肯定不是這樣子的，搭建 http 靜态伺服器我在這邊就不介入研究了，大家剛興趣的話，可以自己到網上搜尋學習。
那麼用戶端該如何實作來展現服務端的實時通訊呢？
以上代碼就可以做到資料同步了，具體我來解釋下。
頁面很簡單，有一個 input 文本框，和一個 Send 按鈕，還有一個 ul 無序清單用來顯示使用者發送的内容，當使用者在 input 文本框中輸入内容後，按下 enter 鍵或者點選 Send 按鈕都會想伺服器發送文本框中填入的内容，并且伺服器會将這條消息原封不動地推送到所有的用戶端中，在用戶端接收到消息後，就會想 ul 無序清單中填入消息。
