基于RIA的遠(yuǎn)程實(shí)驗(yàn)系統(tǒng)的設(shè)計與實(shí)現(xiàn)

張好好,肖鐵軍,趙　蕙

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

?

基于RIA的遠(yuǎn)程實(shí)驗(yàn)系統(tǒng)的設(shè)計與實(shí)現(xiàn)

張好好,肖鐵軍,趙蕙

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

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

關(guān)鍵詞RIA;遠(yuǎn)程實(shí)驗(yàn);XMLHttp Request對象;信息流最值動畫算法;Canvas標(biāo)簽;ASP.NET技術(shù)

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

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

1RIA技術(shù)

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

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

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

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

圖1　遠(yuǎn)程實(shí)驗(yàn)系統(tǒng)架構(gòu)圖

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

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

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

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

3.1客戶端

3.1.1客戶端頁面

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

圖3　系統(tǒng)Julab實(shí)驗(yàn)頁面

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

3.1.2模型機(jī)信息流最值動畫算法

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

模型機(jī)信息流最值動畫算法將CPU數(shù)據(jù)通路中的信號分為兩類,一類是與總線相關(guān)的微命令,即輸入或輸出直接經(jīng)過總線,如ARoe輸出控制信號,直接將數(shù)據(jù)輸出至IB總線;另一類是與總線無關(guān)的微命令,如算術(shù)邏輯單元ALU和移位寄存器Shifter兩部分。該算法針對JU-C1模型機(jī)數(shù)據(jù)通路結(jié)構(gòu)添加了總線拐點(diǎn)(拐點(diǎn)1和拐點(diǎn)2),將所有與總線相關(guān)的微命令進(jìn)行排序,序號(1～25)設(shè)置如圖4所示。

圖4　與總線相關(guān)的微命令序號設(shè)置圖

該算法主要包括兩大部分:一部分是定義類、對象;另一部分是畫圖。具體如下:

(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標(biāo)簽和Java Script技術(shù)進(jìn)行繪圖。首先,獲取實(shí)驗(yàn)過程中微指令單步對應(yīng)的微命令數(shù)組對象;然后,根據(jù)各個對象的Bus屬性的值將所有的微命令對象分為兩類,一類是與總線無關(guān)的微命令數(shù)組對象,該類對象實(shí)時調(diào)用對應(yīng)的Draw_unBus畫圖函數(shù),畫出此類微命令的信息流動態(tài)圖;另一類是與總線相關(guān)的微命令數(shù)組對象,通過比較此類對象中所有微命令對應(yīng)的number序號,獲取序號中的最小值min_index和最大值max_index,然后,比較min_index、max_index與IB總線上拐點(diǎn)的number序號值的大小,畫出總線上的信息流動態(tài)圖。

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

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

3.2Web服務(wù)器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5結(jié)束語

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

參考文獻(xiàn)

[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的單擺法測重力加速度遠(yuǎn)程實(shí)驗(yàn)設(shè)計[J].廣東技術(shù)師范學(xué)院學(xué)報,2015,36(5):25-28.

[5]唐小煜,袁廣宇,張廷賢.Ajax技術(shù)在遠(yuǎn)程實(shí)驗(yàn)控制方式中的應(yīng)用[J].科技資訊,2008(23):7-8.

[6]王錦煜,張秋菊.基于RIA結(jié)構(gòu)的數(shù)控設(shè)備遠(yuǎn)程監(jiān)控管理系統(tǒng)設(shè)計[J].機(jī)電一體化,2014(6):70-72.

[7]林土方,洪凱星,郭才福等.基于B/S架構(gòu)的變壓器在線狀態(tài)監(jiān)測系統(tǒng)實(shí)現(xiàn)[J].電子測量與儀器學(xué)報,2013,27(8):766-772.

[8]唐建強(qiáng).基于 RIA 技術(shù)的 Web 應(yīng)用的研究[D].北京:北京交通大學(xué),2009.

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

[10]譚力,楊宗源,謝瑾奎.Ajax 技術(shù)的數(shù)據(jù)響應(yīng)優(yōu)化[J].計算機(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]肖鐵軍.計算機(jī)組成原理[M].北京:清華大學(xué)出版社,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—),男,教授,碩士生導(dǎo)師。研究方向:嵌入式研究。趙蕙(1979—),女,博士研究生。研究方向:嵌入式。

中圖分類號TP393

文獻(xiàn)標(biāo)識碼A

文章編號1007-7820(2016)05-178-05