CN104735151A - 进度条的控制方法、装置和系统 - Google Patents

Abstract

本发明公开了一种进度条的控制方法、装置和系统，所述方法包括步骤：Web端初始化进度条的显示；Web端与服务器端建立全双工通信连接；Web端接收所述服务器端发送的进度信息，并根据所述进度信息刷新所述进度条。相对于现有技术中通过Web端轮询和长轮询服务器端来实现进度条控制的方式，本实施例的优点在于：在全双工通信连接下，服务器端可以主动传送数据给Web端，因此无需频繁的创建TCP请求及销毁请求，而且服务器端与客户端之间交换的标头信息很小，大概只有2字节，从而大大减少了网络带宽资源的占用，同时也节省了服务器资源。

Description

进度条的控制方法、装置和系统

技术领域

本发明涉及互联网技术领域，尤其是涉及一种进度条的控制方法、装置和系统。

背景技术

在浏览器中向用户提示进度信息时，通常以进度条的形式直观的呈现给用户。以在浏览器中上传文件为例，用户在上传文件时，由于文件的大小和网络传输带宽的因素，会使得上传需要一定的时间，在这段时间内用户无法知道文件上传的具体进度，只有在上传完后，服务器才反馈一个完成的信息。如果文件很大，会导致上传需要比较长的一段时间，在这段时间内用户会无法得知是否上传成功或是否还在上传中，处于一种迟疑的状态。通过进度条显示的方法，用户就可以在文件上传的过程中了解到上传的一个具体进展，这样上传文件的用户体验会更加人性化。

为了实现实时显示进度，现有技术主要采用轮询或长轮询的方式获取服务器端的进度信息，其中轮询是在特定的的时间间隔，由浏览器对服务器发出HTTP请求(request)，然后由服务器返回最新的数据给客户端的浏览器。浏览器需要不断的向服务器发出请求，直至进度条走完为止。

然而，这种传统的轮询或长轮询的方式，需要浏览器不断的向服务器发出请求，而HTTP请求的标头信息(header)非常长，占用了大量的网络带宽资源；同时，在轮询过程中，会频繁的创建TCP请求及销毁请求，又会占用大量的服务器资源。

发明内容

本发明的主要目的在于提供一种进度条的控制方法、装置和系统，旨在进度条显示过程中，减少网络带宽资源的占用，节省服务器资源。

为达以上目的，本发明提出一种应用于Web端的进度条的控制方法，包括步骤：

Web端初始化进度条的显示；

Web端与服务器端建立全双工通信连接；

Web端接收服务器端发送的进度信息，并根据进度信息刷新进度条。

优选地，根据进度信息刷新进度条包括：

Web端根据进度信息实时或定时的刷新进度条，或者

每当进度信息的增量达到第一阈值时，Web端刷新一次进度条。

优选地，Web端与服务器端建立全双工通信连接包括：

Web端初使化一个WebSocket组件，通过WebSocket组件与服务器端建立全双工通信连接。

优选地，Web端初始化进度条的显示包括：Web端通过jQuery和CSS实现进度条的显示和初始化。

基于同一发明构思，本发明提出一种应用于服务器端的进度条的控制方法，包括步骤：

服务器端与Web端建立全双工通信连接；

服务器端获取进度信息，并将进度信息发送给Web端，以使Web端根据进度信息刷新进度条。

优选地，将进度信息发送给Web端包括：

服务器端实时或定时的将进度信息发送给Web端，或者

每当进度信息的增量达到第二阈值时，服务器端向Web端发送一次进度信息。

基于同一发明构思，本发明还提出一种进度条的控制方法，包括步骤：

Web端初始化进度条的显示；

Web端与服务器端之间建立全双工通信连接；

服务器端获取进度信息，并将进度信息发送给Web端；

Web端接收进度信息，并根据进度信息刷新进度条。

优选地，根据进度信息刷新进度条包括：

Web端根据进度信息实时或定时的刷新进度条，或者

每当进度信息的增量达到第一阈值时，Web端刷新一次进度条。

基于同一发明构思，本发明同时提出一种应用于Web端的进度条的控制装置，包括初始化单元、第一连接单元和刷新单元，其中：

