張好好,肖鐵軍,趙　蕙

(江蘇大學 計算機科學與通信工程學院,江蘇 鎮(zhèn)江　212013)

?

基于RIA的遠程實驗系統(tǒng)的設計與實現(xiàn)

張好好,肖鐵軍,趙蕙

(江蘇大學 計算機科學與通信工程學院,江蘇 鎮(zhèn)江212013)

摘要針對現(xiàn)代教育對遠程實驗的需求,采用基于RIA相關技術設計,開發(fā)了以《計算機組成原理》課程實驗為背景的遠程實驗系統(tǒng),實現(xiàn)傳統(tǒng)C/S、B/S兩種架構的結(jié)合?？蛻舳送ㄟ^Ajax的XMLHttp Request對象實現(xiàn)與服務器端的相互通信,提出了信息流最值動畫算法,并利用HTML5的Canvas標簽完成該算法的動畫顯示;服務器端利用ASP.NET完成服務器端與硬件設備的數(shù)據(jù)交互。該系統(tǒng)具有交互性高、實時性強、可跨瀏覽器等特點,能夠動態(tài)地顯示CPU數(shù)據(jù)通路中信息流的執(zhí)行過程,滿足了學生隨時隨地進行遠程實驗的需求,達到了與真實實驗一樣的效果,降低了學校硬件設備的成本,提高了實驗資源的利用率。

關鍵詞RIA;遠程實驗;XMLHttp Request對象;信息流最值動畫算法;Canvas標簽;ASP.NET技術

應用于遠程實驗系統(tǒng)的控制方式主要有兩種,一種是基于客戶機/服務器(client/server,C/S)模式實現(xiàn)的方式[1-2],如基于DataSocket技術的遠程測控方案,該模式實現(xiàn)的系統(tǒng)響應速度快、交互能力強,能夠提供一個豐富的交互式的用戶界面,但客戶端需要安裝特定的軟件,安裝、維護以及管理的難度較大;另一種是基于瀏覽器/服務器(Browser/Server,B/S)模式實現(xiàn)的方式,如基于Java Applet技術的方案,該模式實現(xiàn)的系統(tǒng)開發(fā)效率高,客戶端無須下載插件,但目前均依賴于Java實現(xiàn),且響應速度慢[3-4]。現(xiàn)有的遠程實驗系統(tǒng)設計方案對于實驗過程的實時觀察采用了視頻監(jiān)控或者flash插件的方式進行動畫顯示,加大了系統(tǒng)的復雜性,為實時地、動態(tài)地觀察硬件設備內(nèi)部CPU的信息流執(zhí)行過程帶來了不便[5-7]。

富因特網(wǎng)應用程序(Rich Internet Application,RIA)是一種全新的Web應用程序架構,結(jié)合了C/S架構和B/S架構的優(yōu)點。本文將RIA技術應用在遠程實驗項目中,以《計算機組成原理》課程實驗為應用背景,設計并實現(xiàn)了適用于《計算機組成原理》課程實驗的遠程實驗系統(tǒng),達到了遠程操控實驗硬件設備的目的;設計了信息流最值動畫算法,將硬件設備CPU的信息流執(zhí)行過程動態(tài)地、實時地顯示在客戶端瀏覽器界面上。

1RIA技術

RIA中的“Rich”包含了兩層含義。其一是豐富的數(shù)據(jù)模型:RIA技術提供了多種數(shù)據(jù)模型來處理在客戶端復雜的數(shù)據(jù)操作。使用RIA技術可以把部分原來需要在后臺服務器端進行處理的問題轉(zhuǎn)移到客戶端執(zhí)行,使數(shù)據(jù)能夠被緩存在客戶端,從而實現(xiàn)一個比傳統(tǒng)基于HTML的Web應用響應速度更快,且數(shù)據(jù)在服務器和客戶端之間往返次數(shù)更少的用戶界面。其二是豐富的界面元素:RIA技術提供了更為豐富的界面表現(xiàn)元素,密集、響應速度快和圖形豐富的頁面元素與數(shù)據(jù)模型結(jié)合在一起,為用戶提供了更好的使用體驗[8]。

目前,市場上主要的RIA開發(fā)技術有Ajax,HTML5,Flex,Siverlight 等。這些RIA開發(fā)技術各有特點,本文采用Ajax和HTML5技術。Ajax使用XML語言及Java Script腳本語言來實現(xiàn)Web頁面的異步請求,其工作原理是在瀏覽器和服務器之間增加一個中間層,消除網(wǎng)絡交互過程中“處理—等待—處理—等待”的缺點,使用戶操作與服務器響應異步化,而這一中間層所要做的工作是由Ajax引擎來完成。Ajax引擎是復雜的Java Script程序,這些程序通過調(diào)用XML Http Request 對象的屬性和方法來與服務器端進行數(shù)據(jù)交互,然后再通過 DOM 解析處理XML文檔和更新HTML 頁面的部分內(nèi)容[9-10]。HTML5技術將Web應用推入到富客戶端時代,該技術提供對本地存儲、圖形繪制以及音視頻播放等的支持,且無需安裝任何插件就能在瀏覽器中使用各種富客戶端應用,為用戶提供了一個更好的交互頁面,能夠方便地進行跨平臺移植[11-12]。

