【基于WEB的虚拟桌面系统设计5200字（论文）】

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系统的测试结果登录页功能：登录页实现简单的登陆注册，正常可用虚拟桌面首页：正常显示桌面壁纸、图标、文件浏览器