面向高校课堂的实时弹幕系统设计与开发

郑远攀 牛依青 陈广玉 党显宇 王泽宇

摘  要：为活跃课堂气氛，增强师生互动，设计了一种新型的实时弹幕课堂系统。采用C/S与B/S混合模式架构，结合MVC体系结构完成系统整体设计。系统分PC端功能模块和移动端功能模块，通过TCP协议，数据以JSON串形式与服务器端通信。除基本功能外，在移动端使用Highcharts技术，实现了弹幕数据可视化显示与分析。结合网络爬虫技术和确定有限自动机（DFA）算法，开发了敏感词汇过滤功能。实践证明，该系统提高了学生对教学过程的参与性和专注度，具有可行性和推广价值。

关键词：高校课堂;弹幕系统;混合模式;数据可视化;DFA敏感词过滤

中图分类号：TP311      文献标识码：A文章编号：2096-4706（2021）21-0006-05

Abstract： In order to activate the classroom atmosphere， enhance the interaction between teachers and students， a new real-time bullet screen classroom system is designed. In the overall system design， the combination of the C/S and B/S hybrid mode architecture and the MVC architecture is adopted. The system is divided into a PC terminal function module and a mobile terminal function module. Through the TCP protocol， data is communicated with the server terminal in the form of a JSON string. In addition to the basic functions of each module， Highcharts technology is used in the mobile terminal to realize the visual display and analysis function of the barrage data. Combined with the web crawler technology and the DFA algorithm， the sensitive vocabulary filtering function is developed. Practice has proved that the system improves students participation and concentration in the teaching process， and has feasibility and popularization value.

Keywords： college classroom; bullet screen system; hybrid mode; data visualization; DFA sensitive vocabulary filtering

0  引  言

在大學课堂，师生之间的互动性直接影响着教师的教学质量和学生的学习积极性。但师生之间的高频互动在大学课堂是不常见的，上课时教师主要依据PPT课件讲授课程，学生较少发言，师生之间交流很少。这种教学模式很可能导致学生丧失学习积极性，学习效率低下，甚至影响课程的考核。学生在课堂上呈现出来的问题逐渐引起教育工作者的重视，于是，新型的教学模式被提出用以改善此类问题。例如，叶冬连等人[1]提出基于翻转课堂的教学模式以增强师生之间的互动，但是此方法对教师和学生的各方面要求较高，加之课时有限，不能较好地达到预期的效果。石映辉等人[2]对智慧教室环境下高校师生互动行为进行分析，通过与传统多媒体教学模式对比发现：智慧课堂教学模式下的师生互动明显改善，其课堂教学在降低教师讲授频率的同时提高了师生的互动频率，学生则表现出参与教学实践的更高主动性。但此模式一定程度上忽视了学生的自主学习与自主探究，导致部分学生缺乏独立思考分析问题、解决问题的能力，无法培育创新型人才[3]。随着互联网技术的发展，弹幕视频的兴起，吸引了更多年轻人对这一领域的探索，而在校大学生是这一群年轻人中的主要代表[4]。于是，一些教师尝试在大学课堂上引入弹幕技术，并且取得了不错的效果。代方梅等人[5]将弹幕技术应用到高校体育理论课教学，张畅等人[6]将弹幕技术应用在对外汉语教学，以及刘爽等人[7]设计的基于视频弹幕技术的微课程等，实验证明，学生对此方法的教学模式认可度较高，师生之间的互动性和学生的学习积极性明显提高，效果反馈良好。因而，弹幕技术逐渐成为教学改革模式的重要途径之一。但是，使用单纯的弹幕技术，存在一定的改进空间。例如，教师在课堂上无法控制弹幕内容和设置弹幕规则，弹幕反馈率较低，课堂教学过于娱乐化等问题。这些问题在一定程度上会对教学内容及课堂纪律产生不利影响，如何解决教师使用弹幕技术在教学过程中遇到的上述问题已成为未来弹幕教学发展的关键因素。

本文以此为背景，经过调研分析决定开发一款面向大学课堂的实时弹幕教学系统。论文首先设计系统的整体功能架构，建立起完整的系统开发流程，考虑到灵活性与拓展性，系统在结构设计方面坚持独立原则，其中浏览器端功能实现不依赖于任何APP，由手机端浏览器独自实现;然后详细介绍了开发过程中的技术难点以及典型算法;最后，结合测试实验，具体描述系统的功能实现。

1  系统设计

1.1  系统框架和功能设计

