Node.js與Express技術在計算機課程教學中的應用 

崔瑩++劉兵

摘要：Node.js及其開發框架Express目前廣泛應用于高并發、高性能網絡，該技術最突出的優點是支持簡潔高效的多并發服務。近年來，計算機軟件逐步應用于教學，由單純給學生傳授知識向訓練學生的實踐技能轉變。為了搭建理想的實時互動的軟件教學課堂環境，使用Node.js 和Express技術設計了在線畫圖交流平臺和課堂測試小工具兩個軟件，探討該技術在課堂上的推廣應用。

關鍵詞：Node.js；Express；高并發；實時互動

DOIDOI：10.11907/rjdk.161308

中圖分類號：G434

文獻標識碼：A文章編號文章編號：16727800（2016）009019003

基金項目基金項目：安徽省教學研究一般項目（2013jyxm353）

作者簡介作者簡介：崔瑩（1981-），女，安徽銅陵人，碩士，銅陵職業技術學院信息系講師，研究方向為數據庫、網站制作、前端技術；劉兵（1974-），男，安徽肥東人，碩士，銅陵職業技術學院信息系副教授，研究方向為軟件開發與數據庫。

0引言

隨著計算機技術的發展，計算機教學對教師組織課堂要求越來越高。如今，計算機軟件技術的學習更加注重應用技能培養，因而學習越來越強調互動與共享。與單獨學習相比，通過討論等互動方式更能激發學生的學習積極性。而目前大部分教學軟件往往著眼于傳統的知識傳授進行設計，即使有互動環節也只注重教師與學生的互動，很少涉及學生之間的信息共享，因而很難形成課堂討論氛圍。

Node.js是目前十分流行的一種網絡編程技術，它自帶http服務器支持，不需借助外網即可方便地建立Web應用。通過Node.js和Express技術可實現數據實時傳遞與共享，在此基礎上還可根據需要開發一些簡單易用的小工具來豐富教學手段，從而便捷地搭建課堂實時互動環境。

1Node.js簡介

Node.js是一個基于Javascript的開源、高性能的運行環境，目前被廣泛應用于服務器端和網絡應用中[1}。它使JavaScript代碼不僅運行在瀏覽器上，也能出現在服務器端，并可實現文件處理、網絡通信等功能。國內外關于Node.js已經有不少成熟項目，如Paypal、CSDN Share、花瓣網等。

Node.js的目標是實現高性能的Web服務器，其最初用于解決服務端阻塞問題。傳統的網絡服務技術大多采用多線程處理，隨著用戶增加，過多的線程會占用系統資源，最終造成服務器等待和調度開銷逐漸增大甚至不能滿足用戶需求[2]。而Node.js運行在一個單線程中，使用非阻塞的異步I/O調用，所有連接都掛在單線程的事件循環中，從而減少線程開銷，提高運行效率與Web應用的健壯性，非常適合高并發、系統架構簡單且沒有硬實時要求的網絡應用，如聊天室、在線數據統計等。教學一般具有參與人數多、邏輯簡單等特點。因此，很適合應用此技術開發一些相關的實時輔助教學工具。

2Express 框架簡介

Express 是一個基于 Node.js 平臺的簡單、靈活的 Web 應用開發框架，支持Jade等多種模板以及路由控制、模板解析支持等，幫助創建各種 Web 和移動設備應用[3]。

使用Express命令創建：①app.js：工程入口，即啟動文件；②node_modules： 存放項目的依賴庫；③package.json：項目依賴配置及開發者信息；④public：靜態文件如 css、js、img；⑤routes：路由文件；⑥views：視圖文件目錄，存放模板文件 （默認支持Jade和EJS）；⑦bin：用于存放應用程序集默認緩存，通常存放DLL文件。

Express主要用于HTTP協議中常用操作的封裝，可通過整合其它模塊實現更多功能。

3在線畫圖交流平臺應用

利用計算機軟件教學有利于將學生帶入某種特設情境，充分互動從而提升學習效果。教師有時需要在課堂上演示一些軟件運作流程，最方便快捷的工具是畫圖，但操作系統自帶的“畫圖”程序沒有交互與共享功能，而目前可以使用的在線共享繪圖軟件較少，大部分需要連接到其網站服務器。由于繪圖本身傳遞的數據量較大，如果多人操作，響應較慢，并發操作時又無法實現學生間的相互交流，搭建Node.js和Express環境則可以解決這些問題。

