實時 Web 應用的窘境
Web 應用的信息交互過程通常是客戶端通過瀏覽器發出一個請求，服務器端接收和審覈完請求後進行處理並返回結果給客戶端，然後客戶端瀏覽器將信息呈現出來，這種 機制對於信息變化不是特別頻繁的應用尚能相安無事，但是對於那些實時要求比較高的應用來說，比如說在線遊戲、在線證券、設備監控、新聞在線播報、RSS 訂閱推送等等，當客戶端瀏覽器準備呈現這些信息的時候，這些信息在服務器端可能已經過時了。所以保持客戶端和服務器端的信息同步是實時 Web 應用的關鍵要素，對 Web 開發人員來說也是一個難題。在 WebSocket 規範出來之前，開發人員想實現這些實時的 Web 應用，不得不採用一些折衷的方案，其中最常用的就是輪詢 (Polling) 和 Comet 技術，而 Comet 技術實際上是輪詢技術的改進，又可細分爲兩種實現方式，一種是長輪詢機制，一種稱爲流技術。下面我們簡單介紹一下這幾種技術：
輪詢：
這 是最早的一種實現實時 Web 應用的方案。客戶端以一定的時間間隔向服務端發出請求，以頻繁請求的方式來保持客戶端和服務器端的同步。這種同步方案的最大問題是，當客戶端以固定頻率向 服務器發起請求的時候，服務器端的數據可能並沒有更新，這樣會帶來很多無謂的網絡傳輸，所以這是一種非常低效的實時方案。
長輪詢：
長 輪詢是對定時輪詢的改進和提高，目地是爲了降低無效的網絡傳輸。當服務器端沒有數據更新的時候，連接會保持一段時間週期直到數據或狀態改變或者時間過期， 通過這種機制來減少無效的客戶端和服務器間的交互。當然，如果服務端的數據變更非常頻繁的話，這種機制和定時輪詢比較起來沒有本質上的性能的提高。
流：
流 技術方案通常就是在客戶端的頁面使用一個隱藏的窗口向服務端發出一個長連接的請求。服務器端接到這個請求後作出迴應並不斷更新連接狀態以保證客戶端和服務 器端的連接不過期。通過這種機制可以將服務器端的信息源源不斷地推向客戶端。這種機制在用戶體驗上有一點問題，需要針對不同的瀏覽器設計不同的方案來改進 用戶體驗，同時這種機制在併發比較大的情況下，對服務器端的資源是一個極大的考驗。
綜合這幾種方案，您會發現這些目前我們所使用的所謂的實 時技術並不是真正的實時技術，它們只是在用 Ajax 方式來模擬實時的效果，在每次客戶端和服務器端交互的時候都是一次 HTTP 的請求和應答的過程，而每一次的 HTTP 請求和應答都帶有完整的 HTTP 頭信息，這就增加了每次傳輸的數據量，而且這些方案中客戶端和服務器端的編程實現都比較複雜，在實際的應用中，爲了模擬比較真實的實時效果，開發人員往往 需要構造兩個 HTTP 連接來模擬客戶端和服務器之間的雙向通訊，一個連接用來處理客戶端到服務器端的數據傳輸，一個連接用來處理服務器端到客戶端的數據傳輸，這不可避免地增加 了編程實現的複雜度，也增加了服務器端的負載，制約了應用系統的擴展性。
WebSocket 的拯救
HTML5 WebSocket 設計出來的目的就是要取代輪詢和 Comet 技術，使客戶端瀏覽器具備像 C/S 架構下桌面系統的實時通訊能力。 瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以後，客戶端和服務器端就可以通過 TCP 連接直接交換數據。因爲 WebSocket 連接本質上就是一個 TCP 連接，所以在數據傳輸的穩定性和數據傳輸量的大小方面，和輪詢以及 Comet 技術比較，具有很大的性能優勢。Websocket.org 網站對傳統的輪詢方式和 WebSocket 調用方式作了一個詳細的測試和比較，將一個簡單的 Web 應用分別用輪詢方式和 WebSocket 方式來實現，在這裏引用一下他們的測試結果圖：
圖 1. 輪詢和 WebSocket 實現方式的網絡負載對比圖
通過這張圖可以清楚的看出，在流量和負載增大的情況下，WebSocket 方案相比傳統的 Ajax 輪詢方案有極大的性能優勢。這也是爲什麼我們認爲 WebSocket 是未來實時 Web 應用的首選方案的原因。
WebSocket 規範
WebSocket 協議本質上是一個基於 TCP 的協議。爲了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表 明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。
下面我們來詳細介紹一下 WebSocket 規範，由於這個規範目前還是處於草案階段，版本的變化比較快，我們選擇 draft-hixie-thewebsocketprotocol-76版本來描述 WebSocket 協議。因爲這個版本目前在一些主流的瀏覽器上比如 Chrome,、FireFox、Opera 上都得到比較好的支持，您如果參照的是新一些的版本話，內容可能會略有差別。
一個典型的 WebSocket 發起請求和得到響應的例子看起來如下：
清單 1. WebSocket 握手協議
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
客戶端到服務端： GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Upgrade: WebSocket Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 Origin: http://example.com [8-byte security key] 服務端到客戶端： HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade WebSocket-Origin: http://example.com WebSocket-Location: ws://example.com/demo [16-byte hash response] |
在實際的開發過程中，爲了使用 WebSocket 接口構建 Web 應用，我們首先需要構建一個實現了 WebSocket 規範的服務器，服務器端的實現不受平臺和開發語言的限制，只需要遵從 WebSocket 規範即可，目前已經出現了一些比較成熟的 WebSocket 服務器端實現，比如：
- Kaazing WebSocket Gateway — 一個 Java 實現的 WebSocket Server
- mod_pywebsocket — 一個 Python 實現的 WebSocket Server
- Netty —一個 Java 實現的網絡框架其中包括了對 WebSocket 的支持
- node.js —一個 Server 端的 JavaScript 框架提供了對 WebSocket 的支持
WebSocket JavaScript 接口
上 一節介紹了 WebSocket 規範，其中主要介紹了 WebSocket 的握手協議。握手協議通常是我們在構建 WebSocket 服務器端的實現和提供瀏覽器的 WebSocket 支持時需要考慮的問題，而針對 Web 開發人員的 WebSocket JavaScript 客戶端接口是非常簡單的，以下是 WebSocket JavaScript 接口的定義：
清單 2. WebSocket JavaScript 定義
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
[Constructor(in DOMString url, in optional DOMString protocol)] interface WebSocket { readonly attribute DOMString URL; // ready state const unsigned short CONNECTING = 0; const unsigned short OPEN = 1; const unsigned short CLOSED = 2; readonly attribute unsigned short readyState; readonly attribute unsigned long bufferedAmount; //networking attribute Function onopen; attribute Function onmessage; attribute Function onclose; boolean send(in DOMString data); void close(); }; WebSocket implements EventTarget; |
圖 2. WebSocket JavaScript 接口
下面是一段簡單的 JavaScript 代碼展示了怎樣建立 WebSocket 連接和獲取數據：
清單 3. 建立 WebSocket 連接的實例 JavaScript 代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var wsServer = 'ws://localhost:8888/Demo'; var websocket = new WebSocket(wsServer); websocket.onopen = function (evt) { onOpen(evt) }; websocket.onclose = function (evt) { onClose(evt) }; websocket.onmessage = function (evt) { onMessage(evt) }; websocket.onerror = function (evt) { onError(evt) }; function onOpen(evt) { console.log("Connected to WebSocket server."); } function onClose(evt) { console.log("Disconnected"); } function onMessage(evt) { console.log('Retrieved data from server: ' + evt.data); } function onError(evt) { console.log('Error occured: ' + evt.data); } |
下面是主流瀏覽器對 HTML5 WebSocket 的支持情況：
WebSocket 實戰
這 一節裏我們用一個案例來演示怎麼使用 WebSocket 構建一個實時的 Web 應用。這是一個簡單的實時多人聊天系統，包括客戶端和服務端的實現。客戶端通過瀏覽器向聊天服務器發起請求，服務器端解析客戶端發出的握手請求併產生應答 信息返回給客戶端，從而在客戶端和服務器之間建立連接通道。服務器支持廣播功能，每個聊天用戶發送的信息會實時的發送給所有的用戶，當用戶退出聊天室時， 服務器端需要清理相應用戶的連接信息，避免資源的泄漏。以下我們分別從服務器端和客戶端來演示這個 Web 聊天系統的實現，在實現方式上我們採用了 C# 語言來實現 WebSocket 服務器，而客戶端是一個運行在瀏覽器裏的 HTML 文件。
WebSocket 服務器端實現
這 個聊天服務器的實現和基於套接字的網絡應用程序非常類似，首先是服務器端要啓動一個套接字監聽來自客戶端的連接請求，關鍵的區別在於 WebSocket 服務器需要解析客戶端的 WebSocket 握手信息，並根據 WebSocket 規範的要求產生相應的應答信息。一旦 WebSocket 連接通道建立以後，客戶端和服務器端的交互就和普通的套接字網絡應用程序是一樣的了。所以在下面的關於 WebSocket 服務器端實現的描述中，我們主要闡述 WebSocket 服務器怎樣處理 WebSocket 握手信息，至於 WebSocket 監聽端口的建立，套接字信息流的讀取和寫入，都是一些常用的套接字編程的方式，我們就不多做解釋了，您可以自行參閱本文的附件源代碼文件。
在描述 WebSocket 規範時提到，一個典型的 WebSocket Upgrade 信息如下所示：
|
1
2
3
4
5
6
7
8
|
GET /demo HTTP/1.1 Host: example.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Upgrade: WebSocket Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 Origin: http://example.com [8-byte security key] |
- 逐個字符讀取 Sec-WebSocket-Key1 頭信息中的值，將數值型字符連接到一起放到一個臨時字符串裏，同時統計所有空格的數量；
- 將在第 1 步裏生成的數字字符串轉換成一個整型數字，然後除以第 1 步裏統計出來的空格數量，將得到的浮點數轉換成整數型；
- 將第 2 步裏生成的整型值轉換爲符合網絡傳輸的網絡字節數組；
- 對 Sec-WebSocket-Key2 頭信息同樣進行第 1 到第 3 步的操作，得到另外一個網絡字節數組；
- 將 [8-byte security key] 和在第 3，第 4 步裏生成的網絡字節數組合併成一個 16 字節的數組；
- 對第 5 步生成的字節數組使用 MD5 算法生成一個哈希值，這個哈希值就作爲安全密鑰返回給客戶端，以表明服務器端獲取了客戶端的請求，同意創建 WebSocket 連接
清單 4. 生成網絡字節數組的代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
private byte[] BuildServerPartialKey(string clientKey) { string partialServerKey = ""; byte[] currentKey; int spacesNum = 0; char[] keyChars = clientKey.ToCharArray(); foreach (char currentChar in keyChars) { if (char.IsDigit(currentChar)) partialServerKey += currentChar; if (char.IsWhiteSpace(currentChar)) spacesNum++; } try { currentKey = BitConverter.GetBytes((int)(Int64.Parse(partialServerKey) / spacesNum)); if (BitConverter.IsLittleEndian) Array.Reverse(currentKey); } catch { if (currentKey!= null) Array.Clear(currentKey, 0, currentKey.Length); } return currentKey; } |
清單 5. 生成 16 位安全密鑰的代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
private byte[] BuildCompleteServerKey(byte[] serverKey1, byte[] serverKey2, byte[] last8Bytes) { byte[] concatenatedKeys = new byte[16]; Array.Copy(serverKey1, 0, concatenatedKeys, 0, 4); Array.Copy(serverKey2, 0, concatenatedKeys, 4, 4); Array.Copy(last8Bytes, 0, concatenatedKeys, 8, 8); System.Security.Cryptography.MD5 MD5Service = System.Security.Cryptography.MD5.Create(); return MD5Service.ComputeHash(concatenatedKeys); } |
服務器剛啓動時的畫面如下：
圖 3. WebSocket 服務器剛啓動的畫面
客戶端可以依據這個信息填寫聊天服務器的連接地址，當有客戶端連接到聊天服務器上時，服務器會打印出客戶端和服務器的握手信息，每個客戶的聊天信息也會顯示在服務器的界面上，運行中的聊天服務器的界面如下：
圖 4. 有客戶端連接到 WebSocket 服務器的
以上我們簡單描述了實現一個 WebSocket 服務器的最基本的要素，下一節我們會描述客戶端的實現。
客戶端實現
客 戶端的實現相對於服務器端的實現來說要簡單得多了，我們只需要發揮想象去設計 HTML 用戶界面，然後呼叫 WebSocket JavaScript 接口來和 WebSocket 服務器端來交互就可以了。當然別忘了使用一個支持 HTML5 和 WebSocket 的瀏覽器，在筆者寫這篇文章的時候使用的瀏覽器是 Firefox。客戶端的頁面結構是非常簡潔的，初始運行界面如下：
圖 5. 聊天室客戶端初始頁面
當 頁面初次加載的時候，首先會檢測當前的瀏覽器是否支持 WebSocket 並給出相應的提示信息。用戶按下連接按鈕時，頁面會初始化一個到聊天服務器的 WebSocekt 連接，初始化成功以後，頁面會加載對應的 WebSocket 事件處理函數，客戶端 JavaScript 代碼如下所示：
清單 6. 初始化客戶端 WebSocket 對象的代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
function ToggleConnectionClicked() { if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) { ws.close(); } else { Log("準備連接到聊天服務器 ..."); try { ws = new WebSocket("ws://" + document.getElementById("Connection").value); SocketCreated = true; } catch (ex) { Log(ex, "ERROR"); return; } document.getElementById("ToggleConnection").innerHTML = "斷開"; ws.onopen = WSonOpen; ws.onmessage = WSonMessage; ws.onclose = WSonClose; ws.onerror = WSonError; } }; function WSonOpen() { Log("連接已經建立。", "OK"); $("#SendDataContainer").show("slow"); }; function WSonMessage(event) { Log(event.data); }; function WSonClose() { Log("連接關閉。", "ERROR"); document.getElementById("ToggleConnection").innerHTML = "連接"; $("#SendDataContainer").hide("slow"); }; function WSonError() { Log("WebSocket錯誤。", "ERROR"); }; |
|
1
2
3
4
5
6
7
8
|
function SendDataClicked() { if (document.getElementById("DataToSend").value != "") { ws.send(document.getElementById("txtName").value + "說 :"" + document.getElementById("DataToSend").value + """); document.getElementById("DataToSend").value = ""; } }; |
圖 6. 聊天客戶端運行頁面
至 此我們已經完成了一個完整的 WebSocket 客戶端實現，用戶可以體驗一下這個聊天室的簡單和快捷，完全不用考慮頁面的刷新和繁瑣的 Ajax 調用，享受桌面程序的用戶體驗。WebSocket 的強大和易用可見一斑，您完全可以在這個基礎上加入更多的功能，設計更加漂亮的用戶界面，切身體驗 WebSocket 的震撼力。完整的客戶端代碼請參閱附件提供的源代碼。
WebSocket 的侷限性
WebSocket 的優點已經列舉得很多了，但是作爲一個正在演變中的 Web 規範，我們也要看到目前用 Websocket 構建應用程序的一些風險。首先，WebSocket 規範目前還處於草案階段，也就是它的規範和 API 還是有變動的可能，另外的一個風險就是微軟的 IE 作爲佔市場份額最大的瀏覽器，和其他的主流瀏覽器相比，對 HTML5 的支持是比較差的，這是我們在構建企業級的 Web 應用的時候必須要考慮的一個問題。
總結
本文介紹了 HTML5 WebSocket 的橫空出世以及它嘗試解決的的問題，然後介紹了 WebSocket 規範和 WebSocket 接口，以及和傳統的實時技術相比在性能上的優勢，並且演示了怎樣使用 WebSocket 構建一個實時的 Web 應用，最後我們介紹了當前的主流瀏覽器對 HTML5 的支持情況和 WebSocket 的侷限性。不過，我們應該看到，儘管 HTML5 WebSocket 目前還有一些侷限性，但是已經是大勢所趨，微軟也明確表達了未來對 HTML5 的支持，而且這些支持我們可以在 Windows 8 和 IE10 裏看到，我們也在各種移動設備，平板電腦上看到了 HTML5 和 WebSocket 的身影。WebSocket 將會成爲未來開發實時 Web 應用的生力軍應該是毫無懸念的了，作爲 Web 開發人員，關注 HTML5，關注 WebSocket 也應該提上日程了，否則我們在新一輪的軟件革新的浪潮中只能做壁上觀了。