一种基于HTML5的数据传输方法及系统与流程

背景技术：

随着网络技术的快速发展，HTML5由于跨平台以及在移动设备上支持多媒体等优点，其应用也越来越广泛。例如，将HTML5技术应用到教学中，促进了传统的课程教学开始向信息化方向发展，学生通过客户端登录教育平台后直接下载老师的授课内容，不但可以实现课件和试卷无纸化，而且老师可以采用视频、音频等方式制作课件，极大地提高了教学效率，也有助于师生互动，创造一个老师方便教、学生乐于学的寓教于乐、富有趣味的智慧课堂。目前，教育平台的服务器布设在广域网或局域网中，客户端浏览器通过获取教育平台的服务器的统一资源定位符(Uniform Resource Locator，URL)来展示HTML5页面，其中，服务器性能和客户端的并发量成为影响教育平台的运行状态的重要因素。当大量客户端访问大容量的HTML5页面时，利用服务器分发HTML5课件、资料、试卷供客户端展示存在不同步、网络延时大、可靠性和稳定性较差的问题。

技术实现要素：

针对现有技术中存在的缺陷，本发明的主要目的在于提供一种基于HTML5的数据传输方法，本发明的另一目的在于提供一种基于HTML5的数据传输系统，通过集中并发的方式实现服务器向多个客户端分发HTML5页面数据，确保HTML5页面数据传输的高可靠性、及时性和同步性。

本发明提供一种基于HTML5的数据传输方法，用于服务器和多个客户端之间传输数据，包括以下步骤：

服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，所述合法用户的权限包括普通用户权限和高级用户权限，存储合法用户的客户端的地址，并向合法用户发送供用户编辑的HTML5页面所需的静态资源文件；

合法用户的客户端将接收的静态资源文件存入指定目录中，其中，高级用户的客户端调用静态资源文件以加载供编辑的HTML5页面，并将编辑过的HTML5页面上传到服务器；

服务器从高级用户编辑过的HTML5页面中提取高级用户的编辑数据，并将编辑数据集中发送到所有普通用户的客户端；

普通用户的客户端调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

在上述技术方案的基础上，所述静态资源文件包括JavaScript文件和级联样式表CSS文件。

在上述技术方案的基础上，高级用户的客户端调用静态资源文件以加载供编辑的HTML5页面的方法为：高级用户的客户端将指定目录中的静态资源文件复制到本地缓存区，通过WebView调用静态资源文件以加载供编辑的HTML5页面。

在上述技术方案的基础上，服务器从高级用户编辑过的HTML5页面中提取高级用户的编辑数据包括：

服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，当判断该用户为高级用户时，接收客户端上传的编辑过的HTML5页面；

对编辑过的HTML5页面进行解析，获取编辑过的HTML5页面的目录结构及其标识信息，剔除所述静态资源文件和冗余数据，获得编辑数据。

在上述技术方案的基础上，服务器通过IP组播或者IP广播将压缩后的编辑数据发送到所有普通用户的客户端。

在上述技术方案的基础上，普通用户的客户端调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面包括：

普通用户的客户端将接收到的编辑数据存入本地缓存区并解压缩，将指定目录中的静态资源文件复制到本地缓存区，通过WebView调用静态资源文件和接收到的编辑数据加载编辑过的HTML5页面。

在上述技术方案的基础上，所述数据传输方法还包括：

普通用户的客户端在编辑过的HTML5页面上再次进行编辑，并将再次编辑的HTML5页面上传到服务器；

服务器从普通用户编辑过的HTML5页面中提取再次编辑数据，并将再次编辑数据发送到高级用户的客户端。

本发明还提供一种基于HTML5的数据传输方法，用于教育平台服务器和多个客户端之间传输教学数据，包括以下步骤：

教育平台服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，所述合法用户的权限包括学生权限和教师权限，存储合法用户的客户端的地址，并向合法用户发送供用户编辑的HTML5页面所需的静态资源文件；

合法用户的客户端将接收的静态资源文件存入指定目录中，其中，教师的客户端调用静态资源文件以加载供编辑的HTML5页面，并将编辑过的HTML5页面上传到教育平台服务器；