該平臺需要在教師機上搭建好環境，學生機不需要安裝軟件，直接用瀏覽器登錄即可。其最大特點在于當教師和學生多人進行編輯時，所有人都可以看到操作步驟，加入問題討論和編輯修改，活躍課堂互動氛圍。結合Html5的Canvas繪圖功能和網絡套接字Socket.io[4]，可以很方便地實現師生互動，并讓多人同時對同一繪圖進行操作，達到分享和討論的目的，具體應用結構如圖1所示。

3.1服務器端：Socket.io使用方法

由于各類瀏覽器端對HTML5的支持情況不一致（通信方式有WebSocket、AJAX等），為了在所有瀏覽器上都能與服務器端采用統一接口來傳送數據，需要使用Socket.io。Socket.io提供了不支持WebSocket時的降級支持，同時使一些舊版本的瀏覽器也可以“全雙工”地工作。

啟動Socket后，則在客戶端和服務端建立持久的連接，加強連接可靠性。Socket主要有以下幾種用法：① socket.emit（message， " test"）；//發送信息到當前請求用戶；②socket.broadcast.emit（message， " test"）；//發送信息到當前除自己外的所有用戶；③socket.broadcast.to（game）.emit（message， test）； //發送信息到test組里（除自己外的所有用戶）。

3.2客戶端：Canvas使用

Canvas元素是HTML5的新元素之一，用于在網頁上繪制圖形，其使用方法是直接使用標簽，如：。

Canvas本身沒有繪圖功能，需要使用javasrcipt函數進行繪圖操作。Canvas的優點是不需要安裝軟件和插件，只需用戶瀏覽器支持HTML5即可，圖形操作簡單、快捷。它雖然在復雜圖形和動畫繪制上功能不及flash軟件，但比較適合強調便捷性的演示和教學。

3.3設計思路與實現過程

為了更好地應用在線畫圖功能，筆者對Express的默認結構作了修改，分成3部分：Server、Client和node_module文件夾。

在Server文件夾中，包含對客戶端的監聽和處理過程。主要邏輯包含對畫圖平臺狀態的確定，比如：新增用戶、開始畫圖、發送消息、用戶退出等不同狀態，利用Socket對象可在服務器和瀏覽器間直接傳遞信息。

在Client客戶端則不需要太多處理過程，僅給用戶提供一個html頁面，允許客戶端使用即可。用戶在界面中可以進行圖形繪制或文字聊天。在該環境中最重要的功能實現是保存用戶畫圖信息并傳遞給服務器。

在以下示例中為了簡化Javascrpit代碼，使用Jquery庫：

（1）服務器端部分代碼設置：

socket.on（connection，function（socket）{

socket.on（addme， function（username）{ //監聽新用戶加入

socket.broadcast.emit（chat， SERVER， username + has come ）；}）；

socket.on（sendchat， function（message）{ //監聽用戶發布聊天內容

io.sockets.emit（chat，socket.username，message）； }）；

socket.on（senddraw， function（data）{ //監聽用戶發布繪圖內容

socket.data = data； //data是繪圖JSON數據

io.sockets.emit（draw，socket.data）； }）；

……}

（2）客戶端部分操作代碼：保存用戶在Canvas上繪制的圖形，整個過程需要采用鼠標事件進行處理，獲取圖形信息后保存為JSON格式，返回服務器端，實現畫圖共享。

$（"#drawing-pad"）.mousemove（function（e） {

if （websocketGame.isDrawing） {

var mouseX = e.layerX || 0；var mouseY = e.layerY || 0； //標記起點

if （！（mouseX == websocketGame.startX && mouseY == websocketGame.startY））

{drawLine（ctx，websocketGame.startX，websocketGame.startY，mouseX，mouseY，1）；

//發送線段數據到服務器端

var data = {}；

data.startX = websocketGame.startX；

data.startY = websocketGame.startY；

data.endX = mouseX；data.endY = mouseY；

//提示服務器來處理圖形信息

websocketGame.socket.emit（senddraw，JSON.stringify（data））；

websocketGame.startX = mouseX；

websocketGame.startY = mouseY；} }}）；

通過創建基于事件驅動的服務器—客戶端架構，所有連接的瀏覽器都可以相互實時傳遞繪圖信息。

4課堂測試小工具應用

基于Node.js和Express多人共享的特性[5]，設計并實現一個支持多個學生同時進行測試的課堂測試小工具，可充分利用課堂中的“零碎”時間。已有測試軟件通常過于龐大，而且和前述軟件類似，缺少共享部分，只適合單個學生的練習和測試。在該應用中，學生答題的同時，還可以同步了解他人測試情況，激勵其更快、更好地完成測試，提高學生學習積極性。

4.1設計思路

