胡峴 易曉東 戴華東

國防科技大學(xué)計算機學(xué)院 湖南 410073

0 引言

本文提出的HTML5云文件系統(tǒng)能夠?qū)TML5應(yīng)用訪問云存儲此提供良好支撐，HTML5應(yīng)用通過調(diào)用云文件系統(tǒng)提供的API能夠方便快捷地實現(xiàn)與遠(yuǎn)程云服務(wù)器的數(shù)據(jù)上傳、下載、管理等功能。此外，HTML5云文件系統(tǒng)還針對移動互聯(lián)網(wǎng)連接不穩(wěn)定、速度不穩(wěn)定等狀況進行了優(yōu)化，利用HTML5本地存儲等新特性，實現(xiàn)了用戶數(shù)據(jù)的本地緩存、離線同步等功能，較大程度地改善了HTML5應(yīng)用的用戶體驗。

1 HTML5簡介

HTML5是未來移動互聯(lián)網(wǎng)的核心平臺，更是未來移動互聯(lián)網(wǎng)時代的技術(shù)制高點，HTML5不僅僅用來表示W(wǎng)eb內(nèi)容，更使得Web進入了一個成熟的應(yīng)用平臺，視頻、音頻、圖像、動畫以及用戶電腦的交互都被標(biāo)準(zhǔn)化。

1.1 HTML5應(yīng)用

運用HTML5新特性開發(fā)的Web應(yīng)用，我們稱之為HTML5應(yīng)用。相比于傳統(tǒng)的Web應(yīng)用，它具有更強的互動性與獨立性。相比于傳統(tǒng)本地原生應(yīng)用，它具有統(tǒng)一標(biāo)準(zhǔn)和跨平臺運行的特點。HTML5應(yīng)用還具備即時更新的特點，傳統(tǒng)應(yīng)用更新需要重新下載安裝，而HTML5應(yīng)用更新很方便，就像更新網(wǎng)頁，是馬上的、即時的更新。

1.2 HTML5本地存儲支持

為了滿足對包含大段數(shù)據(jù)文件的存儲和多種不同格式文件的保存。需要一個離線的文件管理系統(tǒng)來維護我們工作，HTML5的FileSystem API就充當(dāng)這個角色。通過FileSystem API，Web應(yīng)用程序可以閱讀，瀏覽，編輯和操縱本地文件系統(tǒng)。FileSystem API的主要功能有：

(1) 申請文件存儲空間

需要申請一個文件存儲空間來存儲Web應(yīng)用所需要的數(shù)據(jù)，并獲得FileSystem API的可操作對象，使用window.requestFileSystem()方法可申請存儲空間，方法中內(nèi)置屬性包含請求文件系統(tǒng)類型(TEMPORARY或PERSISTENT類型)，文件系統(tǒng)大小(默認(rèn)為1兆)，成功回調(diào)函數(shù)，失敗回調(diào)函數(shù)。

(2) 讀取文件、操作文件

讀取已經(jīng)存在的文件，通過調(diào)用getFile()方法獲得文件，包含三個參數(shù)，文件路徑，成功回調(diào)函數(shù)，失敗回調(diào)函數(shù)。讀取文件后，調(diào)用remove()方法實現(xiàn)文件刪除，調(diào)用copyTo()方法實現(xiàn)文件復(fù)制，調(diào)用moveTo()方法實現(xiàn)文件移動。

(3) 創(chuàng)建文件

getFile()方法提供一個內(nèi)置屬性可創(chuàng)建新文件，分別是create和exclusive。前者表示如果目標(biāo)文件不存在，是否創(chuàng)建；后者表示如果目標(biāo)文件已存在，是否拋出異常。

2 設(shè)計與實現(xiàn)

2.1 HTML5云文件系統(tǒng)的結(jié)構(gòu)