初始化单元，用于初始化进度条的显示；

第一连接单元，用于与服务器端建立全双工通信连接；

刷新单元，用于接收服务器端发送的进度信息，并根据进度信息刷新进度条。

优选地，刷新单元用于：

根据进度信息实时或定时的刷新进度条，或者

每当进度信息的增量达到第一阈值时，刷新一次进度条。

优选地，第一连接单元用于：

初使化一个WebSocket组件，通过WebSocket组件与服务器端建立全双工通信连接。

优选地，初始化单元用于：

通过jQuery和CSS实现进度条的显示和初始化。

基于同一发明构思，本发明同时提出一种应用于服务器端的进度条的控制装置，包括第二连接单元、获取单元和发送单元，其中：

第二连接单元，用于与Web端建立全双工通信连接；

获取单元，用于获取进度信息；

发送单元，用于将进度信息发送给Web端，以使Web端根据进度信息刷新进度条。

优选地，发送单元用于：

实时或定时的将进度信息发送给Web端，或者

每当进度信息的增量达到第二阈值时，向Web端发送一次进度信息。

基于同一发明构思，本发明同时提出一种进度条的控制系统，包括Web端和服务器端，Web端与服务器端建立了全双工通信连接，其中：

服务器端，用于获取进度信息，并将进度信息发送给Web端；

Web端，用于初始化进度条的显示，接收服务器端发送的进度信息，并根据进度信息刷新进度条。

优选地，Web端用于：根据进度信息实时或定时的刷新进度条；或者，每当进度信息的增量达到第一阈值时，Web端刷新一次进度条。

本发明所提供的一种进度条的控制方法，通过在Web端和服务器端之间建立全双工通信连接，由服务器端将获取的进度信息主动发送给Web端，以使Web端直接根据接收到的进度信息刷新进度条，实现了对进度条的控制。相对于现有技术中通过Web端轮询和长轮询服务器端来实现进度条控制的方式，本实施例的优点在于：在全双工通信连接下，服务器端可以主动传送数据给Web端，因此无需频繁的创建TCP请求及销毁请求，而且服务器端与客户端之间交换的标头信息很小，大概只有2字节，从而大大减少了网络带宽资源的占用，同时也节省了服务器资源。

附图说明

图1是本发明进度条的控制方法第一实施例的流程图；

图2是本发明实施例中进度条显示示意图；

图3是本发明进度条的控制方法第二实施例的流程图；

图4是本发明进度条的控制方法第三实施例的流程图；

图5是本发明实施例中数据帧的结构示意图；

图6是本发明实施例中Web端与服务器端的交互示意图；

图7是本发明应用于Web端的进度条的控制装置一实施例的模块示意图；

图8是本发明应用于服务器端的进度条的控制装置一实施例的模块示意图；

图9是本发明进度条的控制系统一实施例的模块示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明所述的Web端可以理解为浏览器端，其中Web即万维网，英文全称为World Wide Web，是一个由许多互相链接的超文本组成的系统，通过互联网访问。本发明的技术方案主要应用于浏览器上进度条的控制，采用全双工通信协议在浏览器和服务器之间形成了一条快速通道,通过一个单一的套接字在Web上进行操作，极大的减少了不必要的网络流量与延迟。本发明中进度条的使用不只限于文件上传，其他需要显示进度的应用场景一样可以使用，对于显示多进度条并且进度持续时间比较长的应用场景，采用本发明的技术方案将更加具有优势。

参见图1，提出本发明进度条的控制方法第一实施例，所述进度条的控制方法应用于Web端，包括以下步骤：

步骤S11：Web端初始化进度条的显示。

本步骤S11中，Web端优选通过使用jQuery和CSS来实现进度条的显示和初始化。其中，jQuery是一套跨浏览器的JavaScript库，简化HTML(标准通用标记语言的一个应用)与JavaScript之间的操作；CSS即层叠样式表单，是英文Cascading Style Sheets的缩写，它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

举例而言，用户在点击上传时，页面(Web端)开始进度条的初始化，显示文件上传的进度为0％，显示效果如图2所示。

步骤S12：Web端与服务器端建立全双工通信连接。

本步骤S12中，Web端通过全双工通信协议与服务器端建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

