郝明陽，高尚兵，于 坤，潘志庚

(1. 淮陰工學(xué)院 計算機(jī)與軟件工程學(xué)院，江蘇 淮安 223001；2. 杭州師范大學(xué) 虛擬現(xiàn)實與智能系統(tǒng)研究院，杭州 311121)

信息技術(shù)的不斷發(fā)展推動了教育領(lǐng)域的深刻變革[1]。隨著虛擬仿真技術(shù)和教育科學(xué)的發(fā)展，實驗室教育信息化水平不斷提高，虛擬仿真實驗教學(xué)逐漸開展。虛擬仿真實驗教學(xué)具有實驗內(nèi)容多源化、實驗過程自動化、能力評價科學(xué)化、教學(xué)輔助智能化的特征[2]。對于需要高成本、高消耗，以及存在高風(fēng)險或極端環(huán)境、不可及或不可逆操作的大型實驗項目，虛擬仿真實驗教學(xué)優(yōu)勢明顯[3]。近年來，各學(xué)科虛擬仿真實驗教學(xué)平臺建設(shè)已經(jīng)取得了一定成果，張飛燕等[4]研究了巷道掘進(jìn)爆破安全虛擬仿真實驗教學(xué)平臺建設(shè)；楊國鑫等[5]構(gòu)建了基于Unity3D的化學(xué)虛擬仿真實驗教學(xué)平臺；朱勝雪等[6]對交通運輸虛擬仿真實驗教學(xué)平臺的相關(guān)建設(shè)經(jīng)驗進(jìn)行了探討。

課堂教學(xué)是虛擬仿真實驗教學(xué)的重要方式，虛擬仿真實驗教學(xué)平臺相關(guān)研究主要集中在虛擬仿真實驗教學(xué)資源建設(shè)和線上虛擬仿真實驗教學(xué)平臺搭建等方面，對于虛擬仿真實驗教學(xué)管理，尤其是虛擬仿真實驗課堂教學(xué)管理并未涉及。現(xiàn)有的課堂管理系統(tǒng)多為傳統(tǒng)機(jī)房管理軟件，如聯(lián)想傳奇電子教室、極域電子教室等軟件。這些軟件針對信息技術(shù)課堂教學(xué)開發(fā)，可以輔助教師輕松地管理學(xué)生，但是虛擬仿真實驗技術(shù)的發(fā)展，對課堂教學(xué)管理軟件提出了更多的功能需求，在虛擬仿真實驗課堂教學(xué)過程中，現(xiàn)有的課堂管理軟件與虛擬仿真實驗教學(xué)資源之間信息孤島和信息共享問題嚴(yán)重，導(dǎo)致軟件不能接收實驗數(shù)據(jù)及管理實驗參數(shù)與仿真結(jié)果，無法與實驗資源實現(xiàn)交互，對學(xué)生實驗過程進(jìn)行教學(xué)指導(dǎo)和干預(yù)。為此，通過對虛擬仿真實驗課堂教學(xué)流程分析，提出采用前后端分離架構(gòu)模式實現(xiàn)新型虛擬仿真實驗課堂教學(xué)管理系統(tǒng)，以解決現(xiàn)有課堂教學(xué)管理系統(tǒng)功能單一，擴(kuò)展性弱的問題。同時，采用WebSocket技術(shù)建立實驗資源模塊和系統(tǒng)之間的通訊，為實驗課堂教學(xué)管理人員實時提供課堂實驗數(shù)據(jù)，同時也支持教學(xué)人員控制學(xué)生實驗步驟；采用JSON輕量級數(shù)據(jù)交互模塊實現(xiàn)實驗資源模塊與系統(tǒng)間的數(shù)據(jù)流高效交互[7]；同時利用數(shù)據(jù)庫技術(shù)對課堂文件和仿真實驗結(jié)果進(jìn)行管理，支持課堂仿真實驗數(shù)據(jù)以班級或?qū)嶒灋閱挝坏膶?dǎo)入導(dǎo)出。

1 系統(tǒng)需求分析

