王云曉 張學(xué)誠(chéng)

摘要：為了保證遠(yuǎn)程教學(xué)的質(zhì)量，需要有流暢的音頻視頻播放和實(shí)時(shí)的教學(xué)互動(dòng)交流?；贖TML5的遠(yuǎn)程教學(xué)在線即時(shí)討論區(qū)的設(shè)計(jì)，滿足了這一要求。使用HTML5提供的Video標(biāo)簽，能實(shí)現(xiàn)音頻視頻文件的流暢播放，使用HTML5規(guī)范中定義的WebSocket協(xié)議能實(shí)現(xiàn)實(shí)時(shí)通信功能。用HTML5技術(shù)設(shè)計(jì)的教學(xué)網(wǎng)站，保證了遠(yuǎn)程學(xué)習(xí)的順利進(jìn)行。

關(guān)鍵詞：遠(yuǎn)程教學(xué)；HTML5；Video；WebScoket；在線討論

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）14-0077-02

Abstract： In order to ensure the quality of distance teaching， it is necessary to have fluent audio video playback and Interactive communication between teaching and learning in real time. Design of real-time online discussion area of distance teaching based on HTML5 has satisfied this requirement. Using the Video tag provided by HTML5 to achieve the smooth play of audio and video files， and the WebSocket protocol defined in the HTML5 specification enables real-time communication. The web site designed with HTML5 technology ensures the smooth progress of distance learning.

Key words： distance teaching； HTML5； video； WebScoket； online discussion

1 引言

隨著信息技術(shù)的發(fā)展，遠(yuǎn)程教學(xué)越來(lái)越受到學(xué)習(xí)者的喜歡，這種教學(xué)方式不僅打破了傳統(tǒng)的時(shí)空限制，而且能充分利用高質(zhì)量的教育資源，讓更多的人受教育，最大限度地發(fā)展教育事業(yè)，是現(xiàn)在也是未來(lái)的重要的教育手段。

遠(yuǎn)程教學(xué)是通過(guò)一套網(wǎng)絡(luò)設(shè)備完成的，無(wú)形中減少了與人群的接觸和交流。另外，學(xué)習(xí)者面對(duì)一個(gè)固定的機(jī)器，容易疲勞影響學(xué)習(xí)效果，于是有的人最終放棄遠(yuǎn)程學(xué)習(xí)。傳統(tǒng)教學(xué)模式下，大家聚集在一起，很容易創(chuàng)造良好的學(xué)習(xí)氛圍，可以互相幫助，互相討論，互相學(xué)習(xí)，學(xué)習(xí)效果較好。遠(yuǎn)程教學(xué)系統(tǒng)應(yīng)汲取傳統(tǒng)教學(xué)模式的優(yōu)點(diǎn)，設(shè)計(jì)成具有實(shí)用性、實(shí)時(shí)性和交互性，切合師生學(xué)習(xí)、交流、分享等多種需求的系統(tǒng)。因此，在遠(yuǎn)程教學(xué)系統(tǒng)中設(shè)計(jì)討論區(qū)，能實(shí)現(xiàn)老師和學(xué)生即時(shí)討論交流，及時(shí)解惑答疑，實(shí)現(xiàn)同學(xué)之間實(shí)時(shí)的互相討論，提高學(xué)習(xí)興趣，保證學(xué)習(xí)質(zhì)量。

實(shí)現(xiàn)遠(yuǎn)程學(xué)習(xí)以及即時(shí)在線討論，必須實(shí)現(xiàn)音頻視頻播放和信息的快速傳遞。HTML5提供的

2 HTML5 WebScoket的技術(shù)原理

2.1 HTML5對(duì)音頻視頻的支持

2013年，HTML 5.1正式草案公布，在這個(gè)版本中，新功能不斷推出，提高了新元素的互操作性。HTML5中定義的新標(biāo)記

2.2 WebScoket協(xié)議雙向通信機(jī)制

