虚拟仿真实验课堂教学管理系统的设计与实现

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

(1. 淮阴工学院 计算机与软件工程学院，江苏 淮安 223001；2. 杭州师范大学 虚拟现实与智能系统研究院，杭州 311121)

信息技术的不断发展推动了教育领域的深刻变革[1]。随着虚拟仿真技术和教育科学的发展，实验室教育信息化水平不断提高，虚拟仿真实验教学逐渐开展。虚拟仿真实验教学具有实验内容多源化、实验过程自动化、能力评价科学化、教学辅助智能化的特征[2]。对于需要高成本、高消耗，以及存在高风险或极端环境、不可及或不可逆操作的大型实验项目，虚拟仿真实验教学优势明显[3]。近年来，各学科虚拟仿真实验教学平台建设已经取得了一定成果，张飞燕等[4]研究了巷道掘进爆破安全虚拟仿真实验教学平台建设；杨国鑫等[5]构建了基于Unity3D的化学虚拟仿真实验教学平台；朱胜雪等[6]对交通运输虚拟仿真实验教学平台的相关建设经验进行了探讨。

课堂教学是虚拟仿真实验教学的重要方式，虚拟仿真实验教学平台相关研究主要集中在虚拟仿真实验教学资源建设和线上虚拟仿真实验教学平台搭建等方面，对于虚拟仿真实验教学管理，尤其是虚拟仿真实验课堂教学管理并未涉及。现有的课堂管理系统多为传统机房管理软件，如联想传奇电子教室、极域电子教室等软件。这些软件针对信息技术课堂教学开发，可以辅助教师轻松地管理学生，但是虚拟仿真实验技术的发展，对课堂教学管理软件提出了更多的功能需求，在虚拟仿真实验课堂教学过程中，现有的课堂管理软件与虚拟仿真实验教学资源之间信息孤岛和信息共享问题严重，导致软件不能接收实验数据及管理实验参数与仿真结果，无法与实验资源实现交互，对学生实验过程进行教学指导和干预。为此，通过对虚拟仿真实验课堂教学流程分析，提出采用前后端分离架构模式实现新型虚拟仿真实验课堂教学管理系统，以解决现有课堂教学管理系统功能单一，扩展性弱的问题。同时，采用WebSocket技术建立实验资源模块和系统之间的通讯，为实验课堂教学管理人员实时提供课堂实验数据，同时也支持教学人员控制学生实验步骤；采用JSON轻量级数据交互模块实现实验资源模块与系统间的数据流高效交互[7]；同时利用数据库技术对课堂文件和仿真实验结果进行管理，支持课堂仿真实验数据以班级或实验为单位的导入导出。

1 系统需求分析

随着虚拟仿真实验课程的增加，实验课堂教学过程中产生大量的实验参数和仿真结果，为了更好地支持课堂教学管理，提高虚拟仿真实验课堂教学信息化程度，系统不仅需要具有传统课堂管理功能，还应满足虚拟仿真实验课堂教学特殊需求：实验教师通过实验进度监控功能辅助进行课堂实验进度管理，利用在线实验指导功能提示学生相关实验操作，也可通过实验步骤调控功能控制学生实验进度，调整学生实验步骤。现阶段课堂教学过程中学生实验成绩管理信息化程度较低，需要手动统计，实验结果统计功能能够对实验参数和仿真实验结果自动统计和分析，为学生实验学习效果评价提供依据。因此，基于前后端分离的虚拟仿真实验课堂教学管理系统不仅需要具有传统课堂管理软件的课堂管理功能，还应借助虚拟仿真、数据库和网络通信等技术，实现实验课堂教学有序管理和实验操作教学短时高效的有机结合。即虚拟仿真实验课堂教学管理模块需要具备以下基本功能：课堂人员管理、远程屏幕查看、课堂信息交流、课堂通知发布等；以及针对虚拟仿真实验课堂应用场景还需具备以下辅助功能：实验进度监控、在线实验指导、实验步骤调控、实验结果统计等。