HTML5云文件系統(tǒng)架構(gòu)在本地存儲與遠(yuǎn)程云存儲之上，通過互聯(lián)網(wǎng)絡(luò)為不同設(shè)備之間的信息共享提供環(huán)境，使得用戶能夠快捷地在不同設(shè)備之間、不同工作場所處理相同文件，進行無間斷工作以及信息數(shù)據(jù)同步。用戶在聯(lián)網(wǎng)狀態(tài)下對網(wǎng)絡(luò)端文件的操作，會同步到本地存儲，離線狀態(tài)下切換成在本地存儲中操作文件，待下次聯(lián)網(wǎng)，云文件系統(tǒng)提供的同步功能會在后臺將本地存儲與遠(yuǎn)程云存儲的文件進行同步，以達(dá)到本地存儲與遠(yuǎn)程云存儲文件的一致性。圖1為HTML5云文件系統(tǒng)結(jié)構(gòu)圖。

在云文件系統(tǒng)中，前端模塊是在用戶上網(wǎng)設(shè)備上的瀏覽器中運行，基于瀏覽器的HTML5功能，向HTML5應(yīng)用提供文件系統(tǒng)API，負(fù)責(zé)對用戶網(wǎng)絡(luò)的判斷以及在離線狀態(tài)下對本地文件的處理。

后端模塊是在服務(wù)器上實現(xiàn)，同時處理多個用戶和用戶的多個終端的連接，配合前端提供服務(wù)。主要負(fù)責(zé)在用戶在線時接收用戶請求并執(zhí)行相應(yīng)的文件操作，通過調(diào)用服務(wù)器上jsp文件完成文件的處理并向前端返回信息。

圖1 系統(tǒng)結(jié)構(gòu)圖

2.2 功能與用法

HTML5云文件系統(tǒng)為用戶提供云服務(wù)器端文件管理功能，與操作本地文件系統(tǒng)一樣，通過HTML5云文件系統(tǒng)能夠?qū)υ品?wù)器端文件進行操作，例如文件的刪除、移動、重命名等操作。HTML5云文件系統(tǒng)提供身份驗證、數(shù)據(jù)隔離、訪問控制等安全功能，保證遠(yuǎn)程云存儲服務(wù)器上多用戶數(shù)據(jù)的隔離訪問。用戶訪問遠(yuǎn)程云存儲服務(wù)器，登錄驗證身份后，能夠像訪問本地文件系統(tǒng)一樣訪問遠(yuǎn)程云存儲服務(wù)器上的數(shù)據(jù)，HTML5云文件系統(tǒng)將透明地實現(xiàn)數(shù)據(jù)的上傳、下載和訪問控制等功能。

2.2.1 透明本地緩存

當(dāng)用戶處于網(wǎng)絡(luò)不穩(wěn)定或者處于離線狀態(tài)時，用戶仍然可以使用HTML5云文件系統(tǒng)，這得益于HTML5的本地緩存功能，其原理是在線時將Web應(yīng)用必須的資源下載緩存在本地，如HTML，CSS，JavaScript，圖片，或者其他類型的資源。用戶在離線狀況下訪問云服務(wù)器，使用本地資源將云文件系統(tǒng)的管理界面顯示在瀏覽器，用戶離線使用云文件系統(tǒng)，是對用戶本地存儲空間的文件進行操作，用戶操作的動作都會在下次聯(lián)網(wǎng)時在后臺與云服務(wù)器進行文件數(shù)據(jù)同步，對用戶的感覺就是在離線狀態(tài)下使用云文件系統(tǒng)來對云服務(wù)器端的文件進行操作。

2.2.2 離線操作

HTML5云文件系統(tǒng)支持離線操作。用戶在離線狀態(tài)下使用云文件系統(tǒng)，或者突然與網(wǎng)絡(luò)斷開，用戶此刻需要使用云文件系統(tǒng)的上傳功能將文件上傳，云文件系統(tǒng)會對服務(wù)器的狀態(tài)進行檢測，在服務(wù)器處于無法連接的狀態(tài)下會智能地將用戶選擇的文件緩存在本地文件系統(tǒng)中，并對緩存結(jié)果進行監(jiān)聽，文件緩存成功后會提示給用戶文件已經(jīng)成功緩存在本地，等待網(wǎng)絡(luò)恢復(fù)后再與服務(wù)器同步。如若由于存儲空間不足等原因?qū)е挛募彺媸。到y(tǒng)同樣會提示用戶文件緩存失敗。