隨著虛擬仿真實驗課程的增加，實驗課堂教學(xué)過程中產(chǎn)生大量的實驗參數(shù)和仿真結(jié)果，為了更好地支持課堂教學(xué)管理，提高虛擬仿真實驗課堂教學(xué)信息化程度，系統(tǒng)不僅需要具有傳統(tǒng)課堂管理功能，還應(yīng)滿足虛擬仿真實驗課堂教學(xué)特殊需求：實驗教師通過實驗進(jìn)度監(jiān)控功能輔助進(jìn)行課堂實驗進(jìn)度管理，利用在線實驗指導(dǎo)功能提示學(xué)生相關(guān)實驗操作，也可通過實驗步驟調(diào)控功能控制學(xué)生實驗進(jìn)度，調(diào)整學(xué)生實驗步驟?，F(xiàn)階段課堂教學(xué)過程中學(xué)生實驗成績管理信息化程度較低，需要手動統(tǒng)計，實驗結(jié)果統(tǒng)計功能能夠?qū)嶒瀰?shù)和仿真實驗結(jié)果自動統(tǒng)計和分析，為學(xué)生實驗學(xué)習(xí)效果評價提供依據(jù)。因此，基于前后端分離的虛擬仿真實驗課堂教學(xué)管理系統(tǒng)不僅需要具有傳統(tǒng)課堂管理軟件的課堂管理功能，還應(yīng)借助虛擬仿真、數(shù)據(jù)庫和網(wǎng)絡(luò)通信等技術(shù)，實現(xiàn)實驗課堂教學(xué)有序管理和實驗操作教學(xué)短時高效的有機(jī)結(jié)合。即虛擬仿真實驗課堂教學(xué)管理模塊需要具備以下基本功能：課堂人員管理、遠(yuǎn)程屏幕查看、課堂信息交流、課堂通知發(fā)布等；以及針對虛擬仿真實驗課堂應(yīng)用場景還需具備以下輔助功能：實驗進(jìn)度監(jiān)控、在線實驗指導(dǎo)、實驗步驟調(diào)控、實驗結(jié)果統(tǒng)計等。

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)功能設(shè)計

虛擬仿真實驗課堂教學(xué)管理系統(tǒng)的開發(fā)目的，主要是為課堂實驗教學(xué)和課堂實驗管理提供功能支持。根據(jù)虛擬仿真實驗課堂教學(xué)流程，對系統(tǒng)功能進(jìn)行模塊化設(shè)計，如圖1所示。依據(jù)不同的用戶角色，將系統(tǒng)分為三個模塊：系統(tǒng)管理模塊、課堂管理模塊和學(xué)生模塊。

圖1 軟件功能結(jié)構(gòu)圖

2.1.1系統(tǒng)管理模塊

系統(tǒng)管理模塊在整個系統(tǒng)中起著十分重要的作用，負(fù)責(zé)教學(xué)管理系統(tǒng)數(shù)據(jù)的保存與備份，是整個系統(tǒng)正常運行的基礎(chǔ)。虛擬仿真實驗課堂教學(xué)多以班級為單位，學(xué)生用戶憑學(xué)號和密碼登陸，進(jìn)入自己所在的實驗課堂學(xué)習(xí)。系統(tǒng)管理模塊僅對特定人員開放，管理員和賦予相應(yīng)權(quán)限的用戶才能訪問系統(tǒng)管理模塊。

2.1.2課堂管理模塊

系統(tǒng)中的課堂管理模塊主要面向?qū)嶒灲處?。教師登陸系統(tǒng)后通過課堂人員管理功能獲取加入課堂的用戶信息，實現(xiàn)課堂考勤統(tǒng)計。實驗投屏演示功能輔助教師進(jìn)行實驗內(nèi)容講解，教師可以將實驗資源和實驗報告等實驗相關(guān)文件通過課堂文件管理功能分發(fā)至學(xué)生。實驗進(jìn)度監(jiān)控功能對整個教學(xué)班級的實驗進(jìn)度實時匯總，并通過圖表直觀展現(xiàn)。實驗導(dǎo)調(diào)模塊包括遠(yuǎn)程屏幕查看、在線實驗指導(dǎo)和實驗步驟調(diào)控等功能，支持教師查看學(xué)生實驗圖像信息并進(jìn)行在線實驗指導(dǎo)和調(diào)控學(xué)生實驗步驟。實驗成績管理模塊負(fù)責(zé)統(tǒng)計課堂學(xué)生實驗成績并進(jìn)行分析，并將統(tǒng)計和分析結(jié)果展示并保存。