具体的，Web端初使化一个WebSocket组件，通过该WebSocket组件与服务器端建立全双工通信连接。在实现websocket连线过程中，需要通过Web端发出WebSocket连线请求，然后服务器端发出回应，这个过程通常称为“握手”(handshaking)。即Web端和服务器端只需要做一个握手的动作，Web端和服务器端之间就形成了一条快速通道，二者之间就可以直接进行数据互传。

在此WebSocket协议中，为实现即时服务带来了两大好处：一是互相沟通的标头信息(Header)很小，大概只有2个字节(Bytes)；二是可以实现Server Push，即服务器可以主动传送数据给Web端。

步骤S13：Web端接收服务器端发送的进度信息。

服务器端与Web端建立全双工通信连接后，不断计算进度信息，并将进度信息发送给Web端。服务器端发送进度信息时，可以实时的发送，也可以定时(即每隔一段时间)的发送。还可以预设一第二阈值，每当进度信息的增量达到第二阈值时，服务器端则向Web端发送一次进度信息。

步骤S14：Web端根据接收到的进度信息刷新进度条。

本步骤S14中，Web端根据接收到的进度信息对进度条进行刷新。Web端在刷新进度条时，可以实时的刷新，也可以定时(即每隔一段时间)的刷新。还可以预设一第一阈值，每当进度信息的增量达到第一阈值时，Web端刷则新一次进度条。

当进度完结后，服务器端通知Web端进度完成，Web端显示进度完成，并关闭连接。关闭连接时，Web端向服务器端发送请求关闭连接，服务器端收到请求后解析请求，并关闭连接。

参见图3，提出本发明进度条的控制方法第二实施例，所述进度条的控制方法应用于服务器端，包括以下步骤：

步骤S21：服务器端与Web端建立全双工通信连接。

本步骤S21中，服务器端通过全双工通信协议与Web端建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

在实现WebSocket连线过程中，需要通过Web端发出websocket连线请求，然后服务器端发出回应，这个过程通常称为“握手”(handshaking)。即Web端和服务器端只需要做一个握手的动作，Web端和服务器端之间就形成了一条快速通道，二者之间就可以直接进行数据互传。

在此WebSocket协议中，为实现即时服务带来了两大好处：一是互相沟通的标头信息(Header)很小，大概只有2个字节(Bytes)；二是可以实现Server Push，即服务器可以主动传送数据给Web端。

步骤S22：服务器端获取进度信息。

服务器端与Web端建立全双工通信连接后，不断对进度信息进行计算，获取进度信息。

步骤S23：服务器端将获取的进度信息发送给Web端。

服务器端获取进度信息后，则将获取的进度信息发送给Web端，以使Web端根据该进度信息刷新进度条。当进度完结后，服务器端通知Web端进度完成，Web端显示进度完成，并关闭连接。关闭连接时，Web端向服务器端发送请求关闭连接，服务器端收到请求后解析请求，并关闭连接。

服务器端发送进度信息时，可以实时的发送，也可以定时(即每隔一段时间)的发送。还可以预设一第二阈值，每当进度信息的增量达到第二阈值时，服务器端则向Web端发送一次进度信息。

参见图4，提出本发明进度条的控制方法第三实施例，包括以下步骤：

步骤S31：Web端初始化进度条的显示。

本步骤S31中，Web端优选通过使用jQuery和CSS来实现进度条的显示和初始化。其中，jQuery是一套跨浏览器的JavaScript库，简化HTML(标准通用标记语言的一个应用)与JavaScript之间的操作；CSS即层叠样式表单，是英文Cascading Style Sheets的缩写，它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

举例而言，用户在点击上传时，页面(Web端)开始进度条的初始化，显示文件上传的进度为0％，显示效果如图2所示。

步骤S32：Web端与服务器端之间建立全双工通信连接。

本步骤S32中，Web端与服务器端之间通过全双工通信协议建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

具体的，Web端初使化一个WebSocket组件，通过该WebSocket组件与服务器端建立全双工通信连接。在实现websocket连线过程中，需要通过Web端发出WebSocket连线请求，然后服务器端发出回应，这个过程通常称为“握手”(handshaking)。即Web端和服务器端只需要做一个握手的动作，Web端和服务器端之间就形成了一条快速通道，二者之间就可以直接进行数据互传。