弹幕课堂系统主要由三部分构成：PC端、移动端及服务器端。系统采用C/S+B/S的架构，其中C/S结构中的Server端为后台Web服务器，C/S结构中Client端是指PC端，使用Qt5框架，采用C++编程语言，实现系统的可视化界面。B/S架构中的Server同C/S结构中的Server，使用Nginx和uWSGI技術，主要进行数据存储和计算，并提供相应的接口服务;B/S结构中的Client端主要指移动端浏览器，移动端采用Django框架，使用Python编程语言，用于学生登入系统、发射弹幕等功能操作。除此之外，系统的Client端设置了两大功能模块，分别为：面向教师的功能管理模块和面向学生的功能管理模块，前者除了为教师提供基础的功能模块外，还包括弹幕数据导出等功能，方便教师课下分析学生的上课状态，解答学生在课堂上遗留的问题等。后者主要为学生提供基础的信息管理功能，包括注册/登录、个人信息修改以及数据显示与分析等，方便学生在课下对课程进行回顾。

弹幕课堂系统采用MVC体系结构，通过TCP/IP协议实现各个端口间的数据传输[8]，主要分为：应用表示层、业务逻辑层及资源访问层。首先学生、教师通过应用表示层来访问系统，用户在进行身份确认之后，取得相应的权限，输入信息进入系统，信息的提交及处理是由业务逻辑层实现，业务逻辑层将输入的信息提交到资源访问层，通过资源访问层将信息与数据库中的数据进行匹配，并将结果反馈到表示层。系统总体架构如图1所示。

弹幕课堂的功能设计同样分为三部分：PC端（教师端）、移动端（学生端）及服务器端。PC端是由教师在教师机上操作，其功能为基础的系统管理，如：设置弹幕字体、设置弹幕速度及透明度、是否允许学生发射弹幕等，方便教师对学生在使用系统过程中产生的突发情况进行处理。除此之外，弹幕数据导出功能可以帮助教师查询本节课程学生的发言及提问情况，方便教师对课程做出针对性分析，及时改变教学方式等。移动端是由学生通过手机浏览器进行操作，不需要依赖于特定APP，这也是和其他弹幕课堂系统的不同之处[9]。在移动端，系统除了基础的功能操作外，如：登录/注册、发射普通/提问弹幕及设置弹幕颜色等，还添加了数据分析及敏感词汇过滤功能。一方面方便学生查询已发射的弹幕信息，另一方面对净化课堂气氛具有至关重要的作用。服务器端主要为PC端和移动端提供数据存储、交换及信息处理功能，保障系统的正常运行。其具体功能设计如图2所示。

1.2  系统流程设计

系统的流程设计由两部分组成，这两部分紧密相连但又相互独立，紧密相连表现为：首先由教师在教师机上创建逻辑房间，生成房间二维码，然后再由学生通过手机上的浏览器扫描房间二维码，进行注册/登录，最后在系统内进行相应操作。两者相互独立表现为：当学生再次登录系统时，只需要输入相应的房间号即可进入系统，无须输入账户名和密码。系统详细的流程设计如图3所示。

由图3可知，PC端与移动端之间通过二维码连接，首先，教师将服务器地址、房间号及内置的系统登录界面地址等信息通过TCP协议传输给系统的业务逻辑层，然后结合二维码规范生成技术，将信息封装成二维码，最后通过Qt的绘图功能，使图像显示在教师机上，通过投影仪等教学辅助工具将二维码图像映射到幕布。在移动端，学生使用手机浏览器自带的“扫一扫”功能，扫描并解析二维码，获取封装的信息，显示系统登录/注册界面。其PC端与移动端通讯流程如图4所示。

2  敏感词汇过滤算法分析

为防止敏感词汇被使用并投影到幕布，系统默认设置了敏感词汇过滤功能。利用爬虫技术收集网络上使用频率较高的敏感词（Sensitive_word）[10]，并将敏感词构建成敏感词库，再使用合适的过滤算法将敏感词进行过滤。调研发现，常用的敏感词过滤方法有四种：（1）将敏感词直接组织成String后，使用indexOf方法来查询和过滤。（2）传统的敏感词存储在数据库中，使用SQL语句查询和过滤。（3）利用Lucene建立分词索引来查询。（4）利用确定有限自动机（Deterministic Finite Automaton， DFA）算法实现敏感词过滤。

首先，项目收集到的敏感词有几千条，方案（1）使String长度过长，查询速度过慢，与系统实时性要求相违背，因此舍弃方案（1）。其次，为了便于将来的可扩展性，最小化对数据库的依赖，决定放弃方案（2）。然后Lucene本身被用作本地索引，当敏感词更新后Lucene需要重新触发并更新索引，系统本着轻量原则不拟引入更多的库，方案（3）也不适合本系统。综合考虑系统的各项特点，选定方案（4）即DFA算法为系统的敏感词过滤算法。