2.1.3學(xué)生模塊

學(xué)生是虛擬仿真實驗課堂教學(xué)管理的主要對象，學(xué)生模塊為學(xué)生接收課堂教學(xué)信息提供功能支持。學(xué)生模塊的主要功能包括：遠(yuǎn)程屏幕查看、課堂信息交流、課堂信息查看、遠(yuǎn)程屏幕共享、指導(dǎo)信息接收、實驗成績管理、個人信息管理等，學(xué)生可以通過該模塊收發(fā)課堂相關(guān)信息，完成課堂學(xué)習(xí)和其他信息交流。

2.2 系統(tǒng)架構(gòu)設(shè)計

虛擬仿真實驗課堂教學(xué)管理系統(tǒng)包括客戶端、服務(wù)器集群和虛擬仿真實驗設(shè)備三類重要設(shè)備節(jié)點，系統(tǒng)架構(gòu)如圖2所示?？蛻舳税ü芾矶恕⒔處煻撕蛯W(xué)生端，系統(tǒng)客戶端選擇Web瀏覽器作為主要目標(biāo)開發(fā)平臺，可以充分發(fā)揮瀏覽器的便捷性，用戶無需安裝本地程序即可登錄使用系統(tǒng)。虛擬仿真實驗設(shè)備是整個系統(tǒng)中重要的網(wǎng)絡(luò)節(jié)點控制器，實驗設(shè)備一方面接收客戶端的命令，調(diào)用相應(yīng)的控制程序指令，完成虛擬仿真實驗控制過程，另一方面向應(yīng)用服務(wù)器發(fā)送實驗進(jìn)度數(shù)據(jù)和實驗狀態(tài)等信息。應(yīng)用服務(wù)器上安裝應(yīng)用服務(wù)端軟件，接收并處理實驗資源下載、實驗數(shù)據(jù)更新、實驗步驟跳轉(zhuǎn)等實驗課堂操作請求。應(yīng)用服務(wù)器與數(shù)據(jù)庫服務(wù)器直接相連，對數(shù)據(jù)庫中的課堂實驗數(shù)據(jù)進(jìn)行操作，同時，應(yīng)用服務(wù)器通過WebSocket協(xié)議與虛擬仿真實驗設(shè)備相連，實現(xiàn)對實驗進(jìn)程的監(jiān)控和直接控制[8]。整個前端項目部署在文件服務(wù)器上，文件服務(wù)器主要提供前端靜態(tài)資源，包括用戶界面中的HTML頁、JavaScript腳本、CSS樣式文件等[9]；數(shù)據(jù)庫服務(wù)器用于實驗課堂教學(xué)管理相關(guān)數(shù)據(jù)存儲，為應(yīng)用服務(wù)器提供數(shù)據(jù)支持，保證系統(tǒng)數(shù)據(jù)請求的實時響應(yīng)。

圖2 系統(tǒng)整體架構(gòu)圖