教育平台服务器从教师编辑过的HTML5页面中提取教师的编辑数据，并将编辑数据集中发送到所有学生的客户端；

学生的客户端调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

本发明还提供一种基于HTML5的数据传输系统，其包括服务器和多个客户端，其中，

服务器包括判断模块、存储模块、发送模块和提取模块，判断模块用于接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，所述合法用户的权限包括普通用户权限和高级用户权限；存储模块用于存储预设的用户判断标准、供用户编辑的HTML5页面所需的静态资源文件、以及合法用户的客户端的地址；发送模块用于向合法用户发送供用户编辑的HTML5页面所需的静态资源文件，并将编辑数据集中发送到所有普通用户的客户端；提取模块用于从高级用户编辑过的HTML5页面中提取高级用户的编辑数据；

客户端包括收发模块和加载模块，收发模块用于发送用户请求，接收静态资源文件和编辑数据，并将接收的静态资源文件存入指定目录中，以及将编辑过的HTML5页面上传到服务器；加载模块用于调用静态资源文件加载供用户编辑的HTML5页面，或者调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

在上述技术方案的基础上，客户端通过WebView调用静态资源文件加载供用户编辑的HTML5页面，或者调用静态资源文件和接收到的数据以加载编辑过的HTML5页面。

与现有技术相比，本发明的优点如下：

(1)本发明通过集中并发的方式实现服务器向多个客户端分发HTML5页面数据，确保HTML5页面数据传输的高可靠性、及时性和同步性，减少了用户的等待时间。

(2)本发明中客户端将HTML5页面的静态资源文件预置在本地，能够减少需要传输的数据量，缩短传输时间。

(3)本发明将服务器上的HTML5页面数据通过组播或广播的方式发送到客户端，不再使用传统的http和https请求方式，以应对客户端并发对网络和服务器造成的压力，有效地降低了服务器的负荷，有助于降低服务器的成本。

附图说明

图1是本发明实施例基于HTML5的数据传输方法流程图；

图2是本发明另一实施例基于HTML5的数据传输方法流程图；

图3是本发明实施例应用于教育平台服务器和多个客户端之间传输教学数据的基于HTML5的数据传输方法流程图；

图4是本发明实施例基于HTML5的数据传输系统示意图。

具体实施方式

为了便于下文的描述，首先给出一些术语的说明：

组播(multicasting)是一种多点投递的形式，它使用硬件技术，通过使用大量组播地址来通信。当某一组机器需要通信时，选择一个组播地址，并配置好相应的网络接口硬件，识别组播地址，从而收到该组播地址上分组的拷贝。组播的问题是很多路由和设备支持性不好，优点是减轻了路由和主机的处理负荷。

广播(broadcasting)是多点投递的最普遍的形式，它向每一个目的站投递一个分组的拷贝。它可以通过多个单次分组的投递完成，也可以通过单独的连接传递分组的拷贝，直到每个接收方均收到一个拷贝为止。广播的问题在于它增加了主机的处理负荷，优点是传输保障性高。

下面结合附图及具体实施例对本发明作进一步的详细描述。

参见图1所示，本发明实施例提供一种基于HTML5的数据传输方法，用于服务器和多个客户端之间传输数据，包括以下步骤：

S1.服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，合法用户包括普通用户和高级用户，合法用户的权限包括普通用户权限和高级用户权限，存储合法用户的客户端的地址，并向合法用户发送供用户编辑的HTML5页面所需的静态资源文件。

具体的，服务器存储预设的用户判断标准和静态资源文件，预设的用户判断标准可以为预设的合法用户列表，合法用户列表包括供合法用户注册的信息，例如用户ID、注册密码以及用户权限等，合法用户通过用户ID和注册密码登录服务器。服务器管理人员可以输入合法用户列表，和/或，由服务器向用户展示注册页面，收集用户在注册页面填写的用户ID、注册密码等注册信息，然后存储在合法用户列表中，服务器管理人员预先设定用户权限。静态资源文件为用于加载供用户编辑的HTML5页面所需的JavaScript文件和级联样式表CSS(Cascading Style Sheets)文件。