2系統(tǒng)總體結(jié)構

本文研究的遠程實驗系統(tǒng)以《計算機組成原理》課程實驗為應用背景,其總體結(jié)構分為3個部分,如圖1所示,客戶端、Web服務器、硬件設備。

圖1　遠程實驗系統(tǒng)架構圖

在該遠程實驗系統(tǒng)中,用戶可以在任何時間、任何地點通過Web瀏覽器遠程訪問服務端發(fā)布的網(wǎng)址來獲得實驗系統(tǒng)界面。用戶在實驗系統(tǒng)頁面上輸入相應的操作指令,通過XML Http Request對象將請求數(shù)據(jù)發(fā)送至Web服務器;服務器端接收請求數(shù)據(jù)并進行相應的處理,通過USB接口與硬件設備進行連接并根據(jù)相應的請求指令操控實驗設備;硬件設備完成相應的操作,并將實驗數(shù)據(jù)返回至服務器端;服務器對實驗設備返回的結(jié)果進行解析處理,以XML格式的形式返回至客戶端,客戶端對接收到的數(shù)據(jù)進行相應的處理并實時地、動態(tài)地顯示在瀏覽器頁面上。

3系統(tǒng)軟件設計

如圖2所示,系統(tǒng)的軟件部分主要包括客戶端、Web服務器這兩個部分,整個遠程實驗系統(tǒng)的實現(xiàn)需要這兩個部分的相互配合完成。

圖2　系統(tǒng)軟件設計框架

3.1客戶端

3.1.1客戶端頁面

如圖3所示,客戶端主要為用戶提供了一個便捷、交互的Julab實驗頁面。本系統(tǒng)以《計算機組成原理》課程實驗為應用背景,該實驗采用的模型機包括運算器、控制器、存儲器以及系統(tǒng)總線等實驗單元,系統(tǒng)總線中包含數(shù)據(jù)總線DB、地址總線AB和控制總線CB。

圖3　系統(tǒng)Julab實驗頁面

首先,用戶在瀏覽器中輸入服務器端發(fā)布的實驗系統(tǒng)的URL地址,獲取Julab實驗頁面;然后,點擊“設備連接”按鈕,即可連接到遠程的硬件設備;最后,根據(jù)實驗目的操作相應的功能按鈕,進行遠程實驗,并實時地、動態(tài)地觀察微指令單步中信息流的執(zhí)行過程。

3.1.2模型機信息流最值動畫算法

實驗系統(tǒng)所用的模型機中[13],控制器的作用是產(chǎn)生指令執(zhí)行過程中所需要的控制信號,如Ace和PCoe,這些信號控制著信息傳遞的動作,如打開或關閉控制門,從而控制信息流動的方向,這些控制信號所完成的操作稱為微操作。該實驗系統(tǒng)為了使用戶能夠在頁面中實時地、動態(tài)地觀察微指令執(zhí)行的過程,提出了模型機信息流最值動畫算法。該算法實現(xiàn)了每執(zhí)行一步微指令,對應的信息流動態(tài)地顯示在實驗系統(tǒng)頁面的CPU數(shù)據(jù)通路圖中。

