Node.js與Express技術(shù)在計算機(jī)課程教學(xué)中的應(yīng)用 

崔瑩++劉兵

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

關(guān)鍵詞：Node.js；Express；高并發(fā)；實時互動

DOIDOI：10.11907/rjdk.161308

中圖分類號：G434

文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2016）009019003

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

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

0引言

隨著計算機(jī)技術(shù)的發(fā)展，計算機(jī)教學(xué)對教師組織課堂要求越來越高。如今，計算機(jī)軟件技術(shù)的學(xué)習(xí)更加注重應(yīng)用技能培養(yǎng)，因而學(xué)習(xí)越來越強(qiáng)調(diào)互動與共享。與單獨學(xué)習(xí)相比，通過討論等互動方式更能激發(fā)學(xué)生的學(xué)習(xí)積極性。而目前大部分教學(xué)軟件往往著眼于傳統(tǒng)的知識傳授進(jìn)行設(shè)計，即使有互動環(huán)節(jié)也只注重教師與學(xué)生的互動，很少涉及學(xué)生之間的信息共享，因而很難形成課堂討論氛圍。

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

1Node.js簡介

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

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

2Express 框架簡介

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

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

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

3在線畫圖交流平臺應(yīng)用

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

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

3.1服務(wù)器端：Socket.io使用方法

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

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

3.2客戶端：Canvas使用

Canvas元素是HTML5的新元素之一，用于在網(wǎng)頁上繪制圖形，其使用方法是直接使用標(biāo)簽，如：。

Canvas本身沒有繪圖功能，需要使用javasrcipt函數(shù)進(jìn)行繪圖操作。Canvas的優(yōu)點是不需要安裝軟件和插件，只需用戶瀏覽器支持HTML5即可，圖形操作簡單、快捷。它雖然在復(fù)雜圖形和動畫繪制上功能不及flash軟件，但比較適合強(qiáng)調(diào)便捷性的演示和教學(xué)。

3.3設(shè)計思路與實現(xiàn)過程

為了更好地應(yīng)用在線畫圖功能，筆者對Express的默認(rèn)結(jié)構(gòu)作了修改，分成3部分：Server、Client和node_module文件夾。

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

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

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

（1）服務(wù)器端部分代碼設(shè)置：

socket.on（connection，function（socket）{

socket.on（addme， function（username）{ //監(jiān)聽新用戶加入

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

socket.on（sendchat， function（message）{ //監(jiān)聽用戶發(fā)布聊天內(nèi)容

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

socket.on（senddraw， function（data）{ //監(jiān)聽用戶發(fā)布繪圖內(nèi)容

socket.data = data； //data是繪圖JSON數(shù)據(jù)

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

……}

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

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

if （websocketGame.isDrawing） {

var mouseX = e.layerX || 0；var mouseY = e.layerY || 0； //標(biāo)記起點

if （?。╩ouseX == websocketGame.startX && mouseY == websocketGame.startY））

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

//發(fā)送線段數(shù)據(jù)到服務(wù)器端

var data = {}；

data.startX = websocketGame.startX；

data.startY = websocketGame.startY；

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

//提示服務(wù)器來處理圖形信息

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

websocketGame.startX = mouseX；

websocketGame.startY = mouseY；} }}）；

通過創(chuàng)建基于事件驅(qū)動的服務(wù)器—客戶端架構(gòu)，所有連接的瀏覽器都可以相互實時傳遞繪圖信息。

4課堂測試小工具應(yīng)用

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

4.1設(shè)計思路

課堂測試小工具同樣基于服務(wù)器端和客戶端結(jié)構(gòu)，主要由客戶端發(fā)送請求，服務(wù)器返回試題，同時在客戶端進(jìn)行答題，此過程中與服務(wù)器端通過Socket.io監(jiān)聽、傳送數(shù)據(jù)，保持交互信息。

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

4.2對象模型設(shè)計

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

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

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

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

{ ……

setTimeout（this.reviewQuestion.bind（this）， 20000）；//20秒后，答案更正，此時同步處理其他測試者分?jǐn)?shù)

……//繼續(xù)下一題測試

}else { ……//通知服務(wù)器端測試結(jié)束}

為了實現(xiàn)所有測試者答題情況同步更新，采用reviewQuestion函數(shù)獲取正確答案，并計算所有測試者分?jǐn)?shù)。

reviewQuestion ： function（） {

var userScore = currentQuestion.reviewQuestion（）；

for（var i in userScore）

{ // 更新每個測試者分?jǐn)?shù)

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

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

}……

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

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

}

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

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

4.3客戶端界面設(shè)計

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

例如：用戶登錄時向服務(wù)器發(fā)送一個響應(yīng)；用戶開始回答問題，需告知服務(wù)器；用戶選擇一個答案，則需要將用戶選擇的答案標(biāo)記為藍(lán)色，同時讓服務(wù)器檢查答案正確與否。部分代碼如下：

socket.on（eNewQuestion， function（q）

{ …

var content = questionTmpl（q）；

$（#question）.html（content）；//獲取題目內(nèi)容

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

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

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

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

4.4數(shù)據(jù)庫保存

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

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

5Node.js和Express在教學(xué)中的應(yīng)用趨勢

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

參考文獻(xiàn)參考文獻(xiàn)：

[1]王金龍.宋斌.丁銳.Node.js：一種新的Web應(yīng)用構(gòu)建技術(shù)[J].現(xiàn)代電子技術(shù)，2015（6）：7073.

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

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

[4]Makzan.HTML5游戲開發(fā)實戰(zhàn)[M].呂定平，陳升想，譯.北京：機(jī)械工業(yè)出版社，2012：190221.

[5]沈昕.基于Node.js及Mongodb的在線學(xué)習(xí)測試系統(tǒng)設(shè)計[J].無線互聯(lián)科技，2015（4）：3032.

責(zé)任編輯（責(zé)任編輯：黃?。?