在此WebSocket协议中，为实现即时服务带来了两大好处：一是互相沟通的标头信息(Header)很小，大概只有2个字节(Bytes)；二是可以实现Server Push，即服务器可以主动传送数据给Web端。

在一具体应用场景中，Web端与服务器端之间建立连接的过程如下：

Web端向服务器端发送http请求，服务器端对请求进行检查，如果是合法的请求头，则根据请求的KEY生成对应的值，发送握手信息到Web端，二者握手成功，建立连接。具体的协议报文如下:

Web端请求报文:

GET/HTTP/1.1

Connection:Upgrade

Host:127.0.0.1:8088

Origin:null

Sec-WebSocket-Extensions:x-webkit-deflate-frame

Sec-WebSocket-Key:puVOuWb7rel6z2AVZBKnfw＝＝

Sec-WebSocket-Version:13

Upgrade:websocket

其中，请求附加的头信息”Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求。

服务器端返回报文:

HTTP/1.1 101Switching Protocols

Connection:Upgrade

Server:beetle websocket server

Upgrade:WebSocket

Date:Mon,26Nov 2012 23:42:44GMT

Access-Control-Allow-Credentials:true

Access-Control-Allow-Headers:content-type

Sec-WebSocket-Accept:FCKgUr8c7OsDsLFeJTWrJw6WO8Q＝

服务器端解析请求头信息，服务器端接收请求后主要是针对Sec-WebSocket-Key生成Sec-WebSocket-Accept的安全密钥(key)，并将安全密钥并返回给客户端，以表明服务器端获取了客户端的请求，握手完成，同意创建WebSocket连接。

协议规定数据通过帧序列传输。优选地，考虑到数据的安全性，Web端必须对其发送到服务器端的所有数据帧进行掩码处理，服务器一旦收到无掩码帧，将关闭连接；而服务器端发送Web端的数据帧则不做掩码处理，一旦Web端发现经过掩码处理的帧，将关闭连接。针对上述情况，发现错误的一方可向对方发送close帧(状态码是1002，表示协议错误)，以关闭连接。

数据帧结构如图5所示，其中：

FIN：1位

表示这是消息的最后一帧(结束帧)，一个消息由一个或多个数据帧构成。若消息由一帧构成，起始帧即结束帧。

RSV1，RSV2，RSV3：各1位

如果未定义扩展，各位是0；如果定义了扩展，即为非0值。如果接收的帧此处非0，扩展中却没有该值的定义，那么关闭连接。

OPCODE：4位

解释PayloadData，如果接收到未知的opcode，接收端必须关闭连接。

0x0表示附加数据帧

0x1表示文本数据帧

0x2表示二进制数据帧

0x3-7暂时无定义，为以后的非控制帧保留

0x8表示连接关闭

0x9表示ping

0xA表示pong

0xB-F暂时无定义，为以后的控制帧保留

MASK：1位

用于标识PayloadData是否经过掩码处理。如果是1，Masking-key域的数据即是掩码密钥，用于解码PayloadData。客户端发出的数据帧需要进行掩码处理，所以此位是1。

Payload length：7位，7+16位，7+64位

PayloadData的长度(以字节为单位)。

如果其值在0-125，则是payload的真实长度。

如果值是126，则后面2个字节形成的16位无符号整型数的值是payload的真实长度。注意，网络字节序，需要转换。

如果值是127，则后面8个字节形成的64位无符号整型数的值是payload的真实长度。注意，网络字节序，需要转换。

长度表示遵循一个原则，用最少的字节表示长度(尽量减少不必要的传输)。举例说，payload真实长度是124，在0-125之间，必须用前7位表示；不允许长度1是126或127，然后长度2是124，这样违反原则。Payload长度是ExtensionData长度与ApplicationData长度之和。ExtensionData长度可能是0，这种情况下，Payload长度即是ApplicationData长度。

步骤S33：服务器端获取进度信息，并将获取的进度信息发送给Web端。

服务器端与Web端建立全双工通信连接后，不断对进度信息进行计算，获取进度信息，并将获取的进度信息发送给Web端。

