Fred's blog

最近參與的一個 Project，需要在 WebSocket 下實作許多機制，這著實讓人傷透腦筋。又由於 JavaScript 完全是非同步（asynchronous）的設計概念，若遇到必需等待 Server 回應後才能繼續執行的工作，處理起來可是一件異常麻煩的事。雖然很熟悉運用回調函數（Callback Function）和暱名函數（Anonymous Function)來做，但一層包一層的設計，總讓人覺得進入無限階層的夢境地獄，什麼時候醒來都不知道。 這是筆者要達成的需求：『發送自己定義的命令去 Server，然後等待 Server 回應，一旦收到 Server 回應就可以繼續往下處理。』 一般的情況下，多數人都會這樣做（這理使用 Socket.IO 來建立 WebSocket，並和 Server 要當前時間為例）： /* Define handler to receive response from server */ socket.on('Clock', function(data) { /* Do something */ alert(data); }); /* Send command to server */ socket.emit('Clock', 'Time'); 可是，並非每次對 Server 的請求，都希望透過 alert() 跳出結果，我們有時只是想要利用 Server 給的時間做一些其他處理，雖然是下同樣的命令，但後續處理完全不一樣。於是，筆者，設計了這樣的方式，簡單的去處理這種問題： var command = { 'Time': [], 'Date': [] /* You can define more commands */ }; socket.on('Clock', function(data) { if (command[data.command].length) { for (var index in command[data.command]) command[data.command][index](data.result); ...

一直處於假標準狀態的 HTML5，過程中一直有變化，讓人無法放心使用。不過到了今年，HTML5 總算進入了準決賽的階段，大部份功能已經確定下來，其中 WebSocket 就是最讓人關切的項目之一，因為這意味著未來 Web 不再只是單次性的觸發服務，而是可以讓使用者端與伺服器長時間處於連線狀態，並進行即時性的資料傳交換。 關於 WebSocket，彷間許多隨 HTML5 起舞的人，其實都說明不夠清楚，多半只強調能達成 TCP Socket 形式的連線，和無所不能的優點。其實，WebSocket 並非是我們所知的原生 Socket ，而只是一種架構於 HTTP Protocol 上的延伸定義，所以換句話來說，不能直接拿來連線到非 HTTP 以外的通訊協定。 至於它的做法，就是在瀏覽器向伺服器要資料時，在 Request Header 裡加上『Connection:Upgrade』來告訴伺服器：『我要改變連線形態』。然後伺服器會依照瀏覽器給的 WebSocket 相關標頭（header）和交握用的金鑰（Key），進行認證和改變處理方式。進入 WebSocket 連線的客戶端，就有如在使用 TCP Socket 或 Telnet 一樣，可以隨意在任意時間點傳送資料給伺服器處理，伺服器也可以在這連線下即時回應。所以就某方面來說，這剛好可以含蓋並取代過去 Web 1.0 的 Refresh Page 和 Web 2.0 後的 Long-polling 技術。 寫過網路程式的人都知道，如何定義 Protocol 才是傷腦筋的事，開啟了一個『類 Socket』意味著我們又回到了過去的年代，要自己解決 Protocol 的定義。不過也已經有現成的 Library 可以使用，許多問題我們已經不用擔心，本文將提到的 Socket.IO 就是其中之一。此外，由於 WebSocket 需要 Client/Server 同時實作，所以，這些 Library 多半都包括了兩部份的實作。 Server 端，使用 NodeJS + Express web framework + Socket.IO(0.8.6)： /* Module dependencies */ var express = require('express'); var io = require(...