模型機信息流最值動畫算法將CPU數(shù)據(jù)通路中的信號分為兩類,一類是與總線相關的微命令,即輸入或輸出直接經(jīng)過總線,如ARoe輸出控制信號,直接將數(shù)據(jù)輸出至IB總線;另一類是與總線無關的微命令,如算術邏輯單元ALU和移位寄存器Shifter兩部分。該算法針對JU-C1模型機數(shù)據(jù)通路結(jié)構添加了總線拐點(拐點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所示:該算法結(jié)合HTML5的canvas標簽和Java Script技術進行繪圖。首先,獲取實驗過程中微指令單步對應的微命令數(shù)組對象;然后,根據(jù)各個對象的Bus屬性的值將所有的微命令對象分為兩類,一類是與總線無關的微命令數(shù)組對象,該類對象實時調(diào)用對應的Draw_unBus畫圖函數(shù),畫出此類微命令的信息流動態(tài)圖;另一類是與總線相關的微命令數(shù)組對象,通過比較此類對象中所有微命令對應的number序號,獲取序號中的最小值min_index和最大值max_index,然后,比較min_index、max_index與IB總線上拐點的number序號值的大小,畫出總線上的信息流動態(tài)圖。

圖6　信息流最值動畫算法畫圖部分流程圖

客戶端頁面實現(xiàn)了用戶與遠程實驗設備的完美交互,滿足了用戶通過瀏覽器遠程操控實驗設備,實時地、動態(tài)地觀察實驗過程的需求,達到了使用戶更好的理解并掌握《計算機組成原理》課程知識的目的。

3.2Web服務器

Web服務器在整個實驗系統(tǒng)中負責數(shù)據(jù)的接收處理轉(zhuǎn)發(fā)的工作,在Visual Stdio 2012平臺上完成其功能設計,包括與硬件設備的相互通信、Web Service的發(fā)布:

(1)利用C++編寫服務器與硬件設備的數(shù)據(jù)通信接口函數(shù),如與硬件設備連接的函數(shù)detectDevice_ManualMode(),然后將這些接口函數(shù)封裝為DLL文件供ASP.NET調(diào)用;

(2)使用C#創(chuàng)建Web Service,調(diào)用DLL文件中的接口函數(shù),如調(diào)用與硬件設備連接的函數(shù)CallDetectDevice_ManualMode(),實現(xiàn)服務器與硬件設備的通訊,達到遠程操控實驗設備的目的;

(3)創(chuàng)建的Web Service通過IIS發(fā)布到服務器網(wǎng)站上供客戶端瀏覽器頁面進行遠程訪問。

4系統(tǒng)測試和結(jié)果分析

系統(tǒng)以《計算機組成原理》課程實驗為研究背景,實現(xiàn)了微指令單步、指令單步、復位CPU、刷新主存/控存顯示、微指令斷點等功能。為驗證該遠程實驗系統(tǒng)的可行性和實用性,以減1指令“DEC 0060H”為例進行測試:

(1)以任意一臺能夠連接網(wǎng)絡的計算機為客戶端工具,在Chrome瀏覽器中輸入遠程實驗系統(tǒng)發(fā)布的網(wǎng)址,獲取系統(tǒng)頁面;

(2)點擊“設備連接”按鈕,選擇實驗類型(本例選擇模型計算機實驗),連接遠程實驗設備;若設備連接成功則會彈出“連接成功”提示窗口,此時即可進行組成原理實驗操作;

(3)在主存信息顯示窗口輸入“DEC 0060H”對應的機器指令,并在0060H地址處設置其初始值為0002,在控存信息顯示窗口輸入該指令對應的微程序,觀察0060H地址處的數(shù)值在進行DEC指令后的變化情況;

(4)如圖7所示,點擊微指令單步,在“CPU數(shù)據(jù)通路”窗口中可以實時地、動態(tài)地觀察到每條微指令執(zhí)行過程中信息的流動路徑。

圖7　微指令單步信息流動畫效果圖

(5)如圖8所示,指令執(zhí)行完畢,主存信息顯示窗口中0060H地址處的值變?yōu)?001,實現(xiàn)了減1功能。

圖8　減1指令執(zhí)行后主存信息顯示窗口中的值

實驗結(jié)果表明,該遠程實驗系統(tǒng)具有良好的實用性以及交互性,不僅能滿足學生隨時隨地做實驗的需求,還能提高學生對組成原理課程學習的興趣,達到理論與實踐相結(jié)合的目的。另外,在IE 11版本瀏覽器中進行了同樣的實驗操作,獲得了與Chrome瀏覽器相同的實驗結(jié)果,驗證了該遠程實驗系統(tǒng)的跨瀏覽器的特性。因此,基于富客戶端的遠程實驗系統(tǒng)具有交互性高、實時性強、可跨瀏覽器等特點,擁有一定的推廣價值。

5結(jié)束語

基于富客戶端的遠程實驗系統(tǒng)的設計開發(fā),利用了富客戶端架構的跨瀏覽器、異步刷新、支持實時圖像動畫等技術特性,將C/S架構與B/S架構的優(yōu)點結(jié)合,實現(xiàn)了一個異地訪問實驗系統(tǒng)、操控實驗設備、完成課程實驗的遠程實驗系統(tǒng)。在客戶端頁面設計了模型機信息流最值動畫算法,利用HTML5的canvas標簽和Java Script技術實現(xiàn)了瀏覽器頁面的畫圖功能,將實驗過程中每一步的信息流執(zhí)行情況實時、動態(tài)地顯示在瀏覽器頁面上。與傳統(tǒng)實驗相比,學生無需安裝客戶端軟件或插件,只需通過瀏覽器就能以遠程的方式操控異地實驗設備,完成一個真實的實驗過程;此外,該系統(tǒng)減少了硬件設備的成本,使實驗資源得到充分利用。

參考文獻

[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結(jié)構的數(shù)控設備遠程監(jiān)控管理系統(tǒng)設計[J].機電一體化,2014(6):70-72.

[7]林土方,洪凱星,郭才福等.基于B/S架構的變壓器在線狀態(tài)監(jiān)測系統(tǒng)實現(xiàn)[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 技術的數(shù)據(jù)響應優(yōu)化[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