Web應(yīng)用信息的交互通常是通過客戶端發(fā)送請求，服務(wù)器接收請求并進(jìn)行處理，然后將結(jié)果返回給客戶端完成信息呈現(xiàn)。虛擬仿真實驗設(shè)備在運行過程中，實驗步驟和實驗狀態(tài)等各種課堂實驗數(shù)據(jù)在不斷變化，傳統(tǒng)的Web應(yīng)用信息交互方式無法實現(xiàn)課堂信息在客戶端的實時展示。因此，各系統(tǒng)設(shè)備節(jié)點間的數(shù)據(jù)通信是整個系統(tǒng)設(shè)計的關(guān)鍵。在對HTML5標(biāo)準(zhǔn)中WebSocket協(xié)議進(jìn)行探究的基礎(chǔ)上，提出一種基于WebSocket的實時通信解決方案。在WebSocket提出之前，開發(fā)人員使用輪詢、長輪詢等解決方案實現(xiàn)實時交互，這種傳統(tǒng)模式存在明顯缺陷：客戶端需要不斷向服務(wù)器發(fā)送HTTP請求，在得到服務(wù)器響應(yīng)之后兩者建立連接，數(shù)據(jù)交互結(jié)束以后連接斷開，再次通信需要建立新的連接，每次通信都需要重新連接，嚴(yán)重影響系統(tǒng)實時性[10]。WebSocket可以在客戶端和服務(wù)器之間建立全雙工通信通道，實現(xiàn)真正意義上的長連接，不需要來自客戶端的輪詢請求，服務(wù)器也可以將信息推動到客戶端，用于構(gòu)建實時Web應(yīng)用非常方便。WebSocket的出現(xiàn)使得客戶端瀏覽器也能使用Socket進(jìn)行實時通信，并且在數(shù)據(jù)傳輸?shù)姆€(wěn)定性和數(shù)據(jù)傳輸規(guī)模方面與傳統(tǒng)模式相比具有顯著優(yōu)勢，客戶端也能像C/S架構(gòu)下的桌面應(yīng)用一樣與服務(wù)器進(jìn)行實時通信。虛擬仿真實驗課堂教學(xué)系統(tǒng)通過ws協(xié)議建立客戶端、虛擬仿真實驗設(shè)備與服務(wù)器的連接，使用WebSocket API提供的onopen、onmessage、onerror和onclose事件完成連接狀態(tài)監(jiān)控、課堂信息發(fā)送、連接錯誤診斷、斷開連接等功能[11]。

2.3 系統(tǒng)前后端分離設(shè)計

傳統(tǒng)的Web開發(fā)基于MVC開發(fā)模式，需要在頁面上修改大部分的業(yè)務(wù)邏輯，前端開發(fā)依賴后端，導(dǎo)致前端改動成本較大，在代碼調(diào)試、維護(hù)、代碼重用方面存在不少的問題。前后端分離架構(gòu)是一種Web應(yīng)用開發(fā)的新型架構(gòu)模式，如圖3所示，與傳統(tǒng)的MVC架構(gòu)模式不同，客戶端不是向服務(wù)器請求完整的HTML頁面，而是通過前端控制路由調(diào)用AJAX向后臺發(fā)送請求，后端提供API接口支撐前端業(yè)務(wù)數(shù)據(jù)和服務(wù)，服務(wù)器讀寫數(shù)據(jù)庫并響應(yīng)前端數(shù)據(jù)請求[9]，客戶端異步獲取數(shù)據(jù)后局部操作DOM進(jìn)行展示。相比于傳統(tǒng)的MVC模式，前后端分離架構(gòu)模式解決了傳統(tǒng)MVC架構(gòu)模式存在的種種問題，它的優(yōu)點包括：(1)前端項目中無需嵌入后端代碼，前后端解耦合，二者并行開發(fā)，提高開發(fā)效率[12]；(2)通過配置前端路由，可以實現(xiàn)按需加載頁面，無需加載網(wǎng)站所有資源，服務(wù)器不再需要解析前端頁面，提升頁面響應(yīng)速度[13]；(3)更快速地定位開發(fā)過程中出現(xiàn)的問題，客戶端的問題可由前端開發(fā)人員獨立解決，代碼重構(gòu)及可維護(hù)性增強(qiáng)。

圖3 前后端分離開發(fā)架構(gòu)圖