課堂測試小工具同樣基于服務器端和客戶端結構，主要由客戶端發送請求，服務器返回試題，同時在客戶端進行答題，此過程中與服務器端通過Socket.io監聽、傳送數據，保持交互信息。

由于該工具只有一個客戶端界面用來答題，因此可以省略Express中默認的route路由部分。筆者根據需要對Express框架進行了調整：①首先對測試邏輯、測試應用、測試者、測試問題進行JavaScrpit類的模型設計，增加了對應的game.js、player.js、question.js文件。其中，player.js中定義了測試者答題、顯示正確答案、獲取得分等主要功能；②增加了全局文件Global.js用于處理全局信息，引入應用所需引用的其它對象，如測試試題、當前人數、測試分數等，通過require語句引入；③在客戶端html頁面中，根據用戶測試過程，利用Sokcet.io向服務器發送信息。

4.2對象模型設計

（1）測試程序本身模型：定義測試的邏輯類以及測試過程中的各種函數。

Game.prototype.initGame=function（）{ … }//初始化時，確定試題

Game. prototype.askQuestion=function（ ）{//回答問題

if（this.current < 5） //如果不是最后一題（假設共5題）

{ ……

setTimeout（this.reviewQuestion.bind（this）， 20000）；//20秒后，答案更正，此時同步處理其他測試者分數

……//繼續下一題測試

}else { ……//通知服務器端測試結束}

為了實現所有測試者答題情況同步更新，采用reviewQuestion函數獲取正確答案，并計算所有測試者分數。

reviewQuestion ： function（） {

var userScore = currentQuestion.reviewQuestion（）；

for（var i in userScore）

{ // 更新每個測試者分數

this.players[i].score += userScore[i]；

userScore[i} = this.players[i].score；

}……

//廣播告知每個測試者正確答案

IO.in（game）.emit（eCorrection， { currentQuestion.getCorrectProps（），score.scores }）；

}

（2）題目模型。充分考慮試題特點，在設計JSON結構時，將每個題目的結構設計成text和選項數組，而每個選項又分成文字和是否正確兩個屬性，讀取每個選項。

（3）測試者模型。每個測試者都有最基本的3個屬性：端口號、姓名、成績。

4.3客戶端界面設計

前端界面主要用于與客戶進行交互，在在線測試過程中，用戶提交數據或點擊操作時，需要服務器作出反應，或者直接在瀏覽器端作出處理。

例如：用戶登錄時向服務器發送一個響應；用戶開始回答問題，需告知服務器；用戶選擇一個答案，則需要將用戶選擇的答案標記為藍色，同時讓服務器檢查答案正確與否。部分代碼如下：

socket.on（eNewQuestion， function（q）

{ …

var content = questionTmpl（q）；

$（#question）.html（content）；//獲取題目內容

$（button.answer）.on（click， function（）{

$（this）.addClass（blue）； //改變選中答案的顏色

$（this）.prop（disabled， true）； //不允許修改

socket.emit（eAnswer， $（this）.data（id））； //將數據提交給服務器端檢查}）； }）；

4.4數據庫保存

考慮到課堂在線測試實際需要，測試題采用單項選擇題。由于試題庫規模很小，因此沒有采用數據庫，采用JSON數組格式。如果內容增多導致數組不夠用，可以使用MongoDB數據庫存儲JSON數組來擴大測試題目存儲量。

完成框架搭建后運行程序，學生可以在答題的同時，看到他人的測試情形。

5Node.js和Express在教學中的應用趨勢

本文利用Node.js和Express技術在數據通信方面的效率優勢和共享功能，開發了在線畫圖交流平臺和課堂測試小工具兩個軟件，探討該技術在計算機教學方面的應用。未來Node.js的發展趨勢是與硬件結合，下一步研究方向是利用Node.js技術結合手機制作一些輔助教學的App軟件，通過無線網絡實現移動終端教學，從而使課堂更具有趣味性。

參考文獻參考文獻：

[1]王金龍.宋斌.丁銳.Node.js：一種新的Web應用構建技術[J].現代電子技術，2015（6）：7073.

[2]賴曉京.基于Html5 WebSocket的即時通訊系統[J].電子技術與軟件工程，2013（17）：61.

[3]郭家寶.Node.js開發指南[M].北京：人民郵電出版社，2012：86104.

[4]Makzan.HTML5游戲開發實戰[M].呂定平，陳升想，譯.北京：機械工業出版社，2012：190221.

[5]沈昕.基于Node.js及Mongodb的在線學習測試系統設計[J].無線互聯科技，2015（4）：3032.

責任編輯（責任編輯：黃?。?