S2.合法用户的客户端将接收的静态资源文件存入指定目录中，其中，高级用户的客户端调用静态资源文件以加载供编辑的HTML5页面，并将编辑过的HTML5页面上传到服务器。

客户端的操作系统可以为Android、iOS或者Windows，其中，高级用户的客户端将指定目录中的静态资源文件复制到本地缓存区，通过WebView调用静态资源文件以加载供编辑的HTML5页面，高级用户在供编辑的HTML5页面中填写相关内容，或者上传文本、视频、音频等文件。

客户端将HTML5页面的静态资源文件预置在本地，能够减少需要传输的数据量，缩短传输时间。

S3.服务器从高级用户编辑过的HTML5页面中提取高级用户的编辑数据，并将编辑数据集中发送到所有普通用户的客户端。

服务器从高级用户编辑过的HTML5页面中提取编辑数据的具体方法为：

服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，当判断该用户为高级用户时，接收客户端上传的编辑过的HTML5页面。

对编辑过的HTML5页面进行解析，获取编辑过的HTML5页面的目录结构及其标识信息，剔除静态资源文件和冗余数据，获得编辑数据。高级用户的编辑数据包括高级用户在供编辑的HTML5页面中填写相关内容，或者上传文本、视频、音频等文件。

服务器可以自动或者按照接收的高级用户的命令，通过IP组播或者IP广播将压缩后的编辑数据转成字节数组发送到所有普通用户的客户端。对于zip压缩包，服务器发给客户端的时候会先发一段json代码：{"fileName":"xxx.zip","fileType":1,"length":135556}。

本发明将服务器上的HTML5页面数据通过组播或广播的方式发送到客户端，不再使用传统的http和https请求方式，以应对客户端并发对网络和服务器造成的压力，有效地降低了服务器的负荷，有助于降低服务器的成本。

S4.普通用户的客户端调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

步骤S4具体包括：

普通用户的客户端将接收到的编辑数据存入本地缓存区并解压缩，具体的，客户端根据服务器发送的压缩文件格式代码进行相应的解压缩，例如，调用zip解压缩zip压缩包。将指定目录中的静态资源文件复制到本地缓存区，本地缓存区可以是临时文件夹，通过WebView调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

本发明通过集中并发的方式实现服务器向多个客户端分发HTML5页面数据，确保HTML5页面数据传输的高可靠性、及时性和同步性，减少了用户的等待时间。

参见图2所示，在本发明基于HTML5的数据传输方法的另一实施例中，步骤S4之后还包括以下步骤：

S5.普通用户的客户端在编辑过的HTML5页面上再次进行编辑，并将再次编辑的HTML5页面上传到服务器。

S6.服务器从普通用户编辑过的HTML5页面中提取再次编辑数据，并将再次编辑数据发送到高级用户的客户端。

普通用户可以在高级用户编辑的HTML5页面上进行再次编辑，服务器将将再次编辑数据发送到高级用户。

参见图3所示，应用于教育平台服务器和多个客户端之间传输教学数据，本发明基于HTML5的数据传输方法的实施例包括以下步骤：

S10.教育平台服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，合法用户包括学生和教师，合法用户的权限包括学生权限和教师权限，存储合法用户的客户端的地址，并向合法用户发送供用户编辑的HTML5页面所需的静态资源文件。

具体的，教育平台服务器存储预设的用户判断标准和静态资源文件，预设的用户判断标准可以为预设的合法用户列表，合法用户列表包括供合法用户注册的信息，例如用户ID、注册密码以及用户权限等，合法用户通过用户ID和注册密码登录教育平台服务器。教育平台服务器管理人员可以输入合法用户列表，和/或，由教育平台服务器向用户展示注册页面，收集用户在注册页面填写的用户ID、注册密码等注册信息，然后存储在合法用户列表中，教育平台服务器管理人员预先设定用户权限。静态资源文件为用于加载供用户编辑的HTML5页面所需的JavaScript文件和级联样式表CSS(CascadingStyle Sheets)文件。

例如，教育平台服务器管理人员可以预先输入合法用户列表，合法用户列表中包括一门课程、一个年级或者一个班级的注册学生和教师，并创建供教师编辑的HTML5页面，教育平台服务器向所有注册学生和教师发送供用户编辑的HTML5页面所需的静态资源文件。

