面向高校課堂的實時彈幕系統設計與開發

鄭遠攀 牛依青 陳廣玉 黨顯宇 王澤宇

摘 ?要：為活躍課堂氣氛，增強師生互動，設計了一種新型的實時彈幕課堂系統。采用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—），男，漢族，河南鄭州，講師，博士，研究方向：計算機視覺，深度學習。