基于RIA的远程实验系统的设计与实现

张好好,肖铁军,赵　蕙

(江苏大学 计算机科学与通信工程学院,江苏 镇江　212013)



基于RIA的远程实验系统的设计与实现

张好好,肖铁军,赵蕙

(江苏大学 计算机科学与通信工程学院,江苏 镇江212013)

摘要针对现代教育对远程实验的需求,采用基于RIA相关技术设计,开发了以《计算机组成原理》课程实验为背景的远程实验系统,实现传统C/S、B/S两种架构的结合。客户端通过Ajax的XMLHttp Request对象实现与服务器端的相互通信,提出了信息流最值动画算法,并利用HTML5的Canvas标签完成该算法的动画显示;服务器端利用ASP.NET完成服务器端与硬件设备的数据交互。该系统具有交互性高、实时性强、可跨浏览器等特点,能够动态地显示CPU数据通路中信息流的执行过程,满足了学生随时随地进行远程实验的需求,达到了与真实实验一样的效果,降低了学校硬件设备的成本,提高了实验资源的利用率。

关键词RIA;远程实验;XMLHttp Request对象;信息流最值动画算法;Canvas标签;ASP.NET技术

应用于远程实验系统的控制方式主要有两种,一种是基于客户机/服务器(client/server,C/S)模式实现的方式[1-2],如基于DataSocket技术的远程测控方案,该模式实现的系统响应速度快、交互能力强,能够提供一个丰富的交互式的用户界面,但客户端需要安装特定的软件,安装、维护以及管理的难度较大;另一种是基于浏览器/服务器(Browser/Server,B/S)模式实现的方式,如基于Java Applet技术的方案,该模式实现的系统开发效率高,客户端无须下载插件,但目前均依赖于Java实现,且响应速度慢[3-4]。现有的远程实验系统设计方案对于实验过程的实时观察采用了视频监控或者flash插件的方式进行动画显示,加大了系统的复杂性,为实时地、动态地观察硬件设备内部CPU的信息流执行过程带来了不便[5-7]。

富因特网应用程序(Rich Internet Application,RIA)是一种全新的Web应用程序架构,结合了C/S架构和B/S架构的优点。本文将RIA技术应用在远程实验项目中,以《计算机组成原理》课程实验为应用背景,设计并实现了适用于《计算机组成原理》课程实验的远程实验系统,达到了远程操控实验硬件设备的目的;设计了信息流最值动画算法,将硬件设备CPU的信息流执行过程动态地、实时地显示在客户端浏览器界面上。

1RIA技术

RIA中的“Rich”包含了两层含义。其一是丰富的数据模型:RIA技术提供了多种数据模型来处理在客户端复杂的数据操作。使用RIA技术可以把部分原来需要在后台服务器端进行处理的问题转移到客户端执行,使数据能够被缓存在客户端,从而实现一个比传统基于HTML的Web应用响应速度更快,且数据在服务器和客户端之间往返次数更少的用户界面。其二是丰富的界面元素:RIA技术提供了更为丰富的界面表现元素,密集、响应速度快和图形丰富的页面元素与数据模型结合在一起,为用户提供了更好的使用体验[8]。

目前,市场上主要的RIA开发技术有Ajax,HTML5,Flex,Siverlight 等。这些RIA开发技术各有特点,本文采用Ajax和HTML5技术。Ajax使用XML语言及Java Script脚本语言来实现Web页面的异步请求,其工作原理是在浏览器和服务器之间增加一个中间层,消除网络交互过程中“处理—等待—处理—等待”的缺点,使用户操作与服务器响应异步化,而这一中间层所要做的工作是由Ajax引擎来完成。Ajax引擎是复杂的Java Script程序,这些程序通过调用XML Http Request 对象的属性和方法来与服务器端进行数据交互,然后再通过 DOM 解析处理XML文档和更新HTML 页面的部分内容[9-10]。HTML5技术将Web应用推入到富客户端时代,该技术提供对本地存储、图形绘制以及音视频播放等的支持,且无需安装任何插件就能在浏览器中使用各种富客户端应用,为用户提供了一个更好的交互页面,能够方便地进行跨平台移植[11-12]。

2系统总体结构

本文研究的远程实验系统以《计算机组成原理》课程实验为应用背景,其总体结构分为3个部分,如图1所示,客户端、Web服务器、硬件设备。

图1　远程实验系统架构图

在该远程实验系统中,用户可以在任何时间、任何地点通过Web浏览器远程访问服务端发布的网址来获得实验系统界面。用户在实验系统页面上输入相应的操作指令,通过XML Http Request对象将请求数据发送至Web服务器;服务器端接收请求数据并进行相应的处理,通过USB接口与硬件设备进行连接并根据相应的请求指令操控实验设备;硬件设备完成相应的操作,并将实验数据返回至服务器端;服务器对实验设备返回的结果进行解析处理,以XML格式的形式返回至客户端,客户端对接收到的数据进行相应的处理并实时地、动态地显示在浏览器页面上。

3系统软件设计

如图2所示,系统的软件部分主要包括客户端、Web服务器这两个部分,整个远程实验系统的实现需要这两个部分的相互配合完成。