伴隨著HTML5推出的WebSocket協(xié)議，是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議，其在瀏覽器和服務(wù)器之間提供了一個(gè)類 TCP/IP 全雙工通信方式，實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（full-duplex）通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端，真正實(shí)現(xiàn)了Web的實(shí)時(shí)通信。

WebSocket 協(xié)議定義了兩種URL方案（URL scheme）—ws 和wss，分別用于客戶端和服務(wù)器之間的非加密與加密流量。HTML5通過(guò)WebSocket API在服務(wù)器和客戶端之間建立一個(gè)實(shí)時(shí)的長(zhǎng)連接，通過(guò)Web，在客戶端應(yīng)用程序和服務(wù)器端進(jìn)程之間建立全雙工的雙向通信。

3 實(shí)現(xiàn)技術(shù)

要實(shí)現(xiàn)遠(yuǎn)程學(xué)習(xí)及實(shí)時(shí)討論，需要服務(wù)器端提供學(xué)習(xí)資料視頻播放功能，同時(shí)需要信息即時(shí)推送功能。用HTML5技術(shù)設(shè)計(jì)的遠(yuǎn)程教學(xué)系統(tǒng)及即時(shí)在線討論區(qū)，實(shí)現(xiàn)了教學(xué)視頻的播放和實(shí)時(shí)的信息傳遞交流。

3.1 教學(xué)視頻播放

HTML5的video標(biāo)簽?zāi)芊奖愕卦跒g覽器中播放視頻，VideoJS 作為最流行的 HTML5 視頻播放器，進(jìn)一步保證了視頻播放流暢性。Video.js 作為一個(gè)通用的在網(wǎng)頁(yè)上嵌入視頻播放器的 JS 庫(kù)，能自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。

在頁(yè)面中引用video-js.cs樣式文件和video.js，代碼如下：

設(shè)置flash路徑，Video.js會(huì)在不支持html5的瀏覽中使用flash播放視頻文件，代碼如下：

網(wǎng)頁(yè)Html代碼如下：

視頻源指定三種視頻格式，瀏覽器根據(jù)所需要格式選擇對(duì)應(yīng)的視頻文件播放。

3.2 客戶端設(shè)計(jì)

客戶端用WebSocket API來(lái)控制協(xié)議和創(chuàng)建應(yīng)用，建立全雙工通道來(lái)收發(fā)消息，JavaScript 為此提供了一套 WebSocket 應(yīng)用程序接口，越來(lái)越多的瀏覽器已經(jīng)對(duì)這些接口進(jìn)行了支持。在支持WebSocket的瀏覽器中，可以直接在Javascript中通過(guò)WebSocket對(duì)象來(lái)實(shí)現(xiàn)通信。

首先使用WebSocket在客戶端和服務(wù)器之間建立全雙工雙向連接，指向所要連接端點(diǎn)的URL，并實(shí)例化一個(gè)WebSocket對(duì)象，關(guān)鍵代碼如下：

var wsServer = "ws：//echo.websocket.org/"；

var websocket = new WebSocket（wsServer）；

客戶端如果需要提交信息，在連接打開(kāi)時(shí)調(diào)用send（） 方法，實(shí)現(xiàn)向服務(wù)器發(fā)送消息，關(guān)鍵代碼如下：

$（"#btnSend"）.click（function（） {

websocket .send（"txtName"）.value +$（"message"）.value）；

}）；

客戶端接受到服務(wù)器實(shí)時(shí)傳遞過(guò)來(lái)的數(shù)據(jù)后，在網(wǎng)頁(yè)討論區(qū)顯示，關(guān)鍵代碼如下：

websocket.onmessage = function （event）{

$（"#txt_Msg"）.html（$（"#txt_Msg "）.html（） + event.data+””

”）；

}；

3.3 服務(wù)器端設(shè)計(jì)

服務(wù)器作為遠(yuǎn)程教學(xué)的心臟，要提供教學(xué)資料的下載和播放，以及研討內(nèi)容的及時(shí)接受和推送。WebSocket作為一種雙向通信協(xié)議，在建立連接后，WebSocket服務(wù)器和Browser/UA都能主動(dòng)的向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)，因此一旦建立起WebSocket請(qǐng)求，不需要客戶端發(fā)起，客戶端也能及時(shí)接收到來(lái)自服務(wù)端的數(shù)據(jù)。

