基于HTML5的即时在线讨论区的设计

王云晓 张学诚

摘要：为了保证远程教学的质量，需要有流畅的音频视频播放和实时的教学互动交流。基于HTML5的远程教学在线即时讨论区的设计，满足了这一要求。使用HTML5提供的Video标签，能实现音频视频文件的流畅播放，使用HTML5规范中定义的WebSocket协议能实现实时通信功能。用HTML5技术设计的教学网站，保证了远程学习的顺利进行。

关键词：远程教学；HTML5；Video；WebScoket；在线讨论

中图分类号：TP393 文献标识码：A 文章编号：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 引言

随着信息技术的发展，远程教学越来越受到学习者的喜欢，这种教学方式不仅打破了传统的时空限制，而且能充分利用高质量的教育资源，让更多的人受教育，最大限度地发展教育事业，是现在也是未来的重要的教育手段。

远程教学是通过一套网络设备完成的，无形中减少了与人群的接触和交流。另外，学习者面对一个固定的机器，容易疲劳影响学习效果，于是有的人最终放弃远程学习。传统教学模式下，大家聚集在一起，很容易创造良好的学习氛围，可以互相帮助，互相讨论，互相学习，学习效果较好。远程教学系统应汲取传统教学模式的优点，设计成具有实用性、实时性和交互性，切合师生学习、交流、分享等多种需求的系统。因此，在远程教学系统中设计讨论区，能实现老师和学生即时讨论交流，及时解惑答疑，实现同学之间实时的互相讨论，提高学习兴趣，保证学习质量。

实现远程学习以及即时在线讨论，必须实现音频视频播放和信息的快速传递。HTML5提供的

2 HTML5 WebScoket的技术原理

2.1 HTML5对音频视频的支持

2013年，HTML 5.1正式草案公布，在这个版本中，新功能不断推出，提高了新元素的互操作性。HTML5中定义的新标记

2.2 WebScoket协议双向通信机制

伴随着HTML5推出的WebSocket协议，是基于TCP的一种新的网络协议，其在浏览器和服务器之间提供了一个类 TCP/IP 全双工通信方式，实现了浏览器与服务器全双工（full-duplex）通信——允许服务器主动发送信息给客户端，真正实现了Web的实时通信。

WebSocket 協议定义了两种URL方案（URL scheme）—ws 和wss，分别用于客户端和服务器之间的非加密与加密流量。HTML5通过WebSocket API在服务器和客户端之间建立一个实时的长连接，通过Web，在客户端应用程序和服务器端进程之间建立全双工的双向通信。

3 实现技术

要实现远程学习及实时讨论，需要服务器端提供学习资料视频播放功能，同时需要信息即时推送功能。用HTML5技术设计的远程教学系统及即时在线讨论区，实现了教学视频的播放和实时的信息传递交流。

3.1 教学视频播放

HTML5的video标签能方便地在浏览器中播放视频，VideoJS 作为最流行的 HTML5 视频播放器，进一步保证了视频播放流畅性。Video.js 作为一个通用的在网页上嵌入视频播放器的 JS 库，能自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

在页面中引用video-js.cs样式文件和video.js，代码如下：

设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件，代码如下：

网页Html代码如下：

視频源指定三种视频格式，浏览器根据所需要格式选择对应的视频文件播放。

3.2 客户端设计

客户端用WebSocket API来控制协议和创建应用，建立全双工通道来收发消息，JavaScript 为此提供了一套 WebSocket 应用程序接口，越来越多的浏览器已经对这些接口进行了支持。在支持WebSocket的浏览器中，可以直接在Javascript中通过WebSocket对象来实现通信。

首先使用WebSocket在客户端和服务器之间建立全双工双向连接，指向所要连接端点的URL，并实例化一个WebSocket对象，关键代码如下：

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

var websocket = new WebSocket（wsServer）；

客户端如果需要提交信息，在连接打开时调用send（） 方法，实现向服务器发送消息，关键代码如下：

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

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

}）；

客户端接受到服务器实时传递过来的数据后，在网页讨论区显示，关键代码如下：

websocket.onmessage = function （event）{

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

”）；

}；

3.3 服务器端设计

服务器作为远程教学的心脏，要提供教学资料的下载和播放，以及研讨内容的及时接受和推送。WebSocket作为一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，因此一旦建立起WebSocket请求，不需要客户端发起，客户端也能及时接收到来自服务端的数据。

为了实现实时在线讨论，在服务器端建立listener， 监听是否有客户端连接到服务器，如果有连接，再监听是否收到新的事件，如果有信息发送到服务器，服务器接受数据并进行JSON序列化处理，然后广播到用户端。关键代码如下：

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服务器时，可以使用开源库文件，比如PyWebSocket，WebSocket-Node，LibWebSockets等，这些库文件已经实现了WebSocket数据包的封装和解析，可以调用这些接口，去解析和组装WebSocket的数据包。

4 总结

随着互联网技术的高速发展，人们对Web应用的实时性要求越来越高，传统的Web实时通信机制已经无法满足一些实时性要求较高的Web应用（如在线游戏、在线证券、设备监控等）。面对这种情况，HTML5规范中定义了WebSocket协议来实现更好的用户体验和实时通信功能。本文提出的远程教学及即时在线讨论功能的实现技术，使用HTML5新推出的Video标签播放教学视频资料，用WebSocket协议实现在线讨论内容的实时推送，方便了学习者的远程学习活动，进一步提高了学习兴趣和保证了学习质量。

参考文献：

[1] 叶青. 基于 Web 的远程教学系统的设计与实现[J]. 自动化与仪器仪表，2017（10）：228-230.

[2] 黄明，叶德建. 基于HTML5的加密直播系统设计与实现[J]，微型电脑应用，2017， 7（33）：43-47.

[3] 丁立国，熊伟，周斌. Html5 WebScoket 对 Web Map 实时通信的影响[J]，测绘与空间地理信息，2017，7（40）：23-26.

[4] 龙军. Web Socket在远程视频监控中的应用探析[J]. 电脑知识与应用，2017，13（6）：51-52，62.

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

[6] 陆晨，冯向阳，苏厚勤. HTML5 WebSocket 握手协议的研究与实现[J].2015，01（32）：128-131+178.

[7] JamesSong. 通过Web-Socket实现客户端和服务器端的数据交互[EB/OL]. http：//blog.51cto .com/ytyzzm/1389498.

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