图2　系统软件设计框架

3.1客户端

3.1.1客户端页面

如图3所示,客户端主要为用户提供了一个便捷、交互的Julab实验页面。本系统以《计算机组成原理》课程实验为应用背景,该实验采用的模型机包括运算器、控制器、存储器以及系统总线等实验单元,系统总线中包含数据总线DB、地址总线AB和控制总线CB。

图3　系统Julab实验页面

首先,用户在浏览器中输入服务器端发布的实验系统的URL地址,获取Julab实验页面;然后,点击“设备连接”按钮,即可连接到远程的硬件设备;最后,根据实验目的操作相应的功能按钮,进行远程实验,并实时地、动态地观察微指令单步中信息流的执行过程。

3.1.2模型机信息流最值动画算法

实验系统所用的模型机中[13],控制器的作用是产生指令执行过程中所需要的控制信号,如Ace和PCoe,这些信号控制着信息传递的动作,如打开或关闭控制门,从而控制信息流动的方向,这些控制信号所完成的操作称为微操作。该实验系统为了使用户能够在页面中实时地、动态地观察微指令执行的过程,提出了模型机信息流最值动画算法。该算法实现了每执行一步微指令,对应的信息流动态地显示在实验系统页面的CPU数据通路图中。

模型机信息流最值动画算法将CPU数据通路中的信号分为两类,一类是与总线相关的微命令,即输入或输出直接经过总线,如ARoe输出控制信号,直接将数据输出至IB总线;另一类是与总线无关的微命令,如算术逻辑单元ALU和移位寄存器Shifter两部分。该算法针对JU-C1模型机数据通路结构添加了总线拐点(拐点1和拐点2),将所有与总线相关的微命令进行排序,序号(1～25)设置如图4所示。

图4　与总线相关的微命令序号设置图

该算法主要包括两大部分:一部分是定义类、对象;另一部分是画图。具体如下:

(1)定义部分。如图5所示:该部分定义了BaseClass基类、Bus总线基类、OutputControlSignal派生类、InputControlSignal派生类、IB_Bus派生类、MGraph_unBus类,其中IB_Bus类继承于Bus总线基类;OutputControlSignal类、InputControlSignal类是BaseClass基类的派生类,继承了BaseClass基类的(x1,y1)、(x2,y2)属性、number属性、verticalPoint_Bus属性,并分别定义了自己的私有成员Bus和control属性;

图5　定义类、对象流程图

(2)画图部分。如图6所示:该算法结合HTML5的canvas标签和Java Script技术进行绘图。首先,获取实验过程中微指令单步对应的微命令数组对象;然后,根据各个对象的Bus属性的值将所有的微命令对象分为两类,一类是与总线无关的微命令数组对象,该类对象实时调用对应的Draw_unBus画图函数,画出此类微命令的信息流动态图;另一类是与总线相关的微命令数组对象,通过比较此类对象中所有微命令对应的number序号,获取序号中的最小值min_index和最大值max_index,然后,比较min_index、max_index与IB总线上拐点的number序号值的大小,画出总线上的信息流动态图。

图6　信息流最值动画算法画图部分流程图

客户端页面实现了用户与远程实验设备的完美交互,满足了用户通过浏览器远程操控实验设备,实时地、动态地观察实验过程的需求,达到了使用户更好的理解并掌握《计算机组成原理》课程知识的目的。

3.2Web服务器

Web服务器在整个实验系统中负责数据的接收处理转发的工作,在Visual Stdio 2012平台上完成其功能设计,包括与硬件设备的相互通信、Web Service的发布:

(1)利用C++编写服务器与硬件设备的数据通信接口函数,如与硬件设备连接的函数detectDevice_ManualMode(),然后将这些接口函数封装为DLL文件供ASP.NET调用;

(2)使用C#创建Web Service,调用DLL文件中的接口函数,如调用与硬件设备连接的函数CallDetectDevice_ManualMode(),实现服务器与硬件设备的通讯,达到远程操控实验设备的目的;

(3)创建的Web Service通过IIS发布到服务器网站上供客户端浏览器页面进行远程访问。

4系统测试和结果分析

系统以《计算机组成原理》课程实验为研究背景,实现了微指令单步、指令单步、复位CPU、刷新主存/控存显示、微指令断点等功能。为验证该远程实验系统的可行性和实用性,以减1指令“DEC 0060H”为例进行测试:

(1)以任意一台能够连接网络的计算机为客户端工具,在Chrome浏览器中输入远程实验系统发布的网址,获取系统页面;

(2)点击“设备连接”按钮,选择实验类型(本例选择模型计算机实验),连接远程实验设备;若设备连接成功则会弹出“连接成功”提示窗口,此时即可进行组成原理实验操作;

(3)在主存信息显示窗口输入“DEC 0060H”对应的机器指令,并在0060H地址处设置其初始值为0002,在控存信息显示窗口输入该指令对应的微程序,观察0060H地址处的数值在进行DEC指令后的变化情况;

(4)如图7所示,点击微指令单步,在“CPU数据通路”窗口中可以实时地、动态地观察到每条微指令执行过程中信息的流动路径。