2.2.3 身份識別與訪問控制

使用HTML5云文件系統(tǒng)需要對用戶的身份識別，用戶需要使用用戶登錄的方式來獲得對云服務(wù)器文件操作的權(quán)限。在遠(yuǎn)程云存儲服務(wù)器提供的訪問接口的基礎(chǔ)上，HTML5云文件系統(tǒng)能夠提供用戶注冊功能，并實現(xiàn)不同用戶的數(shù)據(jù)和訪問的隔離等安全功能。

2.2.4 多終端訪問的數(shù)據(jù)一致性

HTML5云文件系統(tǒng)支持同一個用戶使用多個終端設(shè)備同時訪問遠(yuǎn)程云存儲服務(wù)器，通過加鎖、版本控制、沖突消解策略等機制，透明地保證各個終端設(shè)備能夠看到一致性的數(shù)據(jù)。同時，通過自適應(yīng)的同步與更新策略，盡量降低數(shù)據(jù)不一致帶給用戶的影響。

3 實現(xiàn)

3.1 文件上傳

HTML5應(yīng)用通過標(biāo)簽獲取文件，提交按鈕關(guān)聯(lián)云文件系統(tǒng)的上傳API，就能實現(xiàn)文件上傳功能。文件上傳面臨最主要的問題是用戶的網(wǎng)絡(luò)可能不穩(wěn)定或者文件上傳失敗，所以云文件系統(tǒng)采取了一個新的解決方案：在用戶處于離線狀態(tài)時將文件緩存在本地，待下次在線時再與服務(wù)器數(shù)據(jù)同步。首先會對當(dāng)前網(wǎng)絡(luò)狀態(tài)進行判斷，當(dāng)用戶處于離線狀態(tài)，調(diào)用本地緩存模塊對文件進行本地緩存，并對文件存儲成功與否進行監(jiān)聽并返回結(jié)果，當(dāng)網(wǎng)絡(luò)在線時，將調(diào)用遠(yuǎn)程上載模塊，以表單的形式將文件以二進制數(shù)據(jù)流發(fā)送到服務(wù)器端，表單action屬性指定執(zhí)行服務(wù)器上upload.jsp文件，服務(wù)器端在接收到請求后，執(zhí)行upload.jsp文件。在JSP文件中獲得客戶端請求中發(fā)送來的輸入流，然后從這個輸入流中讀取指定的文件，把文件保存到指定的位置，完成文件的上傳。對文件的上傳成功與否進行判斷，并將結(jié)果返回前端。前端中信息接收判斷模塊接收并判斷服務(wù)器返回信息，當(dāng)接收到上傳成功信息后，會在客戶端顯示用戶文件已經(jīng)上傳成功，當(dāng)接受到上傳失敗信息，則再次調(diào)用本地緩存模塊，將文件保存在本地，并返回結(jié)果。圖2為文件上傳流程圖。

圖2 文件上傳流程圖

3.2 文件下載