2 系统设计

2.1 系统功能设计

虚拟仿真实验课堂教学管理系统的开发目的，主要是为课堂实验教学和课堂实验管理提供功能支持。根据虚拟仿真实验课堂教学流程，对系统功能进行模块化设计，如图1所示。依据不同的用户角色，将系统分为三个模块：系统管理模块、课堂管理模块和学生模块。

图1 软件功能结构图

2.1.1系统管理模块

系统管理模块在整个系统中起着十分重要的作用，负责教学管理系统数据的保存与备份，是整个系统正常运行的基础。虚拟仿真实验课堂教学多以班级为单位，学生用户凭学号和密码登陆，进入自己所在的实验课堂学习。系统管理模块仅对特定人员开放，管理员和赋予相应权限的用户才能访问系统管理模块。

2.1.2课堂管理模块

系统中的课堂管理模块主要面向实验教师。教师登陆系统后通过课堂人员管理功能获取加入课堂的用户信息，实现课堂考勤统计。实验投屏演示功能辅助教师进行实验内容讲解，教师可以将实验资源和实验报告等实验相关文件通过课堂文件管理功能分发至学生。实验进度监控功能对整个教学班级的实验进度实时汇总，并通过图表直观展现。实验导调模块包括远程屏幕查看、在线实验指导和实验步骤调控等功能，支持教师查看学生实验图像信息并进行在线实验指导和调控学生实验步骤。实验成绩管理模块负责统计课堂学生实验成绩并进行分析，并将统计和分析结果展示并保存。

2.1.3学生模块

学生是虚拟仿真实验课堂教学管理的主要对象，学生模块为学生接收课堂教学信息提供功能支持。学生模块的主要功能包括：远程屏幕查看、课堂信息交流、课堂信息查看、远程屏幕共享、指导信息接收、实验成绩管理、个人信息管理等，学生可以通过该模块收发课堂相关信息，完成课堂学习和其他信息交流。

2.2 系统架构设计

虚拟仿真实验课堂教学管理系统包括客户端、服务器集群和虚拟仿真实验设备三类重要设备节点，系统架构如图2所示。客户端包括管理端、教师端和学生端，系统客户端选择Web浏览器作为主要目标开发平台，可以充分发挥浏览器的便捷性，用户无需安装本地程序即可登录使用系统。虚拟仿真实验设备是整个系统中重要的网络节点控制器，实验设备一方面接收客户端的命令，调用相应的控制程序指令，完成虚拟仿真实验控制过程，另一方面向应用服务器发送实验进度数据和实验状态等信息。应用服务器上安装应用服务端软件，接收并处理实验资源下载、实验数据更新、实验步骤跳转等实验课堂操作请求。应用服务器与数据库服务器直接相连，对数据库中的课堂实验数据进行操作，同时，应用服务器通过WebSocket协议与虚拟仿真实验设备相连，实现对实验进程的监控和直接控制[8]。整个前端项目部署在文件服务器上，文件服务器主要提供前端静态资源，包括用户界面中的HTML页、JavaScript脚本、CSS样式文件等[9]；数据库服务器用于实验课堂教学管理相关数据存储，为应用服务器提供数据支持，保证系统数据请求的实时响应。

图2 系统整体架构图