图7　微指令单步信息流动画效果图

(5)如图8所示,指令执行完毕,主存信息显示窗口中0060H地址处的值变为0001,实现了减1功能。

图8　减1指令执行后主存信息显示窗口中的值

实验结果表明,该远程实验系统具有良好的实用性以及交互性,不仅能满足学生随时随地做实验的需求,还能提高学生对组成原理课程学习的兴趣,达到理论与实践相结合的目的。另外,在IE 11版本浏览器中进行了同样的实验操作,获得了与Chrome浏览器相同的实验结果,验证了该远程实验系统的跨浏览器的特性。因此,基于富客户端的远程实验系统具有交互性高、实时性强、可跨浏览器等特点,拥有一定的推广价值。

5结束语

基于富客户端的远程实验系统的设计开发,利用了富客户端架构的跨浏览器、异步刷新、支持实时图像动画等技术特性,将C/S架构与B/S架构的优点结合,实现了一个异地访问实验系统、操控实验设备、完成课程实验的远程实验系统。在客户端页面设计了模型机信息流最值动画算法,利用HTML5的canvas标签和Java Script技术实现了浏览器页面的画图功能,将实验过程中每一步的信息流执行情况实时、动态地显示在浏览器页面上。与传统实验相比,学生无需安装客户端软件或插件,只需通过浏览器就能以远程的方式操控异地实验设备,完成一个真实的实验过程;此外,该系统减少了硬件设备的成本,使实验资源得到充分利用。

参考文献

[1]Proske M,Trodhandl C.Anytime,everywhere approaches to distance labs in embedded systems education[J].Information and Communication Technologies,2006(6):589-594.

[2]Samoila C,Ursutiu D,Jinga V.The position of the remote experiment in the experiential learning and SECI[C].Berlin:International Conference on Interactive Collaborative Learning (ICL),2014.

[3]Herrera,Oriel A,Gustavo R,et al.Remote lab experiments:opening possibilities for distance learning in engineering fields[C].Beijing:Education for the 21st Century impact of ICT and Digital Resources,2006.

[4]王越,林曼虹,吴先球.基于LabVIEW的单摆法测重力加速度远程实验设计[J].广东技术师范学院学报,2015,36(5):25-28.

[5]唐小煜,袁广宇,张廷贤.Ajax技术在远程实验控制方式中的应用[J].科技资讯,2008(23):7-8.

[6]王锦煜,张秋菊.基于RIA结构的数控设备远程监控管理系统设计[J].机电一体化,2014(6):70-72.

[7]林土方,洪凯星,郭才福等.基于B/S架构的变压器在线状态监测系统实现[J].电子测量与仪器学报,2013,27(8):766-772.

[8]唐建强.基于 RIA 技术的 Web 应用的研究[D].北京:北京交通大学,2009.

[9]Chen Bifeng.Technology and application of rich client based on Ajax[J].Computer Science,2011,10(38):419-420.

[10]谭力,杨宗源,谢瑾奎.Ajax 技术的数据响应优化[J].计算机工程,2010,36(7):52-54.

[11]Bouras C,Papazois A,Stasinos N.A framework for cross-platform mobile web applications using HTML5[C].Guangzhou:International Conference on Future Internet of Things and Cloud (FiCloud),2014.

[12]Li Li C,Zheng-Long L.Design of rich client web architecture based on HTML5[C].Torento:International Conference on Computational and Information Sciences (ICCIS),2012.

[13]肖铁军.计算机组成原理[M].北京:清华大学出版社,2010.

Design and Implementation of Remote Experiment System Based on RIA

ZHANG Haohao,XIAO Tiejun,ZHAO Hui

(School of Computer Science and Communication Engineering,Jiangsu University,Zhenjiang 212013,China)

AbstractIn view of the needs of modern education for remote experiment and the problems of C/S and B/S in the remote experiment system,the remote experiment system based on the RIA technology is adopted to design and develop the experimental system which is used to do the experiment of "Principles of Computer Composition".The XMLHttpRequest object of Ajax is used to achieve the communication between the server and the client.The maximum and minimum animation algorithm for information flow is put forward by the client,and completed by the Canvas tag of HTML5.ASP.NET is used to complete the interaction between the server and hardware.This system has the characteristics of high interaction,real time operation and cross browser.It can dynamically display the execution process of the information flow in the CPU data path.The system allows students to do remote experiments at any time and anywhere while offering the same effect as real experiment.This system also reduces the cost of the hardware and improves the utilization of the experimental resources.

KeywordsRIA;remote experiment;XMLHttp Request object;maximum and minimum animation algorithm for information flow;canvas tag;ASP.NET technology

doi:10.16180/j.cnki.issn1007-7820.2016.05.048

收稿日期:2015-10-12

作者简介:张好好(1989—),女,硕士研究生。研究方向:嵌入式。肖铁军(1963—),男,教授,硕士生导师。研究方向:嵌入式研究。赵蕙(1979—),女,博士研究生。研究方向:嵌入式。

中图分类号TP393

文献标识码A

文章编号1007-7820(2016)05-178-05