HTML5應(yīng)用需要下載遠(yuǎn)程服務(wù)器文件時，可以使用云文件系統(tǒng)的下載API，方便地達(dá)到文件下載的目的。下載文件只需要獲取文件的路徑，將文件路徑傳遞參數(shù)并執(zhí)行下載API即可下載文件。由于用戶可能網(wǎng)絡(luò)不太穩(wěn)定，所以首先會對用戶的網(wǎng)絡(luò)進行判斷，當(dāng)用戶處于離線狀態(tài)，調(diào)用本地下載模塊，API將解析文件路徑，在本地文件系統(tǒng)中查找文件，文件存在則下載文件，文件如若不存在，則返回文件不存在信息。當(dāng)在線時，則調(diào)用遠(yuǎn)程下載模塊，向服務(wù)器發(fā)送下載請求，請求中包含用戶需要下載文件的路徑值和調(diào)用的download.jsp文件，服務(wù)器端的download.jsp文件中，通過獲取到的文件路徑查找到對應(yīng)的文件，將文件以二進制讀入到輸入流中，寫入到輸出流向客戶端發(fā)送數(shù)據(jù)，執(zhí)行下載動作。文件下載的處理方式是附件(attachment)方式，會彈出文件保存對話框，等待用戶確認(rèn)，用戶確認(rèn)后，服務(wù)器開始向客戶端發(fā)送輸出流。download.jsp對文件下載成功與否進行判斷，并將結(jié)果返還給客戶端。前端信息接收判斷模塊接收并對返回信息進行判斷，當(dāng)文件下載成功，提示用戶文件已經(jīng)下載成功，文件下載失敗，再次執(zhí)行本地下載模塊，并輸出結(jié)果提示用戶。圖3為文件下載流程圖。

圖3 文件下載流程圖

3.3 其他文件操作

用戶對文件進行操作，如刪除、移動、重命名等。通過調(diào)用對應(yīng)的API，系統(tǒng)首先執(zhí)行網(wǎng)絡(luò)狀態(tài)判斷，當(dāng)用戶處于離線狀態(tài)，API會在本地系統(tǒng)中查找文件，如果文件存在則執(zhí)行相應(yīng)的操作并返回信息，如果文件不存在，則返回文件不存在信息。當(dāng)用戶在線時，執(zhí)行遠(yuǎn)程操作模塊，直接發(fā)送請求到服務(wù)器，請求中包含指定執(zhí)行的JSP文件以及文件名等參數(shù)。服務(wù)器接收到請求并提取參數(shù)，執(zhí)行對應(yīng)的jsp文件。云服務(wù)系統(tǒng)在遠(yuǎn)程服務(wù)器上配置了對應(yīng)的jsp文件，包括文件上傳upload.jsp，文件下載download.jsp，文件刪除dell.jsp，文件移動move.jsp，文件重命名rename.jsp等。將執(zhí)行結(jié)果返還到客戶端?？蛻舳嗽诮邮栈貍餍畔⒑髮Τ晒εc否進行判斷，文件操作成功會在瀏覽器上顯示告知用戶，文件操作失敗，會執(zhí)行本地操作模塊并返回結(jié)果。

3.4 本地緩存與同步更新策略

文件同步方式采用給文件添加一個時間戳屬性的方式，用來識別增量，服務(wù)器端文件和本地文件都設(shè)置一個時間戳。通過對比兩端文件的時間戳，來判斷文件是否需要同步。同步的方向是文件時間戳新的覆蓋時間戳舊的。當(dāng)本地文件時間戳較新于服務(wù)器端文件，會自動將文件上傳至服務(wù)器并覆蓋源文件。當(dāng)服務(wù)器端文件時間戳較新于本地文件，則會自動將服務(wù)器端文件下載緩存更新本地文件。

當(dāng)用戶處于在線狀態(tài)時，觸發(fā)數(shù)據(jù)同步模塊，首先，同步模塊會收集本地存儲文件的版本信息，將文件名、文件時間戳存入一個二維數(shù)組中，生成一個同步數(shù)據(jù)包。然后，將同步數(shù)據(jù)包發(fā)送到服務(wù)器端。服務(wù)器在接收到同步數(shù)據(jù)包后，提取數(shù)據(jù)，對云存儲中文件的文件進行匹配對比。當(dāng)文件名與云存儲中文件有差異，如云存儲中文件名在同步數(shù)據(jù)包中找不到相同的文件名，則表明用戶在本地存儲中已經(jīng)將文件刪除，服務(wù)器將刪除云存儲中的對應(yīng)文件，如果同步數(shù)據(jù)包中的文件名在云存儲文件中找不到，或者文件的時間戳不匹配，服務(wù)器將向客戶端返回信息，客戶端在接收到回傳信息后將本地存儲中對應(yīng)的文件上傳到云存儲，覆蓋舊文件以到達(dá)文件更新同步的目的。