服务器端发送进度信息时，可以实时的发送，也可以定时(即每隔一段时间)的发送。还可以预设一第二阈值，每当进度信息的增量达到第二阈值时，服务器端则向Web端发送一次进度信息。

步骤S34：Web端接收进度信息，并根据接收的进度信息刷新进度条。

本步骤S34中，Web端接收到进度信息后，根据接收到的进度信息对进度条进行刷新。Web端在刷新进度条时，可以实时的刷新，也可以定时(即每隔一段时间)的刷新。还可以预设一第一阈值，每当进度信息的增量达到第一阈值时，Web端刷则新一次进度条。

当进度完结后，服务器端通知Web端进度完成，Web端显示进度完成，并关闭连接。关闭连接时，Web端向服务器端发送请求关闭连接，服务器端收到请求后解析请求，并关闭连接。

举例来说，如图6所示，为Web端与服务器端的交互示意图，包括以下流程：

①Web端初始化WebSocket组件，初始化后与服务器端建立连接。

②服务端根据已上传了文件的大小和文件的总大小，计算已上传的百分比。

③服务器端将计算的进度数通知给Web端，底层实际就是通过套接字信息流的写入，通过建立的TCP连接，发送给Web端，Web端收到服务器返回的信息后，触发js的onMessage方法，在该方法中获取通知的进度信息并刷新进度条。

④每隔时间t服务器端计算一下文件上传的进度值n1％。

⑤服务器端将进度通知Web端，Web端刷新进度条。

⑥在文件上传完成后，将100％上传进度通知Web端，Web端刷新进度条，显示上传完成，web端发送请求关闭连接，服务器端接收请求后关闭连接。

从而，本实施例的进度条的控制方法，通过在Web端和服务器端之间建立全双工通信连接，由服务器端将获取的进度信息主动发送给Web端，以使Web端直接根据接收到的进度信息刷新进度条，实现了对进度条的控制。相对于现有技术中通过Web端轮询和长轮询服务器端来实现进度条控制的方式，本实施例的优点在于：在全双工通信连接下，服务器端可以主动传送数据给Web端，因此无需频繁的创建TCP请求及销毁请求，而且服务器端与客户端之间交换的标头信息很小，大概只有2字节，从而大大减少了网络带宽资源的占用，同时也节省了服务器资源。

参见图7，提出本发明应用于Web端的进度条的控制装置一实施例，所述装置包括初始化单元、第一连接单元和刷新单元，其中：

初始化单元：用于初始化进度条的显示。

本实施例中，初始化单元优选通过使用jQuery和CSS来实现进度条的显示和初始化。其中，jQuery是一套跨浏览器的JavaScript库，简化HTML(标准通用标记语言的一个应用)与JavaScript之间的操作；CSS即层叠样式表单，是英文Cascading Style Sheets的缩写，它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

第一连接单元：用于与服务器端建立全双工通信连接。

本实施例中，第一连接单元通过全双工通信协议与服务器端建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

具体的，第一连接单元初使化一个WebSocket组件，通过该WebSocket组件与服务器端建立全双工通信连接。在实现WebSocket连线过程中，需要通过Web端的第一连接单元发出websocket连线请求，然后服务器端发出回应，这个过程通常称为“握手”(handshaking)。即Web端和服务器端只需要做一个握手的动作，Web端和服务器端之间就形成了一条快速通道，二者之间就可以直接进行数据互传。

在此WebSocket协议中，为实现即时服务带来了两大好处：一是互相沟通的标头信息(Header)很小，大概只有2个字节(Bytes)；二是可以实现Server Push，即服务器可以主动传送数据给Web端。

刷新单元：用于接收服务器端发送的进度信息，并根据进度信息刷新进度条。

刷新单元在刷新进度条时，可以实时的刷新，也可以定时(即每隔一段时间)的刷新。还可以预设一第一阈值，每当进度信息的增量达到第一阈值时，刷新单元则新一次进度条。

当进度完结后，服务器端通知Web端进度完成，Web端显示进度完成，并关闭连接。关闭连接时，Web端向服务器端发送请求关闭连接，服务器端收到请求后解析请求，并关闭连接。

