【基于WEB的虛擬桌面系統(tǒng)設計5200字（論文）】

PAGE1基于WEB的虛擬桌面系統(tǒng)設計摘要：隨著科技的發(fā)展，廉價的移動式設備和嵌入式設備為越來越多的人青睞，而受限于體積、散熱，這些設備往往不能像桌面級設備提供很高的算力來支撐復雜、算例需求大的軟件，所以，能運行在低功耗、低算力設備卻可以運行高算力的軟件成了越來越多科研用戶、工業(yè)用戶的重要需求。以往，我們可以通過虛擬化技術，在遠程的Server服務器上部署多套系統(tǒng)，不同用戶可以通過終端SSH或者可視化的VNC來訪問Server,但受限于技術原理，這并不能提供很好的體驗，無法得到流暢體驗?；趙eb的虛擬桌面系統(tǒng)有效解決了上述問題，系統(tǒng)的核心思想是Web_Client-Server,程序核心運行在遠程的服務器，而客戶端則通過Web技術重繪。本論文包含四項重點：以繪圖指令方式繪制應用程序畫面；相較于以傳送圖片方式顯示應用畫面，傳送繪圖指令更能節(jié)省網(wǎng)絡帶寬。以瀏覽器為系統(tǒng)平臺，無須安裝其他外部應用；本論文使用基本的HTML5、CSS、JS，將應用程序畫面繪制于網(wǎng)頁顯示。使用ServerPush傳送畫面更新，WebSocket通訊協(xié)定作為客戶端與服務器的溝通機制。支持多人同時在線，不同使用者的輸入與畫面不互相干擾。關鍵詞:Web虛擬化技術WebSocket重繪桌面目錄TOC\h\z\t"畢設h1,1,畢設h2,2,畢設結參附謝,1"1前言 11.1問題的提出 11.2虛擬桌面技術發(fā)展現(xiàn)況 12總體設計 22.1虛擬桌面背景 22.2系統(tǒng)功能設置 32.3系統(tǒng)功能模塊 33詳細功能實現(xiàn) 43.1系統(tǒng)登陸模塊實現(xiàn) 43.2系統(tǒng)主界面解剖 43.3文件瀏覽器實現(xiàn) 43.4文本編輯器實現(xiàn) 43.5虛擬終端實現(xiàn) 43.6系統(tǒng)后端實現(xiàn) 44系統(tǒng)測試 54.1系統(tǒng)測試工作的流程 54.2系統(tǒng)的測試內容 54.2系統(tǒng)的測試結果 5結束語 6參考文獻 7附錄 81前言1.1問題的提出雖然虛擬化技術最早出現(xiàn)于上世紀70年代，但由于大型服務器的昂貴、帶寬的不足等原因，它直到21世紀初才得以廣泛應用。隨著科學技術的發(fā)展，網(wǎng)絡的帶寬成倍提高、價格越來越被人們接受，計算機性能飛速提高，虛擬化技術也得到很大發(fā)展，從過去只能用軟件實現(xiàn)虛擬化，性能羸弱，到現(xiàn)在各種設備支持硬件級虛擬化，諸如Intel的VT，Nvidia的VGpu，合理的虛擬化資源調度導致其綜合性能甚至超過宿主機，伴隨著環(huán)保意識的提高，虛擬化技術逐漸被廣泛接受和應用。目前虛擬化技術主要有桌面虛擬化、應用虛擬化、服務器虛擬化，而桌面虛擬化是目前很火熱的一個技術。根據(jù)MordorIntelligence統(tǒng)計和預測，2020年，桌面虛擬化市場價值為6.728億美元，預計到2026年將達到12290.22百萬美元。國內虛擬化技術雖然起步較晚，但是各大廠商也陸續(xù)推出了虛擬桌面產(chǎn)品。在廣闊的虛擬桌面市場空間中，越來越多的公司、黨政、校園等機構開始應用虛擬桌面，為了提高辦公效率，降低運營成本，桌面虛擬化技術已經(jīng)成為發(fā)展最快、最有前途的新技術。而在市場和用戶的不同需求下，桌面虛擬化的基礎架構技術也在迭代更新。以Web技術實現(xiàn)桌面虛擬化無疑是一個便捷且高效的方案，而如何實現(xiàn)通過瀏覽器訪問即可輕松使用眾多不同的應用，提高用戶的黏性，是亟需解決的問題。1.2系統(tǒng)的可行性分析1.2.1系統(tǒng)需求分析通過調查問卷等實際分析，系統(tǒng)需求主要在下面幾個點：響應速度快外觀簡潔大方，上手簡單運行特定軟件，可以自定義提交參數(shù)查詢信息容易1.2.2可行性分析對于客戶端只要安裝有瀏覽器，即可使用web虛擬桌面系統(tǒng)，而后端部署在性能強大的linux虛擬機集群上，系統(tǒng)是仿windows10風格的，所以用戶可以很輕松地像使用普通微軟系統(tǒng)那樣使用web虛擬桌面系統(tǒng)，并能通過創(chuàng)建自定義作業(yè)的方式，將計算復雜的軟件放在linux虛擬機集群上做高效率的計算，這是很吸引高等院校做科研研究，或者工業(yè)用戶做模型設計的。2總體設計2.1虛擬桌面背景桌面虛擬化技術于2006年提出。經(jīng)過幾年的發(fā)展，桌面虛擬化技術已被廣泛使用。仿真技術已廣泛應用于各行各業(yè)。尤其是結合虛擬應用程序幫助企業(yè)降低桌面管理成本，提高終端數(shù)據(jù)安全性，更好地實現(xiàn)桌面開發(fā)統(tǒng)一管理與運維。2.2系統(tǒng)功能設置本文所作的WEB虛擬桌面系統(tǒng)，前臺用所基本的web三元素開發(fā)，后端使用python的flask,后臺數(shù)據(jù)庫使用的是SQL，采用的是C/S模式，其內容包括：系統(tǒng)登陸模塊：該功能為不同的用戶提供不同的登錄界面，并為具有不同權限的客戶實現(xiàn)不同的操作功能系統(tǒng)主界面：包括可以自定義更換的桌面壁紙，可拖動的桌面圖標，包括設置菜單的任務欄，顯示時間的狀態(tài)欄文件瀏覽器：文件瀏覽器是對后端linux文件系統(tǒng)的前端實現(xiàn)文本編輯器：可以編輯文件，保存后實時更新到后端linux虛擬機虛擬終端：通過websocket和后端linux虛擬機shell保持通信2.3系統(tǒng)功能模塊系統(tǒng)各功能模塊如下圖所示：最開始為系統(tǒng)登陸頁，像通常的web登陸系統(tǒng)那樣，用戶需要輸入自己賬號和密碼登陸系統(tǒng)，用戶分兩種，一種是管理員，用來管理自己的組內的計算機配置，賬戶余額等信息，第二種是普通用戶，普通用戶是只有安裝應用，使用應用的權限，無法做出修改系統(tǒng)的權限。第一次登陸系統(tǒng)，將會在linux虛擬機新建一個同名用戶，用戶管理使用ldap進行鑒權和認證。之后進入我們的虛擬桌面系統(tǒng)，很直觀地可以看到任務欄、狀態(tài)欄，狀態(tài)欄上顯示日期，任務欄上顯示正在運行的應用，而分布在桌面上的圖標都是應用，這里具體的有：文本編輯器、文件瀏覽器、虛擬終端，文本編輯器可以進行簡單的文字編輯，并能夠保存到對用的linux虛擬機的用戶家目錄下面，文件瀏覽器則可以直觀地呈現(xiàn)用戶加目錄下面的文件夾或文件，并能夠進行復制、粘貼、刪除的基本操作，這些操作是實時同步到linux后端的，虛擬終端則給用戶提供了更強大的操作系統(tǒng)的途徑，在上面，運行復雜的命令，通過ssh+websocket的手段，實時與后端linux虛擬機進行交互。3詳細功能實現(xiàn)3.1系統(tǒng)登陸模塊實現(xiàn)一個登錄功能主要實現(xiàn)如下幾個基本的功能點：（1）注冊新用戶到數(shù)據(jù)庫（2）判斷一個登錄請求是成功還是失?。?）登錄狀態(tài)的保持實現(xiàn)上述功能的基本流程如下：注冊新用戶到數(shù)據(jù)庫:登陸功能：保持登錄狀態(tài)如圖所示：我們使用令牌來實現(xiàn)登錄功能。我們從用戶請求數(shù)據(jù)包中提取用戶名和密碼，然后在ldap數(shù)據(jù)庫中查詢。如果查詢到用戶，我們將向前端返回令牌。前端將記錄令牌。當當前端需要身份驗證時，請將令牌放入數(shù)據(jù)請求“訪問受保護的內容”中，登陸的路由如下：登陸時向ldap查詢用戶的代碼如下：3.2系統(tǒng)主界面解剖Web虛擬桌面基本模仿了主流的操作系統(tǒng)的界面，但UI、字體等用的是開源免費的版本，所以不會涉及侵權問題，桌面分為兩大模塊，一是最底部的任務欄和狀態(tài)欄，任務欄最左側是系統(tǒng)的菜單欄，可以在這里選擇應用或者進行關機操作；二是桌面上的應用，每一個圖標對應了一個應用，如上圖所示這是文件瀏覽器應用。3.3文件瀏覽器實現(xiàn)如果Web應用程序可以讀取和寫入文件和目錄，這將很方便。隨著從離線遷移到在線，應用程序變得越來越復雜，缺少文件系統(tǒng)API一直是推動Web前進的障礙。存儲二進制數(shù)據(jù)或與二進制數(shù)據(jù)進行交互不應僅限于臺式機。使用FileSystemAPI，Web應用程序可以創(chuàng)建，讀取，導航和寫入用戶本地文件系統(tǒng)的沙盒部分。所以本作基于FileSystemAPI實現(xiàn)了文件瀏覽器，總體實現(xiàn)在linux虛擬機上同步創(chuàng)建、刪除、修改目錄的原理如圖所示：3.3.1創(chuàng)建文件夾 getDirectory是獲取文件夾函數(shù)，重點在于添加了{create:true}屬性，當文件夾不存在時自動創(chuàng)建:fs.root.getDirectory("abc",{create:true},function(dirEntry){},fileSystemObj.errorHandler);3.3.2展示目錄使用FileSystemAPI實現(xiàn)文件的羅列:window.resolveLocalFileSystemURL=window.resolveLocalFileSystemURL||window.webkitResolveLocalFileSystemURL;3.3.3復制文件或文件夾復制文件有兩種形式，一是用戶選擇硬盤的文件，另一種是filesystem復制filesystem里的文件。第一種形式幾乎可以理解是克隆，靠getFile,createWriter形式重建文件。而后者可使用moveTo、copyTo形式直接移動或者復制FileEntry和DirectoryEntry均可使用copyTo()復制現(xiàn)有條目。該方法會自動以遞歸方式復制文件夾：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文本編輯器實現(xiàn)wangEditor是一款基于javascript和css開發(fā)的html富文本編輯器，開源免費，所以我選擇了它作為我們系統(tǒng)的文本編輯器，當點擊保存時，則通過websocket將內容傳遞到后端。前端實現(xiàn)代碼如下：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虛擬終端實現(xiàn)xshell確實好用，但是不便于輾轉流連于多個電腦之間，雖然用onedrive解決了多臺電腦之間的秘鑰文件的存儲問題，但是令人討厭的秘鑰密碼卻總是如幽靈般的閃現(xiàn)，偶爾記不住某個服務器的密碼就要翻箱倒柜地尋找密碼薄。因此，像登錄網(wǎng)站那樣登錄ssh，這樣不論在哪臺電腦上工作，只要有一個瀏覽器，就可以隨時登錄服務器，豈不快哉。3.5.1原理首先要了解我們使用webssh的工作原理，傳統(tǒng)單工的http協(xié)議并不能滿足我們的要求，我們要求實時雙工通信，因此前端的協(xié)議就是websocket，前端處理終端字符有一個非常著名的庫xterm.js,最近非常流行的vscode的terminal就是使用xterm.js編寫的。后端websocket服務采用tornado,ssh通信及認證等工作交給python的paramiko庫。原理圖大概如下面這個樣子：3.5.2xterm.js的使用了解了原理，接下來我們來實現(xiàn)它。首先我們先看一下xterm.js這個工具的使用。xterm.js是一個非常強大的庫，可以幫我們簡化很多的工作和麻煩，有了xterm.js，我們不需要考慮terminal下的各種字符的問題。我們使用的代碼比較簡單，只需要引入xterm.js,然后創(chuàng)建一個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);//獲取網(wǎng)頁高度和寬度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);//發(fā)送當前窗口大小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系統(tǒng)后端實現(xiàn)3.6.1Tornado使用websockettornado是一個強大的web應用框架，其最受關注的功能是對異步的支持，它使得處理非阻塞請求更容易，最終導致更高效的處理以及更好的可擴展性，同時也支持websocket.所以，我們這里選用的websocket實現(xiàn)就是tornado。實現(xiàn)代碼如下：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來實現(xiàn)的。3.6.2認證webssh這么敏感的業(yè)務肯定是要跑在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就創(chuàng)建好了4系統(tǒng)測試系統(tǒng)測試是一種測試級別，可驗證完整且完全集成的軟件產(chǎn)品。系統(tǒng)測試的目的是評估端到端系統(tǒng)規(guī)格。通常，該軟件只是大型基于計算機的系統(tǒng)中的一個元素。最終，該軟件將與其他軟件/硬件系統(tǒng)接口。系統(tǒng)測試實際上是一系列不同的測試，其唯一目的是使用完整的基于計算機的系統(tǒng)。4.1系統(tǒng)測試工作的流程系統(tǒng)測試的過程分為四個階段：測試計劃階段、測試的設計階段、測試的實現(xiàn)階段、測試的執(zhí)行階段。(1)測試計劃階段主要是定義測試目標、測試過程中人力資源的安排、測試準入準出條件、每個Build版本的測試時間、里程碑點、風險分析等信息。測試計劃最核心的目的就是控制風險。(2)測試設計階段主要是完成測試方案，當測試計劃和需求規(guī)范經(jīng)過評審后，將設計測試計劃。測試方案主要包括測試策略(功能、性能或自動化測試的策略)、測試環(huán)境搭建、測試數(shù)據(jù)準備、測試工具使用、優(yōu)先級等信息;測試方案的核心是測試策略的設計，為測試用例設計做準備。(3)測試實現(xiàn)階段主要是完成測試用例、測試規(guī)程、測試的預測試項。測試實現(xiàn)階段最主要的是完成測試用例的設計與測試用例的評審。(4)測試執(zhí)行階段主要是執(zhí)行系統(tǒng)測試預測試項、系統(tǒng)的測試用例，改正發(fā)現(xiàn)的問題然后進行回溯測試，提交系統(tǒng)預測試報告、系統(tǒng)測試報告、缺陷報告。4.2系統(tǒng)的測試內容功能測試：在系統(tǒng)功能范圍內，確保產(chǎn)品的功能按照定義的要求運行?？苫謴托詼y試：確保系統(tǒng)從各種輸入錯誤和其他故障情況中恢復的能力?；ゲ僮餍詼y試：確保系統(tǒng)是否可以與第三方產(chǎn)品正常運行。性能測試：根據(jù)性能特征，確保系統(tǒng)在各種條件下的性能?？缮炜s性測試：在各種方面確保系統(tǒng)的可伸縮性，例如用戶伸縮，地理伸縮和資源伸縮?？煽啃詼y試：確保系統(tǒng)可以長時間運行而不會出現(xiàn)故障?；貧w測試：為了確保系統(tǒng)在通過不同子系統(tǒng)和維護任務的集成時的穩(wěn)定性。文檔測試：確保系統(tǒng)的用戶指南和其他幫助主題文檔正確且可用。安全測試：確保系統(tǒng)不允許未經(jīng)授權訪問數(shù)據(jù)和資源。可用性測試：為確保系統(tǒng)易于使用，學習和操作。4.2系統(tǒng)的測試結果登錄頁功能：登錄頁實現(xiàn)簡單的登陸注冊，正?？捎锰摂M桌面首頁：正常顯示桌面壁紙、圖標、文件瀏覽器