同步模塊還會判斷用戶當(dāng)前連接的互聯(lián)網(wǎng)類型，對連接穩(wěn)定的網(wǎng)絡(luò)例如有線、WIFI等，增加同步間隔，以提高同步更新的效率；對連接不穩(wěn)定的網(wǎng)絡(luò)例如移動互聯(lián)網(wǎng)，則提高同步的頻率。對于較慢的網(wǎng)絡(luò)，如3G，GPRS，采用后臺同步的方式進行同步。

3.5 身份認(rèn)證與訪問控制

用戶使用云文件系統(tǒng)需要進行身份驗證，通過在瀏覽器的登錄信息表單中填寫用戶名和密碼，點擊提交，瀏覽器將向服務(wù)器端發(fā)送登錄請求，請求中包含有用戶的用戶名和密碼信息。服務(wù)器在接受到請求后，提取用戶名與密碼，在服務(wù)器的數(shù)據(jù)庫中，包含一張用戶表，里面包含username和password兩個字段，將提取到的用戶名與密碼在用戶表中進行檢索匹配，當(dāng)用戶名在用戶表中不存在或者密碼與用戶表中的password字段不匹配，服務(wù)器會向客戶端返回登錄失敗的信息，當(dāng)用戶名與密碼在用戶表中匹配成功，服務(wù)器向客戶端返回登錄成功信息，并開放訪問權(quán)限。

在服務(wù)器數(shù)據(jù)庫中存在一張用戶角色表，里面包含username、userid與rolename三個字段，userid是用戶編號，是惟一的，確保了用戶不能被冒充偽造，rolename是指用戶的角色類型。通過這張用戶角色表，來實現(xiàn)對用戶的訪問控制。用戶登錄成功后，服務(wù)器在用戶角色表中對用戶名進行檢索，匹配到username后，將rolename字符進行提取返回。通過rolename字段來確定用戶的角色類型。

4 結(jié)束語

未來HTML5應(yīng)用需要順應(yīng)云計算的發(fā)展趨勢，使用云存儲模式保存用戶數(shù)據(jù)，有效利用HTML5的跨平臺特點為用戶提供隨時隨地訪問云數(shù)據(jù)的功能。本文提出的HTML5文件系統(tǒng)，為HTML5應(yīng)用提供API操作云文件系統(tǒng)，同時充分考慮了用戶斷網(wǎng)、網(wǎng)絡(luò)狀況不佳或者與服務(wù)器連接不上等情況，提出了離線使用云文件系統(tǒng)方案。為HTML5應(yīng)用提供了一個使用管理云存儲文件系統(tǒng)的設(shè)計思路。

[1] 柳伯斯,阿伯斯,薩姆.HTML5高級程序設(shè)計[M].北京：人民郵電出版社.2011.

[2] 皮爾格林,?？?胡金埔,趙靜.HTML5揭秘[M].北京：電子工業(yè)出版社.2010.

[3] 羅森,夏普.HTML5用戶指南[M].北京：機械工業(yè)出版社.2011.

[4] Eric Bidelman.Using the HTML5 Filesystem API, O’Reilly Google press.2011.

[5] 澤斯卡,李松峰,曹力.JavaScript高級程序設(shè)計(第三版).北京：人民郵電出版社.2012.

[6] 劉曉華.JSP應(yīng)用開發(fā)詳解(第三版).北京：電子工業(yè)出版社.2006.

[7] 盧漢鵬.JSP開發(fā)技術(shù)詳解.北京：化學(xué)工業(yè)出版社.2010.

[8] 孫鑫.Java Web 開發(fā)三部曲——Servlet JSP深入詳解：基于Tomcat的Web開發(fā).北京：電子工業(yè)出版社.2008.