Web应用信息的交互通常是通过客户端发送请求，服务器接收请求并进行处理，然后将结果返回给客户端完成信息呈现。虚拟仿真实验设备在运行过程中，实验步骤和实验状态等各种课堂实验数据在不断变化，传统的Web应用信息交互方式无法实现课堂信息在客户端的实时展示。因此，各系统设备节点间的数据通信是整个系统设计的关键。在对HTML5标准中WebSocket协议进行探究的基础上，提出一种基于WebSocket的实时通信解决方案。在WebSocket提出之前，开发人员使用轮询、长轮询等解决方案实现实时交互，这种传统模式存在明显缺陷：客户端需要不断向服务器发送HTTP请求，在得到服务器响应之后两者建立连接，数据交互结束以后连接断开，再次通信需要建立新的连接，每次通信都需要重新连接，严重影响系统实时性[10]。WebSocket可以在客户端和服务器之间建立全双工通信通道，实现真正意义上的长连接，不需要来自客户端的轮询请求，服务器也可以将信息推动到客户端，用于构建实时Web应用非常方便。WebSocket的出现使得客户端浏览器也能使用Socket进行实时通信，并且在数据传输的稳定性和数据传输规模方面与传统模式相比具有显著优势，客户端也能像C/S架构下的桌面应用一样与服务器进行实时通信。虚拟仿真实验课堂教学系统通过ws协议建立客户端、虚拟仿真实验设备与服务器的连接，使用WebSocket API提供的onopen、onmessage、onerror和onclose事件完成连接状态监控、课堂信息发送、连接错误诊断、断开连接等功能[11]。

2.3 系统前后端分离设计

传统的Web开发基于MVC开发模式，需要在页面上修改大部分的业务逻辑，前端开发依赖后端，导致前端改动成本较大，在代码调试、维护、代码重用方面存在不少的问题。前后端分离架构是一种Web应用开发的新型架构模式，如图3所示，与传统的MVC架构模式不同，客户端不是向服务器请求完整的HTML页面，而是通过前端控制路由调用AJAX向后台发送请求，后端提供API接口支撑前端业务数据和服务，服务器读写数据库并响应前端数据请求[9]，客户端异步获取数据后局部操作DOM进行展示。相比于传统的MVC模式，前后端分离架构模式解决了传统MVC架构模式存在的种种问题，它的优点包括：(1)前端项目中无需嵌入后端代码，前后端解耦合，二者并行开发，提高开发效率[12]；(2)通过配置前端路由，可以实现按需加载页面，无需加载网站所有资源，服务器不再需要解析前端页面，提升页面响应速度[13]；(3)更快速地定位开发过程中出现的问题，客户端的问题可由前端开发人员独立解决，代码重构及可维护性增强。

图3 前后端分离开发架构图

考虑到系统的开发效率、可维护性及功能扩展性，虚拟仿真实验课堂教学管理系统采用前后端分离架构模式开发。系统前端负责数据显示和请求响应，为用户提供系统登录、课堂教学管理信息、课堂实验进度、在线实验指导等应用组件。用户能够通过前端界面提交各种请求，前端调用后端服务接口，在后端执行业务逻辑和数据处理后，将后端返回的数据接收并在页面上向用户展示。后端主要包括请求响应模块和数据库操作模块，后端向前端提供系统控制接口，并在控制器的约束和控制下执行业务逻辑和数据处理。系统采用AJAX技术来实现前端请求响应和数据交互，AJAX通过JavaScript向后端发送请求并处理响应。前端发起AJAX请求从后端控制层获取数据后，只需修改网页的某一部分即可直接呈现页面，有利于页面数据的实时动态更新。在完成前后端分离后，前后端均成为单独的项目，每个项目都部署在单独的服务器上，提高了页面响应速度，并且在用户交互和用户体验上也有较大提升。

2.4 数据库设计

数据库服务器选择MySQL，数据库设计就是为了将信息化的数据统一、高效地组织起来。数据库设计的好坏不仅影响系统性能，还会对系统开发、维护和功能拓展产生影响[14]。在对各模块需求分析的基础上，对系统平台数据库和字段进行了设计。系统中主要的表有课堂人员签到表(tb_Class_info)、课堂通知表(tb_Exp_notice)、课堂进度表(tb_Exp_Progress)、实验室表(tb_Exp_Room)、实验名称表(tb_Exp_Name)、课堂实验成绩表(tb_Exp_score)实验明细表(tb_Exp_info)、实验设备表(tb_Exp_equip)、管理员信息表(tb_Admin_info)、教师信息管理表(tb_Teacher_info)、学生信息管理表(tb_Student_info)等多张数据库表单。

3 系统实现

3.1 前端开发