為了實(shí)現(xiàn)實(shí)時(shí)在線討論，在服務(wù)器端建立listener， 監(jiān)聽(tīng)是否有客戶端連接到服務(wù)器，如果有連接，再監(jiān)聽(tīng)是否收到新的事件，如果有信息發(fā)送到服務(wù)器，服務(wù)器接受數(shù)據(jù)并進(jìn)行JSON序列化處理，然后廣播到用戶端。關(guān)鍵代碼如下：

var ws = require（_dirname + '/lib/ws'）；

server = ws.createServer（）；

server.addListener（"connection"，function（conn））{

conn.addListener（"message"，function（message））{

var msg = {}；

msg.text = message；

msg.user = conn.id；

conn.write（JSON.stringify（msg））；

conn.broadcast（JSON.stringify（msg））；

}）；

}）；

在搭建WebSocket服務(wù)器時(shí)，可以使用開(kāi)源庫(kù)文件，比如PyWebSocket，WebSocket-Node，LibWebSockets等，這些庫(kù)文件已經(jīng)實(shí)現(xiàn)了WebSocket數(shù)據(jù)包的封裝和解析，可以調(diào)用這些接口，去解析和組裝WebSocket的數(shù)據(jù)包。

4 總結(jié)

隨著互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，人們對(duì)Web應(yīng)用的實(shí)時(shí)性要求越來(lái)越高，傳統(tǒng)的Web實(shí)時(shí)通信機(jī)制已經(jīng)無(wú)法滿足一些實(shí)時(shí)性要求較高的Web應(yīng)用（如在線游戲、在線證券、設(shè)備監(jiān)控等）。面對(duì)這種情況，HTML5規(guī)范中定義了WebSocket協(xié)議來(lái)實(shí)現(xiàn)更好的用戶體驗(yàn)和實(shí)時(shí)通信功能。本文提出的遠(yuǎn)程教學(xué)及即時(shí)在線討論功能的實(shí)現(xiàn)技術(shù)，使用HTML5新推出的Video標(biāo)簽播放教學(xué)視頻資料，用WebSocket協(xié)議實(shí)現(xiàn)在線討論內(nèi)容的實(shí)時(shí)推送，方便了學(xué)習(xí)者的遠(yuǎn)程學(xué)習(xí)活動(dòng)，進(jìn)一步提高了學(xué)習(xí)興趣和保證了學(xué)習(xí)質(zhì)量。

參考文獻(xiàn)：

[1] 葉青. 基于 Web 的遠(yuǎn)程教學(xué)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 自動(dòng)化與儀器儀表，2017（10）：228-230.

[2] 黃明，葉德建. 基于HTML5的加密直播系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]，微型電腦應(yīng)用，2017， 7（33）：43-47.

[3] 丁立國(guó)，熊偉，周斌. Html5 WebScoket 對(duì) Web Map 實(shí)時(shí)通信的影響[J]，測(cè)繪與空間地理信息，2017，7（40）：23-26.

[4] 龍軍. Web Socket在遠(yuǎn)程視頻監(jiān)控中的應(yīng)用探析[J]. 電腦知識(shí)與應(yīng)用，2017，13（6）：51-52，62.

[5] JackLiuy. VideoJS兼容性研究[EB/OL]. http：//blog.csdn.net/jackliuy/article/details/51035746.

[6] 陸晨，馮向陽(yáng)，蘇厚勤. HTML5 WebSocket 握手協(xié)議的研究與實(shí)現(xiàn)[J].2015，01（32）：128-131+178.

[7] JamesSong. 通過(guò)Web-Socket實(shí)現(xiàn)客戶端和服務(wù)器端的數(shù)據(jù)交互[EB/OL]. http：//blog.51cto .com/ytyzzm/1389498.

[8] 尹立. WebSocket（5）- WebSocket Server[EB/OL]. http：//blog.csdn.net/yl02520/article.