在实现敏感词过滤算法中，DFA是比较好的实现算法[11]。它是通过事件和当前的状态得到下一个状态，即事件+状态=下一个状态。在文本过滤中，最重要的目标是减少计算量，而在DFA中，基本没有计算，只是状态的转移。当要把敏感词汇列表构造成一个状态机，用矩阵来实现是比较麻烦的，而树结构为DFA算法提供了一种比较简单的实现方式[12]。

在本文中，DFA算法的核心是建立了以敏感词为基础的敏感词树。由于系统主要采用Python编程语言，使用dict函数来存储已构建完成的敏感词树。首先，将收集的Sensitive_word字符串转化为字符，以此遍历所有的Sensitive_word字符，如果dict中不存在该字符为首的敏感词树，则构建此树。具体构建过程如下：首先创建敏感词树的root节点，将Sensitive_word的第一个字符作为键Key，值Value作为另一个dict，该值Value对应的dict的Key储存第二个字符，如果存在第三个字符，则对应到第二个字符为Key的Value中，这个Value仍然是一个dict，以此类推下去，直到最后一个字符。最后一个字符对应的Value依然是一个dict，只不过这个dict只需要储存一个结束标志即可，例如，在本系统中储存一个{'＼x00'： 0}，作为敏感词树构造结束的标志，这个标志也是一个dict，表示这个Value对应的Key是敏感词的尾字符。具体流程如图5所示。

系统在敏感词检索时，首先将输入的文本字符串转换为字符，使每个字符与构建的敏感词树相匹配，如果匹配不了相应的子树，则直接跳过，当检测到某一个字符时，发现敏感词库中有相应的子树，将此子树记为tree_1，然后再依次遍历下一个字符是不是子树tree_1的子节点，如果是，再确定该字符是否是tree_1的叶节点，倘若是，则说明成功匹配到了一个敏感词。依据敏感词，系统将对输入的文本进行屏蔽，并提示学生禁止使用敏感词匯。

3  系统实现

为了保证系统的正常运行，对部署的硬件设备具有一定的要求。PC端：教师机CPU主频3.4 GHz+，内存4 GB+，硬盘100 GB+。移动端：手机CPU主频1.5 GHz+，内存2 GB+，储存容量32 GB+。服务器端：主机CPU主频3.9 GHz+，内存8 GB+，硬盘1 TB+。

按照部署要求，在郑州轻工业大学的一间多媒体教室进行测试，将系统安装在教师机上，依据使用说明，实现系统各项功能，完成测试实验。

3.1  PC端功能实现

PC端（教师端）的实现使用了Qt5框架和C++编程语言。教师输入服务器地址和房间号之后，PC端与服务器端建立TCP链接，PC端向服务端发送房间号，服务端收到信息后检查房间号是否存在，或过长（应小于等于20个字符），并将信息以JSON串的格式反馈给PC端。图6是PC端实现界面，除此之外，另外包括显示二维码、设置弹幕字体、速度和透明度，是否允许弹幕、提问等功能。

3.2  移动端功能实现

移动端（学生端）的实现使用了Django框架和Python、JavaScript等编程语言。学生使用Android、IOS等系统手机上的浏览器扫描PC端生成的二维码，便可进行注册、登录系统、修改个人密码等，除此之外，系统已实现了3.2.1～3.2.3节涉及的功能。

3.2.1  发射普通/提问弹幕

学生只需要在系统输入需要发送的弹幕内容，选择相应的弹幕颜色，在弹幕类型中选择普通或提问，点击发射按钮，便可实现此功能。如图7所示，其中图7（a）为移动端弹幕发射界面，图7（b）为弹幕的PC端实现界面。

3.2.2  弹幕数据分析

为了方便学生查看已发射的弹幕信息，系统提供了弹幕数据可视化查询功能，利用Highcharts技术，结合弹幕信息，将数据以图表的形式显示。Highcharts是一个用纯JavaScript编写的一个图表库，可以简单便捷的将交互性的图表添加到Web网站或Web应用程序中，支持的图表类型有折线图、面积图、直方图、饼图、散点图和综合图表。本系统使用Highcharts的柱状直方图形式对数据进行展示，其效果如图8所示。