考慮到系統(tǒng)的開發(fā)效率、可維護(hù)性及功能擴(kuò)展性，虛擬仿真實驗課堂教學(xué)管理系統(tǒng)采用前后端分離架構(gòu)模式開發(fā)。系統(tǒng)前端負(fù)責(zé)數(shù)據(jù)顯示和請求響應(yīng)，為用戶提供系統(tǒng)登錄、課堂教學(xué)管理信息、課堂實驗進(jìn)度、在線實驗指導(dǎo)等應(yīng)用組件。用戶能夠通過前端界面提交各種請求，前端調(diào)用后端服務(wù)接口，在后端執(zhí)行業(yè)務(wù)邏輯和數(shù)據(jù)處理后，將后端返回的數(shù)據(jù)接收并在頁面上向用戶展示。后端主要包括請求響應(yīng)模塊和數(shù)據(jù)庫操作模塊，后端向前端提供系統(tǒng)控制接口，并在控制器的約束和控制下執(zhí)行業(yè)務(wù)邏輯和數(shù)據(jù)處理。系統(tǒng)采用AJAX技術(shù)來實現(xiàn)前端請求響應(yīng)和數(shù)據(jù)交互，AJAX通過JavaScript向后端發(fā)送請求并處理響應(yīng)。前端發(fā)起AJAX請求從后端控制層獲取數(shù)據(jù)后，只需修改網(wǎng)頁的某一部分即可直接呈現(xiàn)頁面，有利于頁面數(shù)據(jù)的實時動態(tài)更新。在完成前后端分離后，前后端均成為單獨的項目，每個項目都部署在單獨的服務(wù)器上，提高了頁面響應(yīng)速度，并且在用戶交互和用戶體驗上也有較大提升。

2.4 數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫服務(wù)器選擇MySQL，數(shù)據(jù)庫設(shè)計就是為了將信息化的數(shù)據(jù)統(tǒng)一、高效地組織起來。數(shù)據(jù)庫設(shè)計的好壞不僅影響系統(tǒng)性能，還會對系統(tǒng)開發(fā)、維護(hù)和功能拓展產(chǎn)生影響[14]。在對各模塊需求分析的基礎(chǔ)上，對系統(tǒng)平臺數(shù)據(jù)庫和字段進(jìn)行了設(shè)計。系統(tǒng)中主要的表有課堂人員簽到表(tb_Class_info)、課堂通知表(tb_Exp_notice)、課堂進(jìn)度表(tb_Exp_Progress)、實驗室表(tb_Exp_Room)、實驗名稱表(tb_Exp_Name)、課堂實驗成績表(tb_Exp_score)實驗明細(xì)表(tb_Exp_info)、實驗設(shè)備表(tb_Exp_equip)、管理員信息表(tb_Admin_info)、教師信息管理表(tb_Teacher_info)、學(xué)生信息管理表(tb_Student_info)等多張數(shù)據(jù)庫表單。

3 系統(tǒng)實現(xiàn)

3.1 前端開發(fā)

系統(tǒng)用戶頁面應(yīng)側(cè)重于虛擬仿真實驗課堂教學(xué)信息的分類展示，使系統(tǒng)界面分類合理、層次分明、結(jié)構(gòu)緊湊[15]。系統(tǒng)前端項目開發(fā)采用Vue.js框架，開發(fā)工具為Visual Studio Code。Vue.js是一套數(shù)據(jù)驅(qū)動的、可以自底向上逐層應(yīng)用的前端框架，與其他主流JavaScript框架例如AngularJS或React等相比，Vue.js具有語法簡潔、上手容易、自身占用空間小、運行效率高等特點[16]。Vue.js框架將頁面視為一個大的組件，又將頁面繼續(xù)拆分成多個組件，前端部分頁面組件代碼相同，通過封裝部分通用組件代碼，多個頁面可以使用同一組件，實現(xiàn)了組件復(fù)用，提高開發(fā)效率。前端項目應(yīng)用Element UI組件進(jìn)行用戶登錄、實驗課堂通知和實驗課堂導(dǎo)調(diào)等系統(tǒng)界面的快速開發(fā)。前端用戶請求和頁面跳轉(zhuǎn)通過路由(Vue-router)管理，對于需要通信的組件，先注冊路由并掛載在頁面，路由中頁面組件和URL之間是映射關(guān)系，當(dāng)路徑發(fā)生改變時，組件也會相應(yīng)進(jìn)行切換。本系統(tǒng)采用按需加載的方式加載組件，優(yōu)化了組件加載，提升了頁面響應(yīng)速度。

3.2 后端開發(fā)

