HTML5 WebSocket技術(shù)研究

【摘要】本文在比較傳統(tǒng)的實(shí)時(shí)web通訊技術(shù)與研究HTML5 WebSocket技術(shù)基礎(chǔ)上，通過研究WebSocket技術(shù)在實(shí)時(shí)WEB通訊中的應(yīng)用，體現(xiàn)出WebSocket在B/S模式中的應(yīng)用優(yōu)勢與價(jià)值。

【關(guān)鍵詞】HTML5；WebSocket；握手；長輪詢；實(shí)時(shí)Web；網(wǎng)絡(luò)應(yīng)用服務(wù)

1.前言

作為下一代的Web標(biāo)準(zhǔn)，HTML5擁有許多引人注目的新特性，如Canvas、本地存儲(chǔ)、多媒體編程接口、WebSocket等，有兩大特點(diǎn)：首先，強(qiáng)化Web網(wǎng)頁的表現(xiàn)性能。其次，追加本地?cái)?shù)據(jù)庫等Web應(yīng)用的功能。包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。而有“Web的TCP”支撐的WebSocket在打破了現(xiàn)有的WEB網(wǎng)絡(luò)通訊編程模式，WebSocket使得瀏覽器提供對Socket的支持成為可能，在瀏覽器和服務(wù)器之間提供了一個(gè)基于TCP連接的雙向通道，使得開發(fā)人員可以方便構(gòu)建實(shí)時(shí)Web應(yīng)用。

2.傳統(tǒng)實(shí)時(shí)WEB的通訊技術(shù)

傳統(tǒng)的Web應(yīng)用的信息交互過程是客戶端通過瀏覽器發(fā)出一個(gè)請求（Request），服務(wù)器端接收和審核完請求后進(jìn)行處理（Response）并返回結(jié)果給客戶端，然后客戶端瀏覽器將信息呈現(xiàn)出來，這種機(jī)制對于信息變化不是特別頻繁的應(yīng)用尚能相安無事，但對于那些實(shí)時(shí)要求比較高的應(yīng)用來說，當(dāng)客戶端瀏覽器準(zhǔn)備呈現(xiàn)服務(wù)器返回的數(shù)據(jù)信息時(shí)，信息有可能已經(jīng)過時(shí)了。保持客戶端和服務(wù)器端的信息同步是實(shí)時(shí)Web應(yīng)用的關(guān)鍵要素。在WebSocket規(guī)范出來之前，開發(fā)人員想實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用，只能采用如輪詢（Polling）或Comet技術(shù)方案，而Comet則是輪詢技術(shù)的改進(jìn)，長輪詢機(jī)制與流技術(shù)。

輪詢：客戶端以一定的時(shí)間間隔向服務(wù)端發(fā)出請求，以頻繁請求的方式來保持客戶端和服務(wù)器端的同步。問題在于：當(dāng)客戶端以固定頻率向服務(wù)器發(fā)起請求的時(shí)候，服務(wù)器端的數(shù)據(jù)可能并沒有更新，造成無謂的網(wǎng)絡(luò)傳輸，屬于低效的實(shí)時(shí)方案。

長輪詢：長輪詢是對定時(shí)輪詢的改進(jìn)和提高，目地是降低無效的網(wǎng)絡(luò)傳輸。當(dāng)服務(wù)器端沒有數(shù)據(jù)更新時(shí)，連接會(huì)保持一段時(shí)間周期直到數(shù)據(jù)或狀態(tài)改變或者時(shí)間過期，通過這種機(jī)制來減少無效的客戶端和服務(wù)器間的交互。當(dāng)服務(wù)端數(shù)據(jù)變更非常頻繁時(shí)，就和定時(shí)輪詢沒有本質(zhì)上性能提高。

流：通常在客戶端的頁面使用一個(gè)隱藏的窗口向服務(wù)端發(fā)出一個(gè)長連接的請求。服務(wù)器端接到這個(gè)請求后作出回應(yīng)并不斷更新連接狀態(tài)以保證客戶端和服務(wù)器端的連接不過期。將服務(wù)器端的信息不斷推向客戶端。但需要針對不同的瀏覽器設(shè)計(jì)不同的方案來改進(jìn)用戶體驗(yàn)，同時(shí)在并發(fā)比較大的情況下，對服務(wù)器端的資源是一個(gè)極大的考驗(yàn)。

