PAGE1基于WEB的虛擬桌面系統設計摘要：隨著科技的發展，廉價的移動式設備和嵌入式設備為越來越多的人青睞，而受限于體積、散熱，這些設備往往不能像桌面級設備提供很高的算力來支撐復雜、算例需求大的軟件，所以，能運行在低功耗、低算力設備卻可以運行高算力的軟件成了越來越多科研用戶、工業用戶的重要需求。以往，我們可以通過虛擬化技術，在遠程的Server服務器上部署多套系統，不同用戶可以通過終端SSH或者可視化的VNC來訪問Server,但受限于技術原理，這并不能提供很好的體驗，無法得到流暢體驗。基于web的虛擬桌面系統有效解決了上述問題，系統的核心思想是Web_Client-Server,程序核心運行在遠程的服務器，而客戶端則通過Web技術重繪。本論文包含四項重點：以繪圖指令方式繪制應用程序畫面；相較于以傳送圖片方式顯示應用畫面，傳送繪圖指令更能節省網絡帶寬。以瀏覽器為系統平臺，無須安裝其他外部應用；本論文使用基本的HTML5、CSS、JS，將應用程序畫面繪制于網頁顯示。使用ServerPush傳送畫面更新，WebSocket通訊協定作為客戶端與服務器的溝通機制。支持多人同時在線，不同使用者的輸入與畫面不互相干擾。關鍵詞:Web虛擬化技術WebSocket重繪桌面目錄TOC\h\z\t"畢設h1,1,畢設h2,2,畢設結參附謝,1"1前言 11.1問題的提出 11.2虛擬桌面技術發展現況 12總體設計 22.1虛擬桌面背景 22.2系統功能設置 32.3系統功能模塊 33詳細功能實現 43.1系統登陸模塊實現 43.2系統主界面解剖 43.3文件瀏覽器實現 43.4文本編輯器實現 43.5虛擬終端實現 43.6系統后端實現 44系統測試 54.1系統測試工作的流程 54.2系統的測試內容 54.2系統的測試結果 5結束語 6參考文獻 7附錄 81前言1.1問題的提出雖然虛擬化技術最早出現于上世紀70年代，但由于大型服務器的昂貴、帶寬的不足等原因，它直到21世紀初才得以廣泛應用。隨著科學技術的發展，網絡的帶寬成倍提高、價格越來越被人們接受，計算機性能飛速提高，虛擬化技術也得到很大發展，從過去只能用軟件實現虛擬化，性能羸弱，到現在各種設備支持硬件級虛擬化，諸如Intel的VT，Nvidia的VGpu，合理的虛擬化資源調度導致其綜合性能甚至超過宿主機，伴隨著環保意識的提高，虛擬化技術逐漸被廣泛接受和應用。目前虛擬化技術主要有桌面虛擬化、應用虛擬化、服務器虛擬化，而桌面虛擬化是目前很火熱的一個技術。根據MordorIntelligence統計和預測，2020年，桌面虛擬化市場價值為6.728億美元，預計到2026年將達到12290.22百萬美元。國內虛擬化技術雖然起步較晚，但是各大廠商也陸續推出了虛擬桌面產品。在廣闊的虛擬桌面市場空間中，越來越多的公司、黨政、校園等機構開始應用虛擬桌面，為了提高辦公效率，降低運營成本，桌面虛擬化技術已經成為發展最快、最有前途的新技術。而在市場和用戶的不同需求下，桌面虛擬化的基礎架構技術也在迭代更新。以Web技術實現桌面虛擬化無疑是一個便捷且高效的方案，而如何實現通過瀏覽器訪問即可輕松使用眾多不同的應用，提高用戶的黏性，是亟需解決的問題。1.2系統的可行性分析1.2.1系統需求分析通過調查問卷等實際分析，系統需求主要在下面幾個點：響應速度快外觀簡潔大方，上手簡單運行特定軟件，可以自定義提交參數查詢信息容易1.2.2可行性分析對于客戶端只要安裝有瀏覽器，即可使用web虛擬桌面系統，而后端部署在性能強大的linux虛擬機集群上，系統是仿windows10風格的，所以用戶可以很輕松地像使用普通微軟系統那樣使用web虛擬桌面系統，并能通過創建自定義作業的方式，將計算復雜的軟件放在linux虛擬機集群上做高效率的計算，這是很吸引高等院校做科研研究，或者工業用戶做模型設計的。2總體設計2.1虛擬桌面背景桌面虛擬化技術于2006年提出。經過幾年的發展，桌面虛擬化技術已被廣泛使用。仿真技術已廣泛應用于各行各業。尤其是結合虛擬應用程序幫助企業降低桌面管理成本，提高終端數據安全性，更好地實現桌面開發統一管理與運維。2.2系統功能設置本文所作的WEB虛擬桌面系統，前臺用所基本的web三元素開發，后端使用python的flask,后臺數據庫使用的是SQL，采用的是C/S模式，其內容包括：系統登陸模塊：該功能為不同的用戶提供不同的登錄界面，并為具有不同權限的客戶實現不同的操作功能系統主界面：包括可以自定義更換的桌面壁紙，可拖動的桌面圖標，包括設置菜單的任務欄，顯示時間的狀態欄文件瀏覽器：文件瀏覽器是對后端linux文件系統的前端實現文本編輯器：可以編輯文件，保存后實時更新到后端linux虛擬機虛擬終端：通過websocket和后端linux虛擬機shell保持通信2.3系統功能模塊系統各功能模塊如下圖所示：最開始為系統登陸頁，像通常的web登陸系統那樣，用戶需要輸入自己賬號和密碼登陸系統，用戶分兩種，一種是管理員，用來管理自己的組內的計算機配置，賬戶余額等信息，第二種是普通用戶，普通用戶是只有安裝應用，使用應用的權限，無法做出修改系統的權限。第一次登陸系統，將會在linux虛擬機新建一個同名用戶，用戶管理使用ldap進行鑒權和認證。之后進入我們的虛擬桌面系統，很直觀地可以看到任務欄、狀態欄，狀態欄上顯示日期，任務欄上顯示正在運行的應用，而分布在桌面上的圖標都是應用，這里具體的有：文本編輯器、文件瀏覽器、虛擬終端，文本編輯器可以進行簡單的文字編輯，并能夠保存到對用的linux虛擬機的用戶家目錄下面，文件瀏覽器則可以直觀地呈現用戶加目錄下面的文件夾或文件，并能夠進行復制、粘貼、刪除的基本操作，這些操作是實時同步到linux后端的，虛擬終端則給用戶提供了更強大的操作系統的途徑，在上面，運行復雜的命令，通過ssh+websocket的手段，實時與后端linux虛擬機進行交互。3詳細功能實現3.1系統登陸模塊實現一個登錄功能主要實現如下幾個基本的功能點：（1）注冊新用戶到數據庫（2）判斷一個登錄請求是成功還是失敗（3）登錄狀態的保持實現上述功能的基本流程如下：注冊新用戶到數據庫:登陸功能：保持登錄狀態如圖所示：我們使用令牌來實現登錄功能。我們從用戶請求數據包中提取用戶名和密碼，然后在ldap數據庫中查詢。如果查詢到用戶，我們將向前端返回令牌。前端將記錄令牌。當當前端需要身份驗證時，請將令牌放入數據請求“訪問受保護的內容”中，登陸的路由如下：登陸時向ldap查詢用戶的代碼如下：3.2系統主界面解剖Web虛擬桌面基本模仿了主流的操作系統的界面，但UI、字體等用的是開源免費的版本，所以不會涉及侵權問題，桌面分為兩大模塊，一是最底部的任務欄和狀態欄，任務欄最左側是系統的菜單欄，可以在這里選擇應用或者進行關機操作；二是桌面上的應用，每一個圖標對應了一個應用，如上圖所示這是文件瀏覽器應用。3.3文件瀏覽器實現如果Web應用程序可以讀取和寫入文件和目錄，這將很方便。隨著從離線遷移到在線，應用程序變得越來越復雜，缺少文件系統API一直是推動Web前進的障礙。存儲二進制數據或與二進制數據進行交互不應僅限于臺式機。使用FileSystemAPI，Web應用程序可以創建，讀取，導航和寫入用戶本地文件系統的沙盒部分。所以本作基于FileSystemAPI實現了文件瀏覽器，總體實現在linux虛擬機上同步創建、刪除、修改目錄的原理如圖所示：3.3.1創建文件夾 getDirectory是獲取文件夾函數，重點在于添加了{create:true}屬性，當文件夾不存在時自動創建:fs.root.getDirectory("abc",{create:true},function(dirEntry){},fileSystemObj.errorHandler);3.3.2展示目錄使用FileSystemAPI實現文件的羅列:window.resolveLocalFileSystemURL=window.resolveLocalFileSystemURL||window.webkitResolveLocalFileSystemURL;3.3.3復制文件或文件夾復制文件有兩種形式，一是用戶選擇硬盤的文件，另一種是filesystem復制filesystem里的文件。第一種形式幾乎可以理解是克隆，靠getFile,createWriter形式重建文件。而后者可使用moveTo、copyTo形式直接移動或者復制FileEntry和DirectoryEntry均可使用copyTo()復制現有條目。該方法會自動以遞歸方式復制文件夾：functioncopy(cwd,src,dest){cwd.getFile(src,{},function(fileEntry){cwd.getDirectory(dest,{},function(dirEntry){fileEntry.copyTo(dirEntry);},errorHandler);},errorHandler);}3.3.4刪除文件fileSystemObj.fs.root.getFile(file,{create:false},function(fileEntry){fileEntry.remove(function(){//hasbeendeleted},fileSystemObj.errorHandler);},fileSystemObj.errorHandler);3.4文本編輯器實現wangEditor是一款基于javascript和css開發的html富文本編輯器，開源免費，所以我選擇了它作為我們系統的文本編輯器，當點擊保存時，則通過websocket將內容傳遞到后端。前端實現代碼如下：html:<divclass="ArticleDetail"><divref="editor"style="text-align:left"></div></div>js:<script>importaxiosfrom'axios';import{Loading}from'element-ui'importEfrom'wangeditor'vareditor;exportdefault{name:"WriteArticle",data:function(){return{Title:'',Content:''}},mounted:function(){varThat=this;editor=newE(this.$refs.editor);editor.customConfig={onchange:function(html){That.Content=html},uploadImgServer:'/api/UploadImg',//上傳圖片到服務器uploadFileName:'Content',//后端使用這個字段獲取圖片信息uploadImgMaxLength:1,//限制一次最多上傳1張圖片}editor.create()}}</script>3.5虛擬終端實現xshell確實好用，但是不便于輾轉流連于多個電腦之間，雖然用onedrive解決了多臺電腦之間的秘鑰文件的存儲問題，但是令人討厭的秘鑰密碼卻總是如幽靈般的閃現，偶爾記不住某個服務器的密碼就要翻箱倒柜地尋找密碼薄。因此，像登錄網站那樣登錄ssh，這樣不論在哪臺電腦上工作，只要有一個瀏覽器，就可以隨時登錄服務器，豈不快哉。3.5.1原理首先要了解我們使用webssh的工作原理，傳統單工的http協議并不能滿足我們的要求，我們要求實時雙工通信，因此前端的協議就是websocket，前端處理終端字符有一個非常著名的庫xterm.js,最近非常流行的vscode的terminal就是使用xterm.js編寫的。后端websocket服務采用tornado,ssh通信及認證等工作交給python的paramiko庫。原理圖大概如下面這個樣子：3.5.2xterm.js的使用了解了原理，接下來我們來實現它。首先我們先看一下xterm.js這個工具的使用。xterm.js是一個非常強大的庫，可以幫我們簡化很多的工作和麻煩，有了xterm.js，我們不需要考慮terminal下的各種字符的問題。我們使用的代碼比較簡單，只需要引入xterm.js,然后創建一個websocket即可。<head><linkrel="stylesheet"href="{{url_for('static',filename='dist/xterm.css')}}"/><linkrel="stylesheet"href="{{url_for('static',filename='dist/addons/fullscreen/fullscreen.css')}}"/><!--<linkrel="stylesheet"href="/dist/style.css"/>--><scriptsrc="{{url_for('static',filename='dist/xterm.js')}}"></script><scriptsrc="{{url_for('static',filename='dist/addons/fullscreen/fullscreen.js')}}"></script><scriptsrc="{{url_for('static',filename='dist/addons/fit/fit.js')}}"></script></head><body><divclass="container"><divid="terminal-container"></div></div><script>//terminado.apply(Terminal);console.log("加載addons");Terminal.applyAddon(fit);//獲取網頁高度和寬度varcols=parseInt(document.documentElement.clientWidth/9.5,10)varrows=parseInt(document.documentElement.clientHeight/18,10)varterm=newTerminal({cols:cols,rows:rows}),protocol=(tocol==='https:')?'wss://':'ws://',socketURL=protocol+location.hostname+((location.port)?(':'+location.port):'')+"/websocket/{{server_id}}";sock=newWebSocket(socketURL);sock.addEventListener('open',function(){//term(sock);//發送當前窗口大小sock.send("size:"+cols+","+rows)term.on('data',function(data){sock.send(data);});});sock.addEventListener("message",function(msg){term.write(msg.data)});term.open(document.getElementById('terminal-container'));//term.write("Hello");term.fit();//term.toggleFullScreen(true);</script></body>3.6系統后端實現3.6.1Tornado使用websockettornado是一個強大的web應用框架，其最受關注的功能是對異步的支持，它使得處理非阻塞請求更容易，最終導致更高效的處理以及更好的可擴展性，同時也支持websocket.所以，我們這里選用的websocket實現就是tornado。實現代碼如下：fromtornado.webimportFallbackHandler,Application,StaticFileHandlerfromtornado.wsgiimportWSGIContainerfromtornado.ioloopimportIOLoopfromapp.ws.serverimportSshHandlerfromtornado.httpserverimportHTTPServerimportsslimportosapp=WSGIContainer(app)handlers=[(r"/websocket/(.*)",SshHandler,{}),(r"/(.*)",FallbackHandler,dict(fallback=app))]application=Application(handlers,debug=True這里不僅使用了websocket，還是用flask部分代碼，是因為我的項目中http請求是用flask來實現的。3.6.2認證webssh這么敏感的業務肯定是要跑在securewebsocket上的，tornado添加證書和秘鑰原理如下：httpserver=HTTPServer(application,ssl_options={"certfile":os.path.join(config.read("secure_path"),"1__bundle.crt"),"keyfile":os.path.join(config.read("secure_path"),"2_.key"),})httpserver.listen(int(config.read("PORT")))IOLoop.current().start()這樣服務端的websocket就創建好了4系統測試系統測試是一種測試級別，可驗證完整且完全集成的軟件產品。系統測試的目的是評估端到端系統規格。通常，該軟件只是大型基于計算機的系統中的一個元素。最終，該軟件將與其他軟件/硬件系統接口。系統測試實際上是一系列不同的測試，其唯一目的是使用完整的基于計算機的系統。4.1系統測試工作的流程系統測試的過程分為四個階段：測試計劃階段、測試的設計階段、測試的實現階段、測試的執行階段。(1)測試計劃階段主要是定義測試目標、測試過程中人力資源的安排、測試準入準出條件、每個Build版本的測試時間、里程碑點、風險分析等信息。測試計劃最核心的目的就是控制風險。(2)測試設計階段主要是完成測試方案，當測試計劃和需求規范經過評審后，將設計測試計劃。測試方案主要包括測試策略(功能、性能或自動化測試的策略)、測試環境搭建、測試數據準備、測試工具使用、優先級等信息;測試方案的核心是測試策略的設計，為測試用例設計做準備。(3)測試實現階段主要是完成測試用例、測試規程、測試的預測試項。測試實現階段最主要的是完成測試用例的設計與測試用例的評審。(4)測試執行階段主要是執行系統測試預測試項、系統的測試用例，改正發現的問題然后進行回溯測試，提交系統預測試報告、系統測試報告、缺陷報告。4.2系統的測試內容功能測試：在系統功能范圍內，確保產品的功能按照定義的要求運行。可恢復性測試：確保系統從各種輸入錯誤和其他故障情況中恢復的能力。互操作性測試：確保系統是否可以與第三方產品正常運行。性能測試：根據性能特征，確保系統在各種條件下的性能。可伸縮性測試：在各種方面確保系統的可伸縮性，例如用戶伸縮，地理伸縮和資源伸縮。可靠性測試：確保系統可以長時間運行而不會出現故障。回歸測試：為了確保系統在通過不同子系統和維護任務的集成時的穩定性。文檔測試：確保系統的用戶指南和其他幫助主題文檔正確且可用。安全測試：確保系統不允許未經授權訪問數據和資源。可用性測試：為確保系統易于使用，學習和操作。4.2系統的測試結果登錄頁功能：登錄頁實現簡單的登陸注冊，正常可用虛擬桌面首頁：正常顯示桌面壁紙、圖標、文件瀏覽器