S20.合法用户的客户端将接收的静态资源文件存入指定目录中，其中，教师的客户端调用静态资源文件以加载供编辑的HTML5页面，并将编辑过的HTML5页面上传到教育平台服务器。

客户端的操作系统可以为Android、iOS或者Windows，其中，教师的客户端将指定目录中的静态资源文件复制到本地缓存区，通过WebView调用静态资源文件以加载供编辑的HTML5页面，教师在供编辑的HTML5页面中填写相关内容，或者上传文本、视频、音频等文件。

S30.教育平台服务器从教师编辑过的HTML5页面中提取教师的编辑数据，并将编辑数据集中发送到所有学生的客户端。

教育平台服务器从教师编辑过的HTML5页面中提取编辑数据的具体方法为：

教育平台服务器接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，当判断该用户为教师时，接收客户端上传的编辑过的HTML5页面。

对编辑过的HTML5页面进行解析，获取编辑过的HTML5页面的目录结构及其标识信息，剔除静态资源文件和冗余数据，获得编辑数据。编辑数据包括教师在供编辑的HTML5页面中填写相关内容，或者上传文本、视频、音频等文件。

教育平台服务器可以自动或者按照接收的教师的命令，通过IP组播或者IP广播将压缩后的编辑数据转成字节数组发送到所有普通用户的客户端。对于zip压缩包，教育平台服务器发给客户端的时候会先发一段json代码：

{"fileName":"xxx.zip","fileType":1,"length":135556}。

S40.学生的客户端加载静态资源文件和接收到的编辑数据以显示编辑过的HTML5页面。

步骤S40具体包括：

学生的客户端将接收到的编辑数据存入本地缓存区并解压缩，具体的，客户端根据教育平台服务器发送的压缩文件格式代码进行相应的解压缩，例如，调用zip解压缩zip压缩包。将指定目录中的静态资源文件复制到本地缓存区，本地缓存区可以是临时文件夹，通过WebView调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

在本发明基于HTML5的数据传输方法的另一实施例中，步骤S40之后还包括以下步骤：

S50.学生的客户端在编辑过的HTML5页面上再次进行编辑，并将再次编辑的HTML5页面上传到服务器。

S60.教育平台服务器从学生编辑过的HTML5页面中提取再次编辑数据，并将再次编辑数据发送到教师的客户端。

学生可以在教师编辑的HTML5页面上进行再次编辑，服务器将将再次编辑数据发送到教师。例如，教师上传作业，学生通过客户端下载，并将完成的作业上传到教育平台服务器，由教育平台服务器发送给教师。

参见图4所示，本发明实施例还提供一种基于HTML5的数据传输系统，其包括服务器和多个客户端，其中，

服务器包括判断模块、存储模块、发送模块和提取模块，判断模块用于接收客户端发送的用户连接请求，基于预设的用户判断标准判断合法用户及其权限，所述合法用户的权限包括普通用户权限和高级用户权限；存储模块用于存储预设的用户判断标准、供用户编辑的HTML5页面所需的静态资源文件、以及合法用户的客户端的地址；发送模块用于向合法用户发送供用户编辑的HTML5页面所需的静态资源文件，并将编辑数据集中发送到所有普通用户的客户端；提取模块用于从高级用户编辑过的HTML5页面中提取高级用户的编辑数据；

客户端包括收发模块和加载模块，收发模块用于发送用户请求，接收静态资源文件和编辑数据，并将接收的静态资源文件存入指定目录中，以及将编辑过的HTML5页面上传到服务器；加载模块用于调用静态资源文件加载供用户编辑的HTML5页面，或者调用静态资源文件和接收到的编辑数据以加载编辑过的HTML5页面。

客户端通过WebView调用静态资源文件以加载供用户编辑的HTML5页面，或者调用静态资源文件和接收到的数据以加载编辑过的HTML5页面。

本发明的基于HTML5的数据传输系统的另一实施例中，服务器为教育平台服务器，普通用户为学生，高级用户为教师。

本发明不局限于在线学习和考试，还可以用于投票等其它应用。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。