以上方案只是利用Ajax方式來模擬實(shí)時(shí)的效果，每次交互都是HTTP的請求和應(yīng)答的過程，每次都帶有一套完整的HTTP頭信息，增加了傳輸?shù)臄?shù)據(jù)量，在實(shí)際的應(yīng)用中，為了模擬真實(shí)的實(shí)時(shí)效果，需要構(gòu)造兩個(gè)HTTP連接來模擬客戶端和服務(wù)器之間的雙向通訊，一個(gè)連接用來處理客戶端到服務(wù)器端的數(shù)據(jù)傳輸，一個(gè)連接用來處理服務(wù)器端到客戶端的數(shù)據(jù)傳輸，增加編程實(shí)現(xiàn)的復(fù)雜度，同時(shí)增加了服務(wù)器端的負(fù)載，制約了應(yīng)用系統(tǒng)的擴(kuò)展性。

3.HTML 5 WebSocket概念及規(guī)范

WebSocket API是下一代客戶端-服務(wù)器的異步通信方法。取代了單個(gè)的TCP套接字，使用ws或wss協(xié)議，在任意的客戶端和服務(wù)器程序通訊。WebSocket目前由W3C進(jìn)行標(biāo)準(zhǔn)化，已經(jīng)受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等瀏覽器的支持，在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息。

HTML5 Web Sockets從一個(gè)Web客戶端連接到一個(gè)遠(yuǎn)程端點(diǎn)，需要?jiǎng)?chuàng)建WebSocket實(shí)例并為之提供一個(gè)URL來表示想要連接到的遠(yuǎn)程端點(diǎn)。該規(guī)范定義了ws：//以及wss：//模式來分別表示W(wǎng)ebSocket和安全WebSocket連接。一個(gè)WebSocket連接是在客戶端與服務(wù)器之間HTTP協(xié)議的初始握手階段將其升級(jí)到Web Socket協(xié)議來建立的，其底層仍是TCP/IP連接。

圖1 WebSocket URL地址結(jié)構(gòu)圖

其中：

WS：表示HTML5 WEB Sockets協(xié)議；

Host：表示服務(wù)器的地址；

Port：表示待鏈接的端口；

WebSocket Server：表示Server請求資源地址。

Web Sockets使用HTTP Upgrade機(jī)制升級(jí)到Web Socket協(xié)議，同時(shí)兼容HTTP的握手機(jī)制，因此HTTP服務(wù)器可以與WebSocket服務(wù)器共享默認(rèn)的HTTP與HTTPS端（80和443）。要建立一個(gè)WebSocket連接，客戶端和服務(wù)器在初次握手的時(shí)候從HTTP協(xié)議提升到Web Socket協(xié)議?？蛻舳藶g覽器首先要向服務(wù)器發(fā)起一個(gè)HTTP請求，這個(gè)請求和通常的HTTP請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade：WebSocket”，表明是一個(gè)申請協(xié)議升級(jí)的HTTP請求，服務(wù)器端解析附加的頭信息，產(chǎn)生應(yīng)答信息返回給客戶端，由此客戶端和服務(wù)器端的WebSocket建立成功，然后通過鏈接通道自由傳遞信息，并且持續(xù)到客戶端或者服務(wù)器端的單方主動(dòng)關(guān)閉連接。連接建立后，WebSocket數(shù)據(jù)幀以全雙工的模式在客戶端和服務(wù)器之間來回傳輸。

典型WebSocket請求與響應(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]

其中Sec-WebSocket-Key1，Sec-WebSocket-Key2和[8-byte security key]這幾個(gè)頭信息是WebSocket服務(wù)器用來生成應(yīng)答信息的來源，服務(wù)器基于以下的算法來產(chǎn)生正確的應(yīng)答信息：

a）逐個(gè)字符讀取Sec-WebSocket-Key1頭信息中的值，將數(shù)值型字符連接到一起放到一個(gè)臨時(shí)字符串里，同時(shí)統(tǒng)計(jì)所有空格的數(shù)量；

b）將在第1步里生成的數(shù)字字符串轉(zhuǎn)換成一個(gè)整型數(shù)字，然后除以第1步里統(tǒng)計(jì)出來的空格數(shù)量，將得到的浮點(diǎn)數(shù)轉(zhuǎn)換成整數(shù)型；

c）將第2步里生成的整型值轉(zhuǎn)換為符合網(wǎng)絡(luò)傳輸?shù)木W(wǎng)絡(luò)字節(jié)數(shù)組；

d）對Sec-WebSocket-Key2頭信息同樣進(jìn)行第1到第3步的操作，得到另外一個(gè)網(wǎng)絡(luò)字節(jié)數(shù)組；

e）將[8-byte security key]和在第3，第4步里生成的網(wǎng)絡(luò)字節(jié)數(shù)組合并成一個(gè)16字節(jié)的數(shù)組；

f）對第5步生成的字節(jié)數(shù)組使用MD5算法生成一個(gè)哈希值，這個(gè)哈希值就作為安全密鑰返回給客戶端，以表明服務(wù)器端獲取了客戶端的請求，同意創(chuàng)建WebSocket連接。

