摘 要：為優(yōu)化B/S系統(tǒng)結(jié)構(gòu)與網(wǎng)絡(luò)數(shù)據(jù)負(fù)載，本文在HTML5的WebStorage和WebSocket技術(shù)基礎(chǔ)上，設(shè)計了一種異步數(shù)據(jù)傳輸方案。它將部分業(yè)務(wù)邏輯移交到客戶端執(zhí)行，并在客戶端本地緩存數(shù)據(jù)，以異步方式與服務(wù)器進(jìn)行交互。實(shí)踐證明能有效減輕服務(wù)器負(fù)擔(dān)，增強(qiáng)用戶體驗(yàn)。

關(guān)鍵詞：B/S結(jié)構(gòu)；WebStorage；WebSocket；異步模式

對B/S（Browser/Server）結(jié)構(gòu)的應(yīng)用系統(tǒng)[1]而言，當(dāng)客戶端用戶在同一時段內(nèi)進(jìn)行大量數(shù)據(jù)傳輸時，瀏覽器與服務(wù)器之間交互的大部分時間用來處理和傳輸數(shù)據(jù)。服務(wù)器負(fù)載增加、用戶體驗(yàn)降低。本文使用HTML5中的存儲和通信技術(shù)設(shè)計了一種異步數(shù)據(jù)傳輸方案，能解決上述問題。

1 WebStorage和WebSocket

WebStorage是在HTML5本地保存信息和狀態(tài)的技術(shù)，其持久存儲LocalStorage和會話期存儲SessionStoage兩種方式共可存儲多達(dá)5M字節(jié)[2]的數(shù)據(jù)，與Cookie等技術(shù)相比，具有更大的存儲空間和更靈活的使用方式。

WebSocket是Web中目前為止最強(qiáng)大的通信功能，它定義一個全雙工的通信信道，通過一個Socket即可進(jìn)行通信。目的是為了取代輪詢和Comet技術(shù)，使瀏覽器具有客戶機(jī)/服務(wù)器（Client/Server，C/S）模式下應(yīng)用程序的實(shí)時通信能力[3]?？蛻舳伺c服務(wù)器的連接在握手時，基于同底層的TCP/IP連接，將HTTP協(xié)議升級為WebSocket協(xié)議，握手成功后進(jìn)入雙向長連接階段，以全雙工方式發(fā)送和接收數(shù)據(jù)。數(shù)據(jù)幀以0x00字節(jié)開頭，0xff字節(jié)結(jié)束，與HTTP頭的幾百個字節(jié)相比，WebSocket只有2個字節(jié)的額外開銷。

2 異步數(shù)據(jù)傳輸

WebSocket與WebStorage提供了一系列API處理客戶端業(yè)務(wù)，結(jié)合服務(wù)器端類庫，可以進(jìn)行異步數(shù)據(jù)傳輸。筆者使用JavaScript和C#語言，在.NET Framework 4.5環(huán)境下設(shè)計了方案并做了實(shí)驗(yàn)。方案結(jié)構(gòu)如圖1所示：

在傳統(tǒng)用戶端與服務(wù)器交互基礎(chǔ)上增加了一個中介：WebStorage。它在客戶端存儲數(shù)據(jù)并與服務(wù)器進(jìn)行異步傳輸。下面以一個數(shù)據(jù)自動保存過程為例，簡述該方案的應(yīng)用。

客戶端步驟：（JavaScript實(shí)現(xiàn)）

（1）初始化WebStorage對象，設(shè)置緩存空間和片段Seg大小（緩存空間包含n個片段）；

（2）創(chuàng)建并打開WebSocket對象Ws，同時設(shè)置OnSend、OnMessage各個事件的函數(shù)；

（3）用戶輸入或修改數(shù)據(jù)，觸發(fā)OnChange方法；

（4）OnChange判斷緩存狀態(tài)，如果緩存超過閾值，則執(zhí)行（5），否則轉(zhuǎn)到（3）；

（5）設(shè)置緩存的Seg數(shù)據(jù)編號，裝配形成格式化的數(shù)據(jù)流，Ws異步Send數(shù)據(jù)，請求服務(wù)器處理；

（6）判斷OnMessage返回編號隊(duì)列（OnMessage異步響應(yīng)服務(wù)器返回，把服務(wù)器成功保存的Seg編號入隊(duì)），如果隊(duì)列為空，則繼續(xù)執(zhí)行（7），否則執(zhí)行（8）；

（7）用戶如果還有數(shù)據(jù)輸入，轉(zhuǎn)到（3），否則執(zhí)行（9）；

（8）清除服務(wù)器成功保存的Seg，對應(yīng)編號出隊(duì)，重新設(shè)置流序編號和修改標(biāo)志，然后轉(zhuǎn)到（3）；

（9）提交頁面，F(xiàn)lush緩存中現(xiàn)有內(nèi)容，關(guān)閉Ws。

上述過程中，用戶編輯的數(shù)據(jù)片段存入緩存被發(fā)送給服務(wù)器。服務(wù)器成功保存片段數(shù)據(jù)后，返回其編號交與客戶端Socket的OnMessage，OnMessage執(zhí)行不影響用戶編輯數(shù)據(jù)，處理過程是異步的。

管理端步驟：（C#實(shí)現(xiàn)）

（1） HttpHandler監(jiān)聽客戶端請求；

（2）有客戶端請求（IsWebSocketRequest），則引用HttpContext中的WebSocket對象Ws；

（3）如果Ws成功打開，則調(diào)用ReceiveAsync方法獲取客戶端送過來的數(shù)據(jù)置于buffer；否則轉(zhuǎn)到（1）；

（4）解析buffer，有效的Seg保存至數(shù)據(jù)庫；

（5）調(diào)用Ws的SendAsync方法回送成功保存的編號，最后轉(zhuǎn)到（1）。

3 結(jié)論

該方案應(yīng)用到筆者參與開發(fā)的兩個信息管理系統(tǒng)中，運(yùn)行結(jié)果表明：（1）在客戶端駐留部分業(yè)務(wù)邏輯代碼，可最大程度地利用客戶端的軟件資源；（2）減少訪問次數(shù)，利用客戶端本地緩存數(shù)據(jù)可大大減少網(wǎng)絡(luò)流量，減少服務(wù)器的負(fù)載。（3）異步傳輸數(shù)據(jù)，在不影響邏輯功能前提下，改進(jìn)數(shù)據(jù)傳輸形式與性能，改善系統(tǒng)運(yùn)行效率而提升用戶體驗(yàn)。

[參考文獻(xiàn)]

[1]Bruce Silver.How to choose an E-form system[J].Transform Magazine，2002，11：21-24.

[2]http：//www.w3.org/TR/webstorage/[3]XU Z K.Research on WebGIS based on HTML5，Ajax and Web Service[J].Science of Surveying and Mapping，2012，37（1）：145-147.