在 IBM Bluemix 云平臺上開發(fā)并部署您的下一個應(yīng)用。
開始您的試用
作為下一代的 Web 標(biāo)準(zhǔn)，HTML5 擁有許多引人注目的新特性，如 Canvas、本地存儲、多媒體編程接口、WebSocket 等等。這其中有“Web 的 TCP ”之稱的 WebSocket 格外吸引開發(fā)人員的注意。WebSocket 的出現(xiàn)使得瀏覽器提供對 Socket 的支持成為可能，從而在瀏覽器和服務(wù)器之間提供了一個基于 TCP 連接的雙向通道。Web 開發(fā)人員可以非常方便地使用 WebSocket 構(gòu)建實時 web 應(yīng)用，開發(fā)人員的手中從此又多了一柄神兵利器。本文首先介紹 HTML5 WebSocket 的基本概念以及這個規(guī)范試圖解決的問題，然后介紹 WebSocket 的基本原理和編程接口。接下來會通過一個簡單案例來示范怎樣實現(xiàn)一個 WebSocket 應(yīng)用，并且展示 WebSocket 如何在功能強(qiáng)大和編程簡單易用上達(dá)到的完美統(tǒng)一。最后介紹了目前主流瀏覽器對 WebSocket 支持的狀況、局限性以及未來的展望。
實時 Web 應(yīng)用的窘境
Web 應(yīng)用的信息交互過程通常是客戶端通過瀏覽器發(fā)出一個請求，服務(wù)器端接收和審核完請求后進(jìn)行處理并返回結(jié)果給客戶端，然后客戶端瀏覽器將信息呈現(xiàn)出來，這種機(jī)制對于信息變化不是特別頻繁的應(yīng)用尚能相安無事，但是對于那些實時要求比較高的應(yīng)用來說，比如說在線游戲、在線證券、設(shè)備監(jiān)控、新聞在線播報、RSS 訂閱推送等等，當(dāng)客戶端瀏覽器準(zhǔn)備呈現(xiàn)這些信息的時候，這些信息在服務(wù)器端可能已經(jīng)過時了。所以保持客戶端和服務(wù)器端的信息同步是實時 Web 應(yīng)用的關(guān)鍵要素，對 Web 開發(fā)人員來說也是一個難題。在 WebSocket 規(guī)范出來之前，開發(fā)人員想實現(xiàn)這些實時的 Web 應(yīng)用，不得不采用一些折衷的方案，其中最常用的就是輪詢 (Polling) 和 Comet 技術(shù)，而 Comet 技術(shù)實際上是輪詢技術(shù)的改進(jìn)，又可細(xì)分為兩種實現(xiàn)方式，一種是長輪詢機(jī)制，一種稱為流技術(shù)。下面我們簡單介紹一下這幾種技術(shù)：
輪詢：
這是最早的一種實現(xiàn)實時 Web 應(yīng)用的方案。客戶端以一定的時間間隔向服務(wù)端發(fā)出請求，以頻繁請求的方式來保持客戶端和服務(wù)器端的同步。這種同步方案的最大問題是，當(dāng)客戶端以固定頻率向服務(wù)器發(fā)起請求的時候，服務(wù)器端的數(shù)據(jù)可能并沒有更新，這樣會帶來很多無謂的網(wǎng)絡(luò)傳輸，所以這是一種非常低效的實時方案。
長輪詢：
長輪詢是對定時輪詢的改進(jìn)和提高，目地是為了降低無效的網(wǎng)絡(luò)傳輸。當(dāng)服務(wù)器端沒有數(shù)據(jù)更新的時候，連接會保持一段時間周期直到數(shù)據(jù)或狀態(tài)改變或者時間過期，通過這種機(jī)制來減少無效的客戶端和服務(wù)器間的交互。當(dāng)然，如果服務(wù)端的數(shù)據(jù)變更非常頻繁的話，這種機(jī)制和定時輪詢比較起來沒有本質(zhì)上的性能的提高。
流：
流技術(shù)方案通常就是在客戶端的頁面使用一個隱藏的窗口向服務(wù)端發(fā)出一個長連接的請求。服務(wù)器端接到這個請求后作出回應(yīng)并不斷更新連接狀態(tài)以保證客戶端和服務(wù)器端的連接不過期。通過這種機(jī)制可以將服務(wù)器端的信息源源不斷地推向客戶端。這種機(jī)制在用戶體驗上有一點問題，需要針對不同的瀏覽器設(shè)計不同的方案來改進(jìn)用戶體驗，同時這種機(jī)制在并發(fā)比較大的情況下，對服務(wù)器端的資源是一個極大的考驗。
綜合這幾種方案，您會發(fā)現(xiàn)這些目前我們所使用的所謂的實時技術(shù)并不是真正的實時技術(shù)，它們只是在用 Ajax 方式來模擬實時的效果，在每次客戶端和服務(wù)器端交互的時候都是一次 HTTP 的請求和應(yīng)答的過程，而每一次的 HTTP 請求和應(yīng)答都帶有完整的 HTTP 頭信息，這就增加了每次傳輸?shù)臄?shù)據(jù)量，而且這些方案中客戶端和服務(wù)器端的編程實現(xiàn)都比較復(fù)雜，在實際的應(yīng)用中，為了模擬比較真實的實時效果，開發(fā)人員往往需要構(gòu)造兩個 HTTP 連接來模擬客戶端和服務(wù)器之間的雙向通訊，一個連接用來處理客戶端到服務(wù)器端的數(shù)據(jù)傳輸，一個連接用來處理服務(wù)器端到客戶端的數(shù)據(jù)傳輸，這不可避免地增加了編程實現(xiàn)的復(fù)雜度，也增加了服務(wù)器端的負(fù)載，制約了應(yīng)用系統(tǒng)的擴(kuò)展性。
回頁首
WebSocket 的拯救
HTML5 WebSocket 設(shè)計出來的目的就是要取代輪詢和 Comet 技術(shù)，使客戶端瀏覽器具備像 C/S 架構(gòu)下桌面系統(tǒng)的實時通訊能力。 瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。因為 WebSocket 連接本質(zhì)上就是一個 TCP 連接，所以在數(shù)據(jù)傳輸?shù)姆€(wěn)定性和數(shù)據(jù)傳輸量的大小方面，和輪詢以及 Comet 技術(shù)比較，具有很大的性能優(yōu)勢。Websocket.org 網(wǎng)站對傳統(tǒng)的輪詢方式和 WebSocket 調(diào)用方式作了一個詳細(xì)的測試和比較，將一個簡單的 Web 應(yīng)用分別用輪詢方式和 WebSocket 方式來實現(xiàn)，在這里引用一下他們的測試結(jié)果圖：
圖 1. 輪詢和 WebSocket 實現(xiàn)方式的網(wǎng)絡(luò)負(fù)載對比圖
通過這張圖可以清楚的看出，在流量和負(fù)載增大的情況下，WebSocket 方案相比傳統(tǒng)的 Ajax 輪詢方案有極大的性能優(yōu)勢。這也是為什么我們認(rèn)為 WebSocket 是未來實時 Web 應(yīng)用的首選方案的原因。
回頁首
WebSocket 規(guī)范
WebSocket 協(xié)議本質(zhì)上是一個基于 TCP 的協(xié)議。為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協(xié)議升級的 HTTP 請求，服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動的關(guān)閉連接。
下面我們來詳細(xì)介紹一下 WebSocket 規(guī)范，由于這個規(guī)范目前還是處于草案階段，版本的變化比較快，我們選擇 draft-hixie-thewebsocketprotocol-76版本來描述 WebSocket 協(xié)議。因為這個版本目前在一些主流的瀏覽器上比如 Chrome,、FireFox、Opera 上都得到比較好的支持，您如果參照的是新一些的版本話，內(nèi)容可能會略有差別。
一個典型的 WebSocket 發(fā)起請求和得到響應(yīng)的例子看起來如下：
清單 1. WebSocket 握手協(xié)議
客戶端到服務(wù)端： 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] 服務(wù)端到客戶端： 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]
這些請求和通常的 HTTP 請求很相似，但是其中有些內(nèi)容是和 WebSocket 協(xié)議密切相關(guān)的。我們需要簡單介紹一下這些請求和應(yīng)答信息，”Upgrade:WebSocket”表示這是一個特殊的 HTTP 請求，請求的目的就是要將客戶端和服務(wù)器端的通訊協(xié)議從 HTTP 協(xié)議升級到 WebSocket 協(xié)議。從客戶端到服務(wù)器端請求的信息里包含有”Sec-WebSocket-Key1”、“Sec-WebSocket-Key2”和”[8-byte securitykey]”這樣的頭信息。這是客戶端瀏覽器需要向服務(wù)器端提供的握手信息，服務(wù)器端解析這些頭信息，并在握手的過程中依據(jù)這些信息生成一個 16 位的安全密鑰并返回給客戶端，以表明服務(wù)器端獲取了客戶端的請求，同意創(chuàng)建 WebSocket 連接。一旦連接建立，客戶端和服務(wù)器端就可以通過這個通道雙向傳輸數(shù)據(jù)了。
在實際的開發(fā)過程中，為了使用 WebSocket 接口構(gòu)建 Web 應(yīng)用，我們首先需要構(gòu)建一個實現(xiàn)了 WebSocket 規(guī)范的服務(wù)器，服務(wù)器端的實現(xiàn)不受平臺和開發(fā)語言的限制，只需要遵從 WebSocket 規(guī)范即可，目前已經(jīng)出現(xiàn)了一些比較成熟的 WebSocket 服務(wù)器端實現(xiàn)，比如：
- Kaazing WebSocket Gateway — 一個 Java 實現(xiàn)的 WebSocket Server
- mod_pywebsocket — 一個 Python 實現(xiàn)的 WebSocket Server
- Netty —一個 Java 實現(xiàn)的網(wǎng)絡(luò)框架其中包括了對 WebSocket 的支持
- node.js —一個 Server 端的 JavaScript 框架提供了對 WebSocket 的支持
如果以上的 WebSocket 服務(wù)端實現(xiàn)還不能滿足您的業(yè)務(wù)需求的話，開發(fā)人員完全可以根據(jù) WebSocket 規(guī)范自己實現(xiàn)一個服務(wù)器。在“WebSocket 實戰(zhàn)”這一節(jié)，我們將使用 Microsoft .NET 平臺上的 C# 語言來打造一個簡單的 WebSocket 服務(wù)器，繼而構(gòu)建一個簡單的實時聊天系統(tǒng)。
回頁首
WebSocket JavaScript 接口
上一節(jié)介紹了 WebSocket 規(guī)范，其中主要介紹了 WebSocket 的握手協(xié)議。握手協(xié)議通常是我們在構(gòu)建 WebSocket 服務(wù)器端的實現(xiàn)和提供瀏覽器的 WebSocket 支持時需要考慮的問題，而針對 Web 開發(fā)人員的 WebSocket JavaScript 客戶端接口是非常簡單的，以下是 WebSocket JavaScript 接口的定義：
清單 2. WebSocket JavaScript 定義
[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;其中 URL 屬性代表 WebSocket 服務(wù)器的網(wǎng)絡(luò)地址，協(xié)議通常是”ws”,send 方法就是發(fā)送數(shù)據(jù)到服務(wù)器端，close 方法就是關(guān)閉連接。除了這些方法，還有一些很重要的事件：onopen，onmessage，onerror 以及 onclose。我們借用 Nettuts 網(wǎng)站上的一張圖來形象的展示一下 WebSocket 接口：
圖 2. WebSocket JavaScript 接口
下面是一段簡單的 JavaScript 代碼展示了怎樣建立 WebSocket 連接和獲取數(shù)據(jù)：
清單 3. 建立 WebSocket 連接的實例 JavaScript 代碼
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 的支持情況：
| 瀏覽器 | 支持情況 |
|---|
| Chrome | Supported in version 4+ |
| Firefox | Supported in version 4+ |
| Internet Explorer | Supported in version 10+ |
| Opera | Supported in version 10+ |
| Safari | Supported in version 5+ |
回頁首
WebSocket 實戰(zhàn)
這一節(jié)里我們用一個案例來演示怎么使用 WebSocket 構(gòu)建一個實時的 Web 應(yīng)用。這是一個簡單的實時多人聊天系統(tǒng)，包括客戶端和服務(wù)端的實現(xiàn)。客戶端通過瀏覽器向聊天服務(wù)器發(fā)起請求，服務(wù)器端解析客戶端發(fā)出的握手請求并產(chǎn)生應(yīng)答信息返回給客戶端，從而在客戶端和服務(wù)器之間建立連接通道。服務(wù)器支持廣播功能，每個聊天用戶發(fā)送的信息會實時的發(fā)送給所有的用戶，當(dāng)用戶退出聊天室時，服務(wù)器端需要清理相應(yīng)用戶的連接信息，避免資源的泄漏。以下我們分別從服務(wù)器端和客戶端來演示這個 Web 聊天系統(tǒng)的實現(xiàn)，在實現(xiàn)方式上我們采用了 C# 語言來實現(xiàn) WebSocket 服務(wù)器，而客戶端是一個運行在瀏覽器里的 HTML 文件。
WebSocket 服務(wù)器端實現(xiàn)
這個聊天服務(wù)器的實現(xiàn)和基于套接字的網(wǎng)絡(luò)應(yīng)用程序非常類似，首先是服務(wù)器端要啟動一個套接字監(jiān)聽來自客戶端的連接請求，關(guān)鍵的區(qū)別在于 WebSocket 服務(wù)器需要解析客戶端的 WebSocket 握手信息，并根據(jù) WebSocket 規(guī)范的要求產(chǎn)生相應(yīng)的應(yīng)答信息。一旦 WebSocket 連接通道建立以后，客戶端和服務(wù)器端的交互就和普通的套接字網(wǎng)絡(luò)應(yīng)用程序是一樣的了。所以在下面的關(guān)于 WebSocket 服務(wù)器端實現(xiàn)的描述中，我們主要闡述 WebSocket 服務(wù)器怎樣處理 WebSocket 握手信息，至于 WebSocket 監(jiān)聽端口的建立，套接字信息流的讀取和寫入，都是一些常用的套接字編程的方式，我們就不多做解釋了，您可以自行參閱本文的附件源代碼文件。
在描述 WebSocket 規(guī)范時提到，一個典型的 WebSocket Upgrade 信息如下所示：
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，Sec-WebSocket-Key2 和 [8-byte security key] 這幾個頭信息是 WebSocket 服務(wù)器用來生成應(yīng)答信息的來源，依據(jù)draft-hixie-thewebsocketprotocol-76 草案的定義，WebSocket 服務(wù)器基于以下的算法來產(chǎn)生正確的應(yīng)答信息：
- 逐個字符讀取 Sec-WebSocket-Key1 頭信息中的值，將數(shù)值型字符連接到一起放到一個臨時字符串里，同時統(tǒng)計所有空格的數(shù)量；
- 將在第 1 步里生成的數(shù)字字符串轉(zhuǎn)換成一個整型數(shù)字，然后除以第 1 步里統(tǒng)計出來的空格數(shù)量，將得到的浮點數(shù)轉(zhuǎn)換成整數(shù)型；
- 將第 2 步里生成的整型值轉(zhuǎn)換為符合網(wǎng)絡(luò)傳輸?shù)木W(wǎng)絡(luò)字節(jié)數(shù)組；
- 對 Sec-WebSocket-Key2 頭信息同樣進(jìn)行第 1 到第 3 步的操作，得到另外一個網(wǎng)絡(luò)字節(jié)數(shù)組；
- 將 [8-byte security key] 和在第 3，第 4 步里生成的網(wǎng)絡(luò)字節(jié)數(shù)組合并成一個 16 字節(jié)的數(shù)組；
- 對第 5 步生成的字節(jié)數(shù)組使用 MD5 算法生成一個哈希值，這個哈希值就作為安全密鑰返回給客戶端，以表明服務(wù)器端獲取了客戶端的請求，同意創(chuàng)建 WebSocket 連接
至此，客戶端和服務(wù)器的 WebSocket 握手就完成了，WebSocket 通道也建立起來了。下面首先介紹一下服務(wù)器端實現(xiàn)是如何根據(jù)用戶傳遞的握手信息來生成網(wǎng)絡(luò)字節(jié)數(shù)組的。.NET 平臺提供了很方便的對字符串，數(shù)值以及數(shù)組操作的函數(shù)，所以生成字節(jié)數(shù)組的方法還是非常簡單明了的，代碼如下：
清單 4. 生成網(wǎng)絡(luò)字節(jié)數(shù)組的代碼
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; }得到網(wǎng)絡(luò)字節(jié)數(shù)組以后，服務(wù)器端生成 16 位安全密鑰的方法如下所示：
清單 5. 生成 16 位安全密鑰的代碼
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); }整個實現(xiàn)是非常簡單明了的，就是將生成的網(wǎng)絡(luò)字節(jié)數(shù)組和客戶端提交的頭信息里的 [8-byte security key] 合并成一個 16 位字節(jié)數(shù)組并用 MD5 算法加密，然后將生成的安全密鑰作為應(yīng)答信息返回給客戶端，雙方的 WebSocekt 連接通道就建立起來了。實現(xiàn)了 WebSocket 握手信息的處理邏輯，一個具有基本功能的 WebSocket 服務(wù)器就完成了。整個 WebSocket 服務(wù)器由兩個核心類構(gòu)成，一個是 WebSocketServer，另外一個是 SocketConnection，出于篇幅的考慮，我們不介紹每個類的屬性和方法了，文章的附件會給出詳細(xì)的源代碼，有興趣的讀者可以參考。
服務(wù)器剛啟動時的畫面如下：
圖 3. WebSocket 服務(wù)器剛啟動的畫面
客戶端可以依據(jù)這個信息填寫聊天服務(wù)器的連接地址，當(dāng)有客戶端連接到聊天服務(wù)器上時，服務(wù)器會打印出客戶端和服務(wù)器的握手信息，每個客戶的聊天信息也會顯示在服務(wù)器的界面上，運行中的聊天服務(wù)器的界面如下：
圖 4. 有客戶端連接到 WebSocket 服務(wù)器的
以上我們簡單描述了實現(xiàn)一個 WebSocket 服務(wù)器的最基本的要素，下一節(jié)我們會描述客戶端的實現(xiàn)。
客戶端實現(xiàn)
客戶端的實現(xiàn)相對于服務(wù)器端的實現(xiàn)來說要簡單得多了，我們只需要發(fā)揮想象去設(shè)計 HTML 用戶界面，然后呼叫 WebSocket JavaScript 接口來和 WebSocket 服務(wù)器端來交互就可以了。當(dāng)然別忘了使用一個支持 HTML5 和 WebSocket 的瀏覽器，在筆者寫這篇文章的時候使用的瀏覽器是 Firefox。客戶端的頁面結(jié)構(gòu)是非常簡潔的，初始運行界面如下：
圖 5. 聊天室客戶端初始頁面
當(dāng)頁面初次加載的時候，首先會檢測當(dāng)前的瀏覽器是否支持 WebSocket 并給出相應(yīng)的提示信息。用戶按下連接按鈕時，頁面會初始化一個到聊天服務(wù)器的 WebSocekt 連接，初始化成功以后，頁面會加載對應(yīng)的 WebSocket 事件處理函數(shù)，客戶端 JavaScript 代碼如下所示：
清單 6. 初始化客戶端 WebSocket 對象的代碼
function ToggleConnectionClicked() { if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) { ws.close(); } else { Log("準(zhǔn)備連接到聊天服務(wù)器 ..."); 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("連接已經(jīng)建立。", "OK"); $("#SendDataContainer").show("slow"); }; function WSonMessage(event) { Log(event.data); }; function WSonClose() { Log("連接關(guān)閉。", "ERROR"); document.getElementById("ToggleConnection").innerHTML = "連接"; $("#SendDataContainer").hide("slow"); }; function WSonError() { Log("WebSocket錯誤。", "ERROR"); };當(dāng)用戶按下發(fā)送按鈕，客戶端會調(diào)用WebSocket對象向服務(wù)器發(fā)送信息，并且這個消息會廣播給所有的用戶，實現(xiàn)代碼如下所示：
function SendDataClicked() { if (document.getElementById("DataToSend").value != "") { ws.send(document.getElementById("txtName").value + "說 :\"" + document.getElementById("DataToSend").value + "\""); document.getElementById("DataToSend").value = ""; } };如果有多個用戶登錄到聊天服務(wù)器，客戶端頁面的運行效果如下所示：
圖 6. 聊天客戶端運行頁面
至此我們已經(jīng)完成了一個完整的 WebSocket 客戶端實現(xiàn)，用戶可以體驗一下這個聊天室的簡單和快捷，完全不用考慮頁面的刷新和繁瑣的 Ajax 調(diào)用，享受桌面程序的用戶體驗。WebSocket 的強(qiáng)大和易用可見一斑，您完全可以在這個基礎(chǔ)上加入更多的功能，設(shè)計更加漂亮的用戶界面，切身體驗 WebSocket 的震撼力。完整的客戶端代碼請參閱附件提供的源代碼。
回頁首
WebSocket 的局限性
WebSocket 的優(yōu)點已經(jīng)列舉得很多了，但是作為一個正在演變中的 Web 規(guī)范，我們也要看到目前用 Websocket 構(gòu)建應(yīng)用程序的一些風(fēng)險。首先，WebSocket 規(guī)范目前還處于草案階段，也就是它的規(guī)范和 API 還是有變動的可能，另外的一個風(fēng)險就是微軟的 IE 作為占市場份額最大的瀏覽器，和其他的主流瀏覽器相比，對 HTML5 的支持是比較差的，這是我們在構(gòu)建企業(yè)級的 Web 應(yīng)用的時候必須要考慮的一個問題。
回頁首
總結(jié)
本文介紹了 HTML5 WebSocket 的橫空出世以及它嘗試解決的的問題，然后介紹了 WebSocket 規(guī)范和 WebSocket 接口，以及和傳統(tǒng)的實時技術(shù)相比在性能上的優(yōu)勢，并且演示了怎樣使用 WebSocket 構(gòu)建一個實時的 Web 應(yīng)用，最后我們介紹了當(dāng)前的主流瀏覽器對 HTML5 的支持情況和 WebSocket 的局限性。不過，我們應(yīng)該看到，盡管 HTML5 WebSocket 目前還有一些局限性，但是已經(jīng)是大勢所趨，微軟也明確表達(dá)了未來對 HTML5 的支持，而且這些支持我們可以在 Windows 8 和 IE10 里看到，我們也在各種移動設(shè)備，平板電腦上看到了 HTML5 和 WebSocket 的身影。WebSocket 將會成為未來開發(fā)實時 Web 應(yīng)用的生力軍應(yīng)該是毫無懸念的了，作為 Web 開發(fā)人員，關(guān)注 HTML5，關(guān)注 WebSocket 也應(yīng)該提上日程了，否則我們在新一輪的軟件革新的浪潮中只能做壁上觀了。
回頁首
下載