服務(wù)端將生成的網(wǎng)絡(luò)字節(jié)數(shù)組和客戶端提交的頭信息里的[8-byte security key]合并成一個(gè)16位字節(jié)數(shù)組并用MD5算法加密，然后將生成的安全密鑰作為應(yīng)答信息返回給客戶端，由此建立雙方的WebSocekt連接通道，實(shí)現(xiàn)WebSocket握手信息的處理邏輯。WebSocket服務(wù)器由兩個(gè)核心類構(gòu)成，一個(gè)是WebSocketServer，另外一個(gè)是SocketConnection。

實(shí)際的開發(fā)過程中，為構(gòu)建Web應(yīng)用，首先需要構(gòu)建WebSocket規(guī)范的服務(wù)器，服務(wù)器端的實(shí)現(xiàn)不受平臺(tái)和開發(fā)語言的限制，只需要遵從WebSocket規(guī)范即可。

如果使用的是一個(gè)未加密的WebSocket連接（ws：//），在透明的代理服務(wù)器情況下，瀏覽器是不知道代理服務(wù)器的，所以不會(huì)發(fā)送HTTP CONNECT方法。如使用的是加密的WebSocket安全連接（wss：//），那么在透明代理服務(wù)器下，瀏覽器不知道代理服務(wù)器，所以不會(huì)發(fā)出HTTPCONNECT方法。然而，因?yàn)榫€上信息是加密的，中間透明代理服務(wù)器會(huì)簡單的讓加密信息通過，因此就增加了使用加密的WebSocket連接的成功率。

HTML5 WebSocket目的是取代輪詢和Comet技術(shù)，使客戶端瀏覽器具備像C/S架構(gòu)下桌面系統(tǒng)的實(shí)時(shí)通訊能力。瀏覽器通過JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請求，連接建立以后，客戶端和服務(wù)器端就可以通過TCP連接直接交換數(shù)據(jù)。因?yàn)閃ebSocket連接本質(zhì)上就是一個(gè)TCP連接，所以在數(shù)據(jù)傳輸?shù)姆€(wěn)定性和數(shù)據(jù)傳輸量的大小方面，和輪詢以及Comet技術(shù)比較，具有很大的性能優(yōu)勢。

4.WebSocket JavaScript接口定義

針對WebSocket JavaScript客戶端接口定義相對比較簡單：

清單2.建立WebSocket連接的實(shí)例JavaScript代碼：

var wsServer = 'ws：//example.com：8080/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）；

}

其中 URL屬性代表WebSocket服務(wù)器的網(wǎng)絡(luò)地址，協(xié)議通常是“ws”，send方法就是發(fā)送數(shù)據(jù)到服務(wù)器端，close方法就是關(guān)閉連接。除了這些方法，還有一些很重要的事件：onOpen，onMessage，onError以及onClose。

5.WebSocket應(yīng)用場景

5.1 初始數(shù)據(jù)前臺(tái)展示

初始數(shù)據(jù)通過后臺(tái)的數(shù)據(jù)推送方法到客戶端，客戶端可以在回調(diào)函數(shù)中收到信息，通過HTML5組件來展示這些信息。

5.2 后臺(tái)推送信息，前臺(tái)實(shí)時(shí)更新

增加后臺(tái)推送信息代碼，在后臺(tái)起一個(gè)定時(shí)器，定時(shí)推送產(chǎn)生消息或者清除信息，并將信息推送給所有的客戶端。

5.3 客戶端拖拽節(jié)點(diǎn)，同步到其他客戶端

增加拖拽同步，監(jiān)聽網(wǎng)內(nèi)所有信息點(diǎn)，將節(jié)點(diǎn)位置信息發(fā)送給后臺(tái)，后臺(tái)接收到節(jié)點(diǎn)位置信息后，更新后臺(tái)數(shù)據(jù)，然后將消息轉(zhuǎn)發(fā)給其他客戶端，實(shí)現(xiàn)信息同步操作。

6.WebSocket應(yīng)用展望

WebSocket作為一個(gè)正在演變中的Web規(guī)范，目前用WebSocket構(gòu)建應(yīng)用程序可能存在一些風(fēng)險(xiǎn)。WebSocket規(guī)范和API存在變動(dòng)的可能，盡管目前存在一些局限性，但WebSocket將會(huì)成為未來開發(fā)實(shí)時(shí)Web應(yīng)用的生力軍。

基金項(xiàng)目：2012年度江蘇省工業(yè)和信息產(chǎn)業(yè)轉(zhuǎn)型審計(jì)專項(xiàng)引導(dǎo)資金項(xiàng)目（Z065）。

作者簡介：韓安（1982—），男，陜西涇陽人，助理研究員，從事煤炭行業(yè)管理信息化系統(tǒng)的研究。