基于HTML5的異步數據傳輸

摘 要：為優化B/S系統結構與網絡數據負載，本文在HTML5的WebStorage和WebSocket技術基礎上，設計了一種異步數據傳輸方案。它將部分業務邏輯移交到客戶端執行，并在客戶端本地緩存數據，以異步方式與服務器進行交互。實踐證明能有效減輕服務器負擔，增強用戶體驗。

關鍵詞：B/S結構；WebStorage；WebSocket；異步模式

對B/S（Browser/Server）結構的應用系統[1]而言，當客戶端用戶在同一時段內進行大量數據傳輸時，瀏覽器與服務器之間交互的大部分時間用來處理和傳輸數據。服務器負載增加、用戶體驗降低。本文使用HTML5中的存儲和通信技術設計了一種異步數據傳輸方案，能解決上述問題。

1 WebStorage和WebSocket

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

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

2 異步數據傳輸

WebSocket與WebStorage提供了一系列API處理客戶端業務，結合服務器端類庫，可以進行異步數據傳輸。筆者使用JavaScript和C#語言，在.NET Framework 4.5環境下設計了方案并做了實驗。方案結構如圖1所示：

在傳統用戶端與服務器交互基礎上增加了一個中介：WebStorage。它在客戶端存儲數據并與服務器進行異步傳輸。下面以一個數據自動保存過程為例，簡述該方案的應用。

客戶端步驟：（JavaScript實現）

（1）初始化WebStorage對象，設置緩存空間和片段Seg大?。ň彺婵臻g包含n個片段）；

（2）創建并打開WebSocket對象Ws，同時設置OnSend、OnMessage各個事件的函數；

（3）用戶輸入或修改數據，觸發OnChange方法；

（4）OnChange判斷緩存狀態，如果緩存超過閾值，則執行（5），否則轉到（3）；

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

（6）判斷OnMessage返回編號隊列（OnMessage異步響應服務器返回，把服務器成功保存的Seg編號入隊），如果隊列為空，則繼續執行（7），否則執行（8）；

（7）用戶如果還有數據輸入，轉到（3），否則執行（9）；

（8）清除服務器成功保存的Seg，對應編號出隊，重新設置流序編號和修改標志，然后轉到（3）；

（9）提交頁面，Flush緩存中現有內容，關閉Ws。

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

管理端步驟：（C#實現）

（1） HttpHandler監聽客戶端請求；

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

（3）如果Ws成功打開，則調用ReceiveAsync方法獲取客戶端送過來的數據置于buffer；否則轉到（1）；

（4）解析buffer，有效的Seg保存至數據庫；

（5）調用Ws的SendAsync方法回送成功保存的編號，最后轉到（1）。

3 結論

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

[參考文獻]

[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.