后端項目開發(fā)使用語言為Java，開發(fā)工具為IntelliJ IDEA 2019，采用SpringBoot框架進(jìn)行項目搭建，SpringBoot相關(guān)的庫依賴使用Maven項目管理工具進(jìn)行管理，開發(fā)完成后打包成可執(zhí)行Jar包部署在服務(wù)器上。SprintBoot是由Pivotal團(tuán)隊提供的全新框架，解決了很多繁瑣的配置工作問題，從而使開發(fā)人員專注于Spring應(yīng)用開發(fā)而無需過多關(guān)注樣板化的配置，基于SpringBoot快速高效地搭建完整的Web應(yīng)用后臺。系統(tǒng)后端的核心功能為WebSocket的連接、管理和數(shù)據(jù)收發(fā)。SpringBoot對WebSocket服務(wù)端提供了良好的支持，在Maven文件中加入WebSocket依賴即可，開發(fā)過程中只需關(guān)注業(yè)務(wù)需求的實現(xiàn)，有效降低了系統(tǒng)實現(xiàn)難度，提升了開發(fā)效率。導(dǎo)入依賴后，后端項目添加spring-boot-starter-websocket依賴來獲得WebSocket服務(wù)端的支持，通過Configuration注解實現(xiàn)配置，路徑參數(shù)中攜帶用戶名和用戶身份信息，客戶端可通過WebSocketServer與服務(wù)器端進(jìn)行通信。

3.3 系統(tǒng)重要功能實現(xiàn)

系統(tǒng)將學(xué)生課堂實驗數(shù)據(jù)變化信息通過WebSocket實時推送至實驗進(jìn)度監(jiān)控界面，界面利用數(shù)字，顏色等顯示特性來表現(xiàn)學(xué)生實驗狀態(tài)，直觀展示課堂學(xué)生實驗實時數(shù)據(jù)的變化。課堂教學(xué)人員可以點擊任意學(xué)生圖標(biāo)，進(jìn)入在線實驗指導(dǎo)界面，觀察學(xué)生實驗畫面，通過學(xué)生實驗操作情況，選擇向?qū)W生發(fā)送實驗指導(dǎo)信息或是對學(xué)生實驗步驟做出調(diào)控。

實驗進(jìn)度監(jiān)控、在線實驗指導(dǎo)和實驗步驟調(diào)控等重要功能的實現(xiàn)過程主要分為以下步驟：

(1)自定義WebSocket中的onopen、onmessage、onerror和onclose事件內(nèi)容。重寫事件內(nèi)容，對WebSocket信息發(fā)送狀態(tài)進(jìn)行監(jiān)控。重寫onmessage的目的主要是判斷信息來源與信息類型，將來自虛擬仿真實驗設(shè)備的實驗參數(shù)和仿真結(jié)果信息儲存并展示。

(2)自定義SendMessageByIP、SendMessageByIdentity類，該實現(xiàn)類的目的是根據(jù)前端請求的路徑，分析路徑中包含的IP和角色信息，判斷需要傳輸?shù)男畔⒎N類并使用不同方法完成信息發(fā)送。

(3)實現(xiàn)WebRTC中的getUserMedia和RTCPeerVConnection接口，接口方法的主要功能是在建立客戶端之間的連接和視頻通訊，主要目的是根據(jù)前端請求信息，建立與特定客戶端之間的實時視頻通訊，查看學(xué)生實驗圖像。

在完成上面的工作之后，還要與虛擬仿真實驗運行設(shè)備聯(lián)合測試，確保系統(tǒng)能正確對應(yīng)實驗步驟和仿真結(jié)果。

4 結(jié)論

本文采用前后端分離架構(gòu)模式進(jìn)行虛擬仿真實驗課堂教學(xué)管理系統(tǒng)設(shè)計和實現(xiàn)，通過WebSocket協(xié)議實現(xiàn)了虛擬仿真實驗?zāi)K實時通信，有效解決了傳統(tǒng)課堂管理軟件功能不完善，缺少虛擬仿真實驗?zāi)K數(shù)據(jù)流交互的問題。相對傳統(tǒng)課堂教學(xué)管理軟件，本系統(tǒng)還具有實驗進(jìn)度監(jiān)控、在線實驗指導(dǎo)、實驗步驟調(diào)控等多種實驗課堂教學(xué)管理需求功能，代碼復(fù)用性和功能可擴(kuò)展性更強(qiáng)。