参见图8，提出本发明应用于服务器端的进度条的控制装置一实施例，所述装置包括第二连接单元、获取单元和发送单元，其中：

第二连接单元：用于与Web端建立全双工通信连接。

第二连接单元通过全双工通信协议与Web端建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

在实现WebSocket连线过程中，需要通过Web端发出websocket连线请求，然后服务器端的第二连接单元发出回应，这个过程通常称为“握手”(handshaking)。即Web端和服务器端只需要做一个握手的动作，Web端和服务器端之间就形成了一条快速通道，二者之间就可以直接进行数据互传。

在此WebSocket协议中，为实现即时服务带来了两大好处：一是互相沟通的标头信息(Header)很小，大概只有2个字节(Bytes)；二是可以实现Server Push，即服务器可以主动传送数据给Web端。

获取单元：用于获取进度信息。

在服务器端与Web端建立全双工通信连接后，获取单元不断对进度信息进行计算，获取进度信息。

发送单元：用于将进度信息发送给Web端，以使Web端根据进度信息刷新进度条。

发送单元发送进度信息时，可以实时的发送，也可以定时(即每隔一段时间)的发送。还可以预设一第二阈值，每当进度信息的增量达到第二阈值时，服务器端则向Web端发送一次进度信息。当进度完结后，服务器端的发送单元则通知Web端进度完成，Web端显示进度完成，并关闭连接。

参见图9，提出本发明进度条的控制系统一实施例，所述进度条的控制系统包括Web端和服务器端，所述Web端与服务器端建立了全双工通信连接。其中，所述服务器端用于获取进度信息，并将进度信息发送给Web端；所述Web端用于初始化进度条的显示，接收服务器端发送的进度信息，并根据接收到的进度信息刷新进度条。

Web端与服务器端之间可以通过全双工通信协议建立全双工通信连接，全双工通信协议优选WebSocket协议，其中WebSocket协议是HTML5一种新的协议(protocol)，它可以实现浏览器与服务器(即Web端与服务器端)全双工通信(full-duplex)。

服务器端与Web端建立全双工通信连接后，不断计算进度信息，并将进度信息发送给Web端。服务器端发送进度信息时，可以实时的发送，也可以定时(即每隔一段时间)的发送。还可以预设一第二阈值，每当进度信息的增量达到第二阈值时，服务器端则向Web端发送一次进度信息。

Web端接收到进度信息后，根据接收到的进度信息对进度条进行刷新。Web端在刷新进度条时，可以实时的刷新，也可以定时(即每隔一段时间)的刷新。还可以预设一第一阈值，每当进度信息的增量达到第一阈值时，Web端刷则新一次进度条。

当进度完结后，服务器端通知Web端进度完成，Web端显示进度完成，并关闭连接。关闭连接时，Web端向服务器端发送请求关闭连接，服务器端收到请求后解析请求，并关闭连接。

本发明系统实施例中的服务器端和Web端，正是前述方法实施例中所涉及的服务器端和Web端，方法实施例中的技术特征在系统实施例中均对应实用。或者，可以理解为，本发明系统实施例中的服务器端包括一前述实施例涉及的应用于服务器端的进度条的控制装置，Web端包括一前述实施例涉及的应用于Web端的进度条的控制装置，前述装置实施例中的技术特征在系统实施例中均对应实用。

从而，本实施例的进度条的控制装置和系统，通过在Web端和服务器端之间建立全双工通信连接，由服务器端将获取的进度信息主动发送给Web端，以使Web端直接根据接收到的进度信息刷新进度条，实现了对进度条的控制。相对于现有技术中通过Web端轮询和长轮询服务器端来实现进度条控制的方式，本实施例的优点在于：在全双工通信连接下，服务器端可以主动传送数据给Web端，因此无需频繁的创建TCP请求及销毁请求，而且服务器端与客户端之间交换的标头信息很小，大概只有2字节，从而大大减少了网络带宽资源的占用，同时也节省了服务器资源。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (16)

1.一种进度条的控制方法，应用于Web端，其特征在于，包括步骤：

所述Web端初始化进度条的显示；

所述Web端与服务器端建立全双工通信连接；

