一種HTML5云文件系統

胡峴 易曉東 戴華東

國防科技大學計算機學院 湖南 410073

0 引言

本文提出的HTML5云文件系統能夠對HTML5應用訪問云存儲此提供良好支撐，HTML5應用通過調用云文件系統提供的API能夠方便快捷地實現與遠程云服務器的數據上傳、下載、管理等功能。此外，HTML5云文件系統還針對移動互聯網連接不穩定、速度不穩定等狀況進行了優化，利用HTML5本地存儲等新特性，實現了用戶數據的本地緩存、離線同步等功能，較大程度地改善了HTML5應用的用戶體驗。

1 HTML5簡介

HTML5是未來移動互聯網的核心平臺，更是未來移動互聯網時代的技術制高點，HTML5不僅僅用來表示Web內容，更使得Web進入了一個成熟的應用平臺，視頻、音頻、圖像、動畫以及用戶電腦的交互都被標準化。

1.1 HTML5應用

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

1.2 HTML5本地存儲支持

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

(1) 申請文件存儲空間

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

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

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

(3) 創建文件

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

2 設計與實現

2.1 HTML5云文件系統的結構

HTML5云文件系統架構在本地存儲與遠程云存儲之上，通過互聯網絡為不同設備之間的信息共享提供環境，使得用戶能夠快捷地在不同設備之間、不同工作場所處理相同文件，進行無間斷工作以及信息數據同步。用戶在聯網狀態下對網絡端文件的操作，會同步到本地存儲，離線狀態下切換成在本地存儲中操作文件，待下次聯網，云文件系統提供的同步功能會在后臺將本地存儲與遠程云存儲的文件進行同步，以達到本地存儲與遠程云存儲文件的一致性。圖1為HTML5云文件系統結構圖。

在云文件系統中，前端模塊是在用戶上網設備上的瀏覽器中運行，基于瀏覽器的HTML5功能，向HTML5應用提供文件系統API，負責對用戶網絡的判斷以及在離線狀態下對本地文件的處理。

后端模塊是在服務器上實現，同時處理多個用戶和用戶的多個終端的連接，配合前端提供服務。主要負責在用戶在線時接收用戶請求并執行相應的文件操作，通過調用服務器上jsp文件完成文件的處理并向前端返回信息。

圖1 系統結構圖

2.2 功能與用法

HTML5云文件系統為用戶提供云服務器端文件管理功能，與操作本地文件系統一樣，通過HTML5云文件系統能夠對云服務器端文件進行操作，例如文件的刪除、移動、重命名等操作。HTML5云文件系統提供身份驗證、數據隔離、訪問控制等安全功能，保證遠程云存儲服務器上多用戶數據的隔離訪問。用戶訪問遠程云存儲服務器，登錄驗證身份后，能夠像訪問本地文件系統一樣訪問遠程云存儲服務器上的數據，HTML5云文件系統將透明地實現數據的上傳、下載和訪問控制等功能。

2.2.1 透明本地緩存

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

2.2.2 離線操作

HTML5云文件系統支持離線操作。用戶在離線狀態下使用云文件系統，或者突然與網絡斷開，用戶此刻需要使用云文件系統的上傳功能將文件上傳，云文件系統會對服務器的狀態進行檢測，在服務器處于無法連接的狀態下會智能地將用戶選擇的文件緩存在本地文件系統中，并對緩存結果進行監聽，文件緩存成功后會提示給用戶文件已經成功緩存在本地，等待網絡恢復后再與服務器同步。如若由于存儲空間不足等原因導致文件緩存失敗，系統同樣會提示用戶文件緩存失敗。

2.2.3 身份識別與訪問控制

使用HTML5云文件系統需要對用戶的身份識別，用戶需要使用用戶登錄的方式來獲得對云服務器文件操作的權限。在遠程云存儲服務器提供的訪問接口的基礎上，HTML5云文件系統能夠提供用戶注冊功能，并實現不同用戶的數據和訪問的隔離等安全功能。

2.2.4 多終端訪問的數據一致性

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

3 實現

3.1 文件上傳

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

圖2 文件上傳流程圖

3.2 文件下載

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

圖3 文件下載流程圖

3.3 其他文件操作

用戶對文件進行操作，如刪除、移動、重命名等。通過調用對應的API，系統首先執行網絡狀態判斷，當用戶處于離線狀態，API會在本地系統中查找文件，如果文件存在則執行相應的操作并返回信息，如果文件不存在，則返回文件不存在信息。當用戶在線時，執行遠程操作模塊，直接發送請求到服務器，請求中包含指定執行的JSP文件以及文件名等參數。服務器接收到請求并提取參數，執行對應的jsp文件。云服務系統在遠程服務器上配置了對應的jsp文件，包括文件上傳upload.jsp，文件下載download.jsp，文件刪除dell.jsp，文件移動move.jsp，文件重命名rename.jsp等。將執行結果返還到客戶端。客戶端在接收回傳信息后對成功與否進行判斷，文件操作成功會在瀏覽器上顯示告知用戶，文件操作失敗，會執行本地操作模塊并返回結果。

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

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

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

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

3.5 身份認證與訪問控制

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

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

4 結束語

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

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

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

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

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

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

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

[7] 盧漢鵬.JSP開發技術詳解.北京：化學工業出版社.2010.

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