系统用户页面应侧重于虚拟仿真实验课堂教学信息的分类展示，使系统界面分类合理、层次分明、结构紧凑[15]。系统前端项目开发采用Vue.js框架，开发工具为Visual Studio Code。Vue.js是一套数据驱动的、可以自底向上逐层应用的前端框架，与其他主流JavaScript框架例如AngularJS或React等相比，Vue.js具有语法简洁、上手容易、自身占用空间小、运行效率高等特点[16]。Vue.js框架将页面视为一个大的组件，又将页面继续拆分成多个组件，前端部分页面组件代码相同，通过封装部分通用组件代码，多个页面可以使用同一组件，实现了组件复用，提高开发效率。前端项目应用Element UI组件进行用户登录、实验课堂通知和实验课堂导调等系统界面的快速开发。前端用户请求和页面跳转通过路由(Vue-router)管理，对于需要通信的组件，先注册路由并挂载在页面，路由中页面组件和URL之间是映射关系，当路径发生改变时，组件也会相应进行切换。本系统采用按需加载的方式加载组件，优化了组件加载，提升了页面响应速度。

3.2 后端开发

后端项目开发使用语言为Java，开发工具为IntelliJ IDEA 2019，采用SpringBoot框架进行项目搭建，SpringBoot相关的库依赖使用Maven项目管理工具进行管理，开发完成后打包成可执行Jar包部署在服务器上。SprintBoot是由Pivotal团队提供的全新框架，解决了很多繁琐的配置工作问题，从而使开发人员专注于Spring应用开发而无需过多关注样板化的配置，基于SpringBoot快速高效地搭建完整的Web应用后台。系统后端的核心功能为WebSocket的连接、管理和数据收发。SpringBoot对WebSocket服务端提供了良好的支持，在Maven文件中加入WebSocket依赖即可，开发过程中只需关注业务需求的实现，有效降低了系统实现难度，提升了开发效率。导入依赖后，后端项目添加spring-boot-starter-websocket依赖来获得WebSocket服务端的支持，通过Configuration注解实现配置，路径参数中携带用户名和用户身份信息，客户端可通过WebSocketServer与服务器端进行通信。

3.3 系统重要功能实现

系统将学生课堂实验数据变化信息通过WebSocket实时推送至实验进度监控界面，界面利用数字，颜色等显示特性来表现学生实验状态，直观展示课堂学生实验实时数据的变化。课堂教学人员可以点击任意学生图标，进入在线实验指导界面，观察学生实验画面，通过学生实验操作情况，选择向学生发送实验指导信息或是对学生实验步骤做出调控。

实验进度监控、在线实验指导和实验步骤调控等重要功能的实现过程主要分为以下步骤：

(1)自定义WebSocket中的onopen、onmessage、onerror和onclose事件内容。重写事件内容，对WebSocket信息发送状态进行监控。重写onmessage的目的主要是判断信息来源与信息类型，将来自虚拟仿真实验设备的实验参数和仿真结果信息储存并展示。

(2)自定义SendMessageByIP、SendMessageByIdentity类，该实现类的目的是根据前端请求的路径，分析路径中包含的IP和角色信息，判断需要传输的信息种类并使用不同方法完成信息发送。

(3)实现WebRTC中的getUserMedia和RTCPeerVConnection接口，接口方法的主要功能是在建立客户端之间的连接和视频通讯，主要目的是根据前端请求信息，建立与特定客户端之间的实时视频通讯，查看学生实验图像。

在完成上面的工作之后，还要与虚拟仿真实验运行设备联合测试，确保系统能正确对应实验步骤和仿真结果。

4 结论

本文采用前后端分离架构模式进行虚拟仿真实验课堂教学管理系统设计和实现，通过WebSocket协议实现了虚拟仿真实验模块实时通信，有效解决了传统课堂管理软件功能不完善，缺少虚拟仿真实验模块数据流交互的问题。相对传统课堂教学管理软件，本系统还具有实验进度监控、在线实验指导、实验步骤调控等多种实验课堂教学管理需求功能，代码复用性和功能可扩展性更强。