基于Socket.IO的互動教學(xué)即時反饋系統(tǒng)的設(shè)計與實現(xiàn)

李廣文

一、互動教學(xué)即時反饋系統(tǒng)

互動反饋系統(tǒng)(Interactive Response System，簡稱IRS)是一種以多媒體、計算機網(wǎng)絡(luò)等現(xiàn)代信息技術(shù)為基礎(chǔ)的網(wǎng)絡(luò)平臺[1]?；臃答佅到y(tǒng)使學(xué)生人手一個設(shè)備，具有測查、統(tǒng)計和記錄功能，實現(xiàn)即時反饋和互動。目前，市場上流行的各種互動反饋系統(tǒng)產(chǎn)品都使用無線通訊技術(shù)，遙控器由早期的紅外線(IR)逐步進(jìn)化到采用無線射頻(RF)技術(shù)。投票是互動反饋系統(tǒng)的基本功能，題型一般為選擇題或是非題，題目可以是純文字的或帶有多媒體素材的題干或選項。當(dāng)學(xué)生提交答案后，系統(tǒng)可以顯示出長條圖、圓餅圖或其他類型的統(tǒng)計圖。

互動反饋系統(tǒng)普遍應(yīng)用于課堂形成性評量，教師可在教學(xué)過程中隨時穿插問題，以了解學(xué)生對知識的掌握情況，達(dá)到實時教學(xué)(Just-in-Time Teaching，JiTT)的效果。研究發(fā)現(xiàn)，互動反饋系統(tǒng)可以提高學(xué)生的課堂參與度，促進(jìn)學(xué)生對于復(fù)雜學(xué)科的理解，提高學(xué)生學(xué)習(xí)的興趣和愉悅感，增強課堂互動性。尤其是IRS的匿名特性，能使學(xué)生在沒有壓力的狀態(tài)下提供個人答案，不用擔(dān)心被其他同學(xué)取笑[2]。

隨著一對一數(shù)字化學(xué)習(xí)環(huán)境的出現(xiàn)和電子書包逐漸進(jìn)入課堂教學(xué)，可以利用現(xiàn)有無線網(wǎng)絡(luò)環(huán)境，通過Web應(yīng)用方式開展互動即時反饋教學(xué)，這是值得研究的一個方向，其中關(guān)鍵是要解決即時性問題。

二、HTML5與WebSocket

以往的Web應(yīng)用為了實現(xiàn)即時通訊，都是采用輪詢的方式，即每隔特定時間由瀏覽器向服務(wù)器發(fā)出HTTP request，然后服務(wù)器將最新的數(shù)據(jù)返回客戶端的瀏覽器。這種傳統(tǒng)的模式具有明顯的缺點，即瀏覽器需要不斷地向服務(wù)器發(fā)出請求，這樣會占用很多帶寬和服務(wù)器資源。

針對這種狀況，HTML5定義了WebSocket協(xié)議，能更好地節(jié)省服務(wù)器資源和帶寬，并達(dá)到實時通訊。WebSocket是HTML5的一種新的通信協(xié)議，是下一代“客戶端—服務(wù)器”的異步通信方法。它使用ws或wss協(xié)議，實現(xiàn)了任意的客戶端(瀏覽器)和服務(wù)器程序的雙向通訊。在WebSocket中，瀏覽器通過JavaScript向服務(wù)器發(fā)出建立WebSocket連接的請求，連接建立以后，兩者之間就可以直接進(jìn)行數(shù)據(jù)傳送，同時還允許跨域通信。因為WebSocket連接本質(zhì)上就是一個TCP連接，所以在數(shù)據(jù)傳輸穩(wěn)定性和數(shù)據(jù)傳輸量大小方面，和輪詢以及Comet技術(shù)相比，具有很大的性能優(yōu)勢。

在流量和負(fù)載增大的情況下，WebSocket方案相比傳統(tǒng)輪詢方案有極大的性能優(yōu)勢(如圖1所示)。因此，WebSocket將是小型實時Web應(yīng)用的首選方案，十分適合互動即時反饋系統(tǒng)的開發(fā)。

圖1 輪詢和WebSocket實現(xiàn)方式的網(wǎng)絡(luò)負(fù)載對比圖[3]

三、Node.js與Socket.IO