所述Web端接收所述服务器端发送的进度信息，并根据所述进度信息刷新所述进度条。

2.根据权利要求1所述的进度条的控制方法，其特征在于，所述根据所述进度信息刷新所述进度条包括：

所述Web端根据所述进度信息实时或定时的刷新所述进度条，或者

每当所述进度信息的增量达到第一阈值时，所述Web端刷新一次所述进度条。

3.根据权利要求1或2所述的进度条的控制方法，其特征在于，所述Web端与所述服务器端建立全双工通信连接包括：

所述Web端初使化一个WebSocket组件，通过所述WebSocket组件与所述服务器端建立全双工通信连接。

4.根据权利要求1或2所述的进度条的控制方法，其特征在于，所述Web端初始化进度条的显示包括：所述Web端通过jQuery和CSS实现进度条的显示和初始化。

5.一种进度条的控制方法，应用于服务器端，其特征在于，包括步骤：

所述服务器端与所述Web端建立全双工通信连接；

所述服务器端获取进度信息，并将所述进度信息发送给所述Web端，以使所述Web端根据所述进度信息刷新进度条。

6.根据权利要求5所述的进度条的控制方法，其特征在于，所述将所述进度信息发送给所述Web端包括：

所述服务器端实时或定时的将所述进度信息发送给所述Web端，或者

每当所述进度信息的增量达到第二阈值时，所述服务器端向所述Web端发送一次所述进度信息。

7.一种进度条的控制方法，其特征在于，包括步骤：

Web端初始化进度条的显示；

所述Web端与服务器端之间建立全双工通信连接；

所述服务器端获取进度信息，并将所述进度信息发送给Web端；

所述Web端接收所述进度信息，并根据所述进度信息刷新所述进度条。

8.根据权利要求7所述的进度条的控制方法，其特征在于，所述根据所述进度信息刷新所述进度条包括：

Web端根据所述进度信息实时或定时的刷新所述进度条，或者

每当所述进度信息的增量达到第一阈值时，Web端刷新一次所述进度条。

9.一种进度条的控制装置，应用于Web端，其特征在于，包括初始化单元、第一连接单元和刷新单元，其中：

所述初始化单元，用于初始化进度条的显示；

所述第一连接单元，用于与服务器端建立全双工通信连接；

所述刷新单元，用于接收所述服务器端发送的进度信息，并根据所述进度信息刷新所述进度条。

10.根据权利要求9所述的进度条的控制装置，其特征在于，所述刷新单元用于：

根据所述进度信息实时或定时的刷新所述进度条，或者

每当所述进度信息的增量达到第一阈值时，刷新一次所述进度条。

11.根据权利要求9或10所述的进度条的控制装置，其特征在于，所述第一连接单元用于：

初使化一个WebSocket组件，通过所述WebSocket组件与服务器端建立全双工通信连接。

12.根据权利要求9或10所述的进度条的控制装置，其特征在于，所述初始化单元用于：

通过jQuery和CSS实现进度条的显示和初始化。

13.一种进度条的控制装置，应用于服务器端，其特征在于，包括第二连接单元、获取单元和发送单元，其中：

所述第二连接单元，用于与Web端建立全双工通信连接；

所述获取单元，用于获取进度信息；

所述发送单元，用于将所述进度信息发送给所述Web端，以使所述Web端根据所述进度信息刷新进度条。

14.根据权利要求13所述的进度条的控制装置，其特征在于，所述发送单元用于：

实时或定时的将所述进度信息发送给所述Web端，或者

每当所述进度信息的增量达到第二阈值时，向所述Web端发送一次所述进度信息。

15.一种进度条的控制系统，其特征在于，包括Web端和服务器端，所述Web端与服务器端建立了全双工通信连接，其中：

所述服务器端，用于获取进度信息，并将所述进度信息发送给所述Web端；

所述Web端，用于初始化进度条的显示，接收所述服务器端发送的进度信息，并根据所述进度信息刷新所述进度条。

16.根据权利要求15所述的进度条的控制系统，其特征在于，所述Web端用于：根据所述进度信息实时或定时的刷新所述进度条；或者，每当所述进度信息的增量达到第一阈值时，Web端刷新一次所述进度条。