系统默认设置近七日的数据信息显示，图8（a）中“总量”表示为在同一个房间，所有学生发射的弹幕总数量，其中灰色部分表示提问总量，蓝色部分表示普通弹幕总量。“我的”表示学生个人发射弹幕的总数量，其中棕黄色部分表示个人提问总数量，绿色部分表示个人普通弹幕总数量。图8（b）中蓝色部分表示个人提问占总提问的百分比，灰色部分表示个人发射普通弹幕占总普通弹幕的百分比。最后显示近七日个人提问问题信息。

3.2.3  敏感词汇过滤

在限制输入文本字数的基础上，系统自动检测输入的文本是否含有敏感词，如果含有敏感词，系统禁止发射弹幕，并提示学生禁止使用敏感文字，如图9所示。

3.3  服务器端功能实现

服务器在Window平台上搭建，采用的是Apache HTTP Server和MySQL数据库。后台服务器为系统提供基本的信息服务接口，包括基本信息获取、统一身份认证、集中权限管理、统一事件记录等基本服务。为了保证系统中各个子系统的安全性和便利性，系统接口设计采用了一定的规范。首先，参数中包含敏感信息的接口使用POST方法代替GET方法，用来防止敏感信息泄露。其次，接口返回给PC端或者移动端的数据格式采用常用的JSON格式，该格式比较轻巧、简洁，每个平台都有成熟的解析方案。同时，所有返回的JSON信息都符合统一的格式规范，方便PC端或移动端做进一步处理。

4  结  论

本文设计与开发的面向高校课堂的实时弹幕系统具有操作简单，便于使用以及对软硬件环境要求不高等特点，对课堂互动教学活动具有显著的正向支持作用。弹幕课堂系统的测试情况表明，系统对活跃课堂气氛，增强师生之间的互动性具有明显效果。系统的下一步改进之处在于，由于网络敏感词汇更新速度较快，基于网络爬虫的手动敏感词汇收集、使用具有一定的局限性，仍有许多敏感词汇未及时收集，使得系统的敏感词汇过滤功能存在一定的不足。后期的研究开发工作将结合神经网络技术实现敏感词汇在线收集、检测功能，进一步对系统进行完善。

参考文献：

[1] 叶冬连，万昆，曾婷，等.基于翻转课堂的参与式教学模式师生互动效果研究 [J].现代教育技术，2014，24（12）：77-83.

[2] 石映辉，彭常玲，张婧曼，等.智慧教室环境下的高校师生互动行为分析 [J].现代教育技术，2019，29（1）：45-51.

[3] 马秀麟，赵国庆，邬彤.翻转课堂促进大学生自主学习能力发展的实证研究——基于大学计算机公共课的实践 [J].中国电化教育，2016（7）：99-106+136.

[4] 张军，税少兵.互联网时代的弹幕视频探析 [J].出版广角，2016（7）：70-72.

[5] 代方梅，杨民.弹幕技术应用于高校体育理论课教学的实证研究 [J].湖北体育科技，2017，36（10）：919-921.

[6] 张畅.弹幕技术在对外汉语教学中的应用研究 [J].亚太教育，2016（24）：129-131.

[7] 刘爽，郑燕林.基于视频弹幕技术的微课程交互设计 [J].现代远距离教育，2015（4）：64-69.

[8] ANICHE M，BAVOTA G，TREUDE C，et al. Code smells for Model-View-Controller architectures [J].Empirical Software Engineering，2018，23（4）：2121-2157.

[9] 王帅国.雨课堂：移动互联网与大数据背景下的智慧教学工具 [J].现代教育技术，2017，27（5）：26-32.

[10] 朱颢东，薛校博，李红婵，等.海量数据下基于Hadoop的分布式FP-Growth算法 [J].轻工学报，2018，33（5）：97-102+108.

[11] 刘利俊.一种关键字过滤系统下的DFA分词算法设计与优化 [J].计算机应用与软件，2012，29（1）：284-287.

[12] 许黎.基于DFA进行规则组合的算法研究 [J].网络安全技术与应用，2019（8）：38-40.

作者简介：郑远攀（1983—），男，汉族，河南郑州人，副教授，博士， 研究方向：应急平台信息技术，人工智能，大数据;图像处理与模式识别;通讯作者：牛依青（1998—），女，汉族，河南郑州人，硕士在读，研究方向：图像处理，计算机视觉;陈广玉（1996—），女，汉族，河南信阳人，硕士在读，研究方向：图像处理，计算机视觉;党显宇（1999—），男，汉族，河南驻马店人，学士在读，研究方向：人工智能，大数据;王泽宇（1989—），男，汉族，河南郑州，讲师，博士，研究方向：计算机视觉，深度学习。