Node.js是一個服務(wù)器端的解決方案，基于V8引擎開發(fā)，提供了高效的服務(wù)器端JavaScript框架運行環(huán)境，可以運行JavaScript，并可作為Web服務(wù)來處理各種HTTP請求。Node.js通過大量擴展庫(模塊)實現(xiàn)各種網(wǎng)絡(luò)、HTTP、文件系統(tǒng)、連接數(shù)據(jù)庫等功能。Socket.IO是Node.js的一個擴展模塊，基于Node.js并簡化了WebSocket，統(tǒng)一了通信的API，使得交互式、多用戶Web應(yīng)用成為可能。Socket.IO支持WebSocket，F(xiàn)lash Socket，AJAX long-polling，AJAX multipart streaming，F(xiàn)orever IFrame和JSONP polling，有效解決了實時通信的問題，統(tǒng)一了服務(wù)端與客戶端的編程方式，服務(wù)器端和客戶端可以互發(fā)事件，互發(fā)數(shù)據(jù)，相互通信，甚至支持服務(wù)器端對所有客戶端的數(shù)據(jù)廣播。

在Node.js中，可以通過創(chuàng)建一個典型的HTTP服務(wù)器，把服務(wù)器的實例傳遞到Socket.IO，再創(chuàng)建連接、斷開連接、建立消息監(jiān)聽器，跟在客戶端一樣。Node.js通過socket.emit()函數(shù)向當(dāng)前客戶端發(fā)送自定義消息和參數(shù)，也可以通過socket.broadcast.emit()廣播發(fā)送給所有客戶端，同時服務(wù)器端和客戶端均通過socket.on()響應(yīng)特定消息并觸發(fā)相應(yīng)的處理。一個簡單的服務(wù)器端JS腳本(app.js)如下：

由此可見，Node.js與Socket.IO的編程相當(dāng)簡單，可以快速構(gòu)建多用戶交互和即時性的Web應(yīng)用。

四、Node.js和Socket.IO聯(lián)合開發(fā)

Web模式的互動教學(xué)即時反饋系統(tǒng)分為服務(wù)器端、教師端和學(xué)生端三部分，教師和學(xué)生端通過網(wǎng)頁形式，均視為Node.js的客戶端。以最簡單的投票和單選功能為例，具體介紹如何運用Node.js和Socket.IO聯(lián)合開發(fā)互動教學(xué)即時反饋系統(tǒng)。

首先，服務(wù)器端采用express框架，express是Node.js的一種Web框架。在服務(wù)器端腳本中創(chuàng)建express實例和Socket.IO，并設(shè)置好連接監(jiān)聽器，專門處理教師端和學(xué)生端發(fā)送的消息，并將處理結(jié)果以消息形式發(fā)送給相應(yīng)的客戶：

上述便是互動教學(xué)即時反饋系統(tǒng)最基本的代碼。實際上為了實現(xiàn)更方便快捷的師生交互和更豐富的功能，各程序的代碼還是較為復(fù)雜的，但最核心的還是Node.js和Socket.IO的消息發(fā)送和事件驅(qū)動機制?；贜ode.js和Socket.IO聯(lián)合開發(fā)的互動教學(xué)即時反饋系統(tǒng)如圖2所示。

圖2 基于Node.js和Socket.IO聯(lián)合開發(fā)的互動教學(xué)即時反饋系統(tǒng)

五、結(jié)束語

隨著信息技術(shù)與學(xué)科的整合，信息技術(shù)將在中小學(xué)課堂上發(fā)揮更大的作用，基于Socket.IO設(shè)計并實現(xiàn)課堂互動教學(xué)即時反饋系統(tǒng)是一個新的嘗試，也是一種簡單、有效而又成本低廉的IRS實現(xiàn)方式。相信不久的將來，Socket.IO技術(shù)將為一對一數(shù)字化學(xué)習(xí)環(huán)境和電子書包學(xué)習(xí)方式提供更多快捷、實用的即時課堂互動教學(xué)工具，促進(jìn)信息技術(shù)與課堂教學(xué)的深度融合。

[1]馬宗振.互動反饋系統(tǒng)的教學(xué)功能和應(yīng)用設(shè)計[J].中小學(xué)信息技術(shù)教育,2007(2):11-14.

[2]王緒溢.數(shù)字教室中有效學(xué)習(xí)的教學(xué)工具：實時反饋系統(tǒng)[EB/OL].http://www.945enet.com.tw/epaper/contents/ha/090/02.htm.

[3]Peter Lubbers, Frank Greco.HTML5 Web Sockets: A Quantum Leap in Scalability for the Web[EB/OL].http://www.websocket.org/quantum.html.