CN101076030A

CN101076030A - 实时图形的传送系统及其方法

Info

Publication number: CN101076030A
Application number: CN 200610127897
Authority: CN
Inventors: 吴双; 董鹏
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2006-09-27
Filing date: 2006-09-27
Publication date: 2007-11-21

Abstract

本发明公开了一种实时图形的传送系统，该系统包括客户端浏览器和服务器，其中，服务器，用于向客户端浏览器提供嵌入用于请求数据的脚本语言代码和用于绘图的脚本语言代码的页面以及与图形对应的数据；客户端浏览器，用于向服务器请求所述页面，以及根据所述用于请求数据的脚本语言代码向服务器请求数据，并根据用于绘图的脚本语言代码和所述数据绘制得到图形。本发明还提供了一种实时图形的传送方法。本发明降低了所需要传送的数据量，减轻了网络带宽的压力，能够快捷地向传送数据。而且，本发明不需要特定的客户端软件，用户可以在任何客户端上实时浏览所请求的图形，从而方便了用户的使用。

Description

实时图形的传送系统及其方法

技术领域

本发明涉及互联网技术领域，特别是一种实时图形的传送系统以及一种实施图形的传送方法。

背景技术

随着互联网技术的发展，在网络上实时传送图形的业务很多，例如，如图1所示的股市行情图。这类业务都有一个共同的特点：需要实时的刷新。以图1中的股市行情图为例，在服务器端实时产生了图形的数据或者图形，那么在客户端就需要实时地显示对应的图形，也就是说在客户端需要定时刷新所述图形。

目前，对于实时传送图形的业务，通常有如下几种实现方案。

现有技术一：服务器端定时生成图形，客户端定时请求刷新。

根据现有技术一的方案，服务器端定时根据图形数据生成图形，而客户端则定时向服务器端请求服务器端所生成的图形，并通过显示设备显示给用户，从而达到定时刷新的目的。

根据上述方案，由于客户端定时向服务器端请求图形，而图形一般具有很大的数据量，例如一张未压缩的640×480的图形，每像素需要24bit，则该图共需要640×480×24＝7372800比特数据。因此现有技术一的方案在传输图形的过程中需要占用大量的网络带宽，导致服务器端需要承受非常大的压力。进一步，还会导致图形在网络中的传输速度较慢，结果虽然客户端实时请求了图形，但是不能够实时获得图形，使得在客户端显示时所表现的实时性较差。

现有技术二：服务器端提供数据，客户端定时获取数据，由特定的客户端软件绘图得到图形。

在现有技术二中，服务器端只提供数据，并不根据数据生成具体的图形，而是向客户端提供数据以及一系列的绘图指令。客户端定时向服务器端请求数据，利用特定的客户端软件，根据所述数据以及绘图指令绘制出对应的图形，并且通过显示设备显示给用户。

所述绘图指令例如：Line(0，0，20，20)、circle(333，233，50)等。其中，Line(0，0，20，20)表示画一条从点(0，0)到点(20，20)的线；circle(333，233，50)表示画一个以(333，233)为圆心、50为半径的园。

采用现有技术二的方案，虽然在网络中的数据传输量大大减少，但是该方案需要发行并在客户端安装特定的客户端软件，非常不方便。

发明内容

有鉴于此，本发明提出了一种实时图形的传送系统，其目的在于，能够方便快捷地向客户端提供实时图形。本发明的另一个目的在于提出一种实时图形的传送方法。

根据上述目的，本发明提供了一种实时图形的传送系统，该系统包括客户端浏览器和服务器，其中，

服务器，用于向客户端浏览器提供嵌入用于请求数据的脚本语言代码和用于绘图的脚本语言代码的页面以及与图形对应的数据；

客户端浏览器，用于向服务器请求所述页面，以及根据所述用于请求数据的脚本语言代码向服务器请求数据，并根据用于绘图的脚本语言代码和所述数据绘制得到图形。

所述服务器进一步包括判断单元，用于在收到客户端浏览器的数据请求时判断是否存在新数据，并在存在新数据的情况下由服务器向客户端浏览器发送所述新数据。

所述服务器包括WEB服务器和数据服务器，其中，所述WEB服务器用于向客户端浏览器提供嵌入所述脚本语言代码的页面；所述数据服务器用于向客户端浏览器提供所述数据。

所述数据服务器进一步包括判断单元，用于在收到客户端浏览器的数据请求时判断是否存在新数据，并在存在新数据的情况下由数据服务器向客户端浏览器发送所述新数据。

本发明还提供了一种实时图形的传送方法，该方法包括以下步骤：

A.客户端浏览器向服务器请求页面，服务器向客户端浏览器返回嵌入用于请求数据的脚本语言代码和用于绘图的脚本语言代码的页面；

B.客户端浏览器根据所述用于请求数据的脚本语言代码向服务器请求得到数据，并根据所述用于绘图的脚本语言代码和所述数据绘制得到图形。

步骤A中进一步包括服务器对客户端进行鉴权的步骤，并在鉴权通过时，向客户端浏览器返回所述页面。

步骤B中客户端浏览器向服务器请求得到数据的步骤包括：客户端浏览器根据所述用于请求数据的脚本语言代码向服务器请求数据，并携带客户端的数据识别信息；服务器根据所述客户端的数据识别信息与服务器中的数据识别信息判断是否存在新数据，如果是，则将所述新数据发送给客户端浏览器。

该方法进一步包括：服务器在判断出不存在新数据时，向客户端浏览器发送提示消息。

所述数据识别信息为数据的时间戳或顺序号。

从上述方案中可以看出，由于本发明在提供给客户端浏览器的页面中嵌入了用于请求数据的脚本语言代码和用于绘图的脚本语言代码，客户端浏览器可以根据教本语言代码请求数据并绘制得到对应的图形。一方面，本发明只用提供数据，因此降低了所需要传送的数据量，减轻了网络带宽的压力，能够快捷地向传送数据；另一方面，本发明不需要特定的客户端软件，用户可以在任何客户端上实时浏览所请求的图形，从而方便了用户的使用。另外，本发明进一步将服务器分为提供页面的WEB服务器和提供数据的数据服务器，减轻了各服务器的数据传送压力，从而进一步保证了实时性。

附图说明

图1为网络中所传送的实时图形示意图；

图2为本发明第一实施例中系统的结构示意图；

图3为本发明第一实施例中方法的流程示意图；

图4为本发明第二实施例中系统的结构示意图；

图5为本发明第二实施例中方法的流程示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，以下举实施例对本发明进一步详细说明。

本发明的核心思想是，在页面中嵌入脚本语言代码，然后客户端运行脚本语言代码，向服务器端请求数据，在获得数据后，再运行脚本语言代码绘制出对应的图形。这样，不仅降低了所传送的数据量，而且在客户端也不需要特定的客户端软件，从而可以提高图形传输显示的实时性，也方便了用户在客户端的使用。所述脚本语言代码可是JavaScript代码或者VBScript等等，本发明并不局限于此，为了方面描述，在以下的实施例中以JavaScript为例说明。

图2为本发明第一实施例的系统结构示意图。参照图2，该系统可以分为客户端和服务器端，客户端实时向服务器端请求数据，并实时显示对应的图形。

在如图2所示的系统中，客户端包括客户端浏览器10，服务器端包括服务器20。其中，客户端浏览器10主要用于向服务器20请求有关页面，以及根据所返回页面中嵌入的用于请求数据的JavaScript代码向服务器20请求数据，并利用所返回页面中嵌入的用于绘图的JavaScript代码和所述数据绘制得到图形，并显示给用户。所述客户端浏览器10可以是网络探索者(Internet Explorer，IE)、网景(Netscape)的浏览器Navigator或者火狐(FireFox)等。

服务器20主要用于根据客户端浏览器10的请求，向客户端浏览器10提供已经嵌入所述用于请求数据的JavaScript代码和所述用于绘图的JavaScript代码的页面，以及返回所述数据。

进一步，服务器20还可以包括判断单元30，该判断单元30用于在收到客户端浏览器10的数据请求时判断是否存在新数据，并在存在新数据的情况下由服务器20向客户端浏览器10发送数据。

图3为本发明第一实施例的流程示意图。参照图3，本发明第一实施例的流程包括以下步骤：

步骤101，客户端浏览器10向服务器20请求页面。

步骤102，服务器20对客户端进行鉴权，如果鉴权通过，则执行步骤103；否则，不向客户端浏览器10提供页面，还可以进一步向客户端浏览器发送鉴权失败的提示。所述鉴权可以采用现有技术中常见的鉴权机制，这里不再赘述。

步骤103，服务器20向客户端浏览器10返回其所请求的页面，该页面中已经嵌入了用于请求数据的JavaScript代码和用于绘图的JavaScript代码。

步骤104，客户端浏览器10运行所述用于请求数据的JavaScript代码，向服务器20请求数据。在请求消息中需要携带所请求数据的标识(ID)，用以表明希望获取什么数据。在请求消息中还可以进一步携带客户端的数据识别信息，例如时间戳或顺序号等，服务器20可以根据数据识别信息来查询是否有新的数据。

下面是定时请求数据的函数实例。

function Check()

{

checkreq()；

setTimeout(′Check′，5000)；

}

其中，“chechreq()”是用于一次请求数据的函数，将在下面给予解释；“setTimeout(′Check′，5000)”表示5秒之后再次调用Check函数。

下面给出其中“chechreq()”的示例。

function checkreq()

{

var url＝″http：//abc.com/data/getdata？timestamp＝20060623080910&funid＝32″

var xmlHttp＝CreatexmlHttp()；

xmlHttp.open(″GET″，url，true)；

xmlHttp.onreadystatechange＝updatePage；

xmlHttp.send(null)；

}

在上述代码中，“function chechreq()”是用于一次请求的函数；“var url＝″http：//abc.com/data/getdata？timestamp＝20060623080910&funid＝32””用于构造请求字符串，其中包括时间戳“timestamp”和数据的ID“funid＝32”；“var xmlHttp＝CreatexmlHttp()”用于构造一个发送请求的对象；“xmlHttp.open(″GET″，url，true)”用于发送请求；“xmlHttp.onreadystatechange＝updatePage”是用来处理返回数据的函数，在数据返回时，系统自动调用该函数；“xmlHttp.send(null)”用于发送请求。

步骤105至步骤106，服务器20中的判断单元30根据请求中的时间戳以及本地数据的时间戳来判断是否有新的数据，如果两个时间戳一样，则表明没有新的数据，那么服务器20不向客户端浏览器10发送数据，还可以进一步向客户端浏览器10发送表示没有新数据的提示。

如果请求中的时间戳与本地数据的时间戳不同，则表明有新的数据，那么判断单元30通知服务器20向客户端浏览器10返回其所请求的数据。

服务器返回的数据可以采用如下的绘图指令形式：

var data＝new Array(x1，y1，x2，y2......)

其中包括了绘图需要的数据。

步骤107，客户端浏览器10收到所述数据后，运行所述用于绘图的JavaScript代码，绘制出对应的图形，从而将图形显示给用户。

图形的绘制由JavaScript代码完成，可以采用现有的一些JavaScript图形库来实现，例如http：//www.walterzorn.com/上所给出的图形库。

以如上图形库为例，下面给出一段用于绘图的JavaScript代码实例。

<!--

var jg＝new jsGraphics(″myCanvas″)；

//-->

.....

Jg.drawLine(160，200，30，60)；

.....

</script>

在上面所给出的用于绘图的JavaScript代码中，“<div id＝″myCanvas″style＝″position：relative；height：220px；width：220px；″>”用于创建一个绘图的区域；“<script type＝″text/javascript″>”表示脚本代码的类型；“var jg＝newjsGraphics(″myCanvas″)”用于创建一个画图的对象；“Jg.drawLine(160，200，30，60)”表示以(160，200)为起点(30，60)为终点画一条线。

通过上述流程，就能够及时方便地向客户端实时传送图形。

在第一实施例中，由服务器20统一提供页面和数据。如图4所示，本发明第二实施例将服务器20分为用于提供页面的WEB服务器40和用于提供数据的数据服务器50，这样，每个WEB服务器40或数据服务器50的数据传输压力就会得到降低。

参照图4，本发明第二实施例的系统同样可以分为客户端和服务器端。

在如图4所示的系统中，客户端包括客户端浏览器10，服务器端包括服务器20，并且服务器20进一步分为WEB服务器40和数据服务器50。

其中，客户端浏览器10主要用于向WEB服务器40请求有关页面，以及根据所返回页面中嵌入的用于请求数据的JavaScript代码向数据服务器50请求数据，并利用所返回页面中嵌入的用于绘图的JavaScript代码和所述数据绘制得到图形，并显示给用户。与第一实施例相同，所述客户端浏览器10可以是IE、Netscape的Navigator或者FireFox等。

WEB服务器40主要用于根据客户端浏览器10的请求，向客户端浏览器10提供已经嵌入所述用于请求数据的JavaScript代码和所述用于绘图的JavaScript代码的页面。数据服务器50主要用户根据客户端浏览器10的请求，向客户端浏览器10提供所述数据。

进一步，数据服务器50还可以包括判断单元30，该判断单元30用于在收到客户端浏览器10的数据请求时判断是否存在新数据，并在存在新数据的情况下由数据服务器50向客户端浏览器10发送数据。

图5为本发明第二实施例的流程示意图。参照图5，本发明第二实施例的流程包括以下步骤：

步骤201，客户端浏览器10向WEB服务器40请求页面。

步骤202，WEB服务器40对客户端进行鉴权，如果鉴权通过，则执行步骤203；否则，不向客户端浏览器10提供页面，还可以进一步向客户端浏览器发送鉴权失败的提示。所述鉴权可以采用现有技术中常见的鉴权机制，这里不再赘述。

步骤203，WEB服务器40向客户端浏览器10返回其所请求的页面，该页面中已经嵌入了用于请求数据的JavaScript代码和用于绘图的JavaScript代码。

步骤204，客户端浏览器10运行所述用于请求数据的JavaScript代码，向数据服务器50请求数据。在请求消息中需要携带所请求数据的标识(ID)，用以表明希望获取什么数据。在请求消息中还可以进一步携带客户端的数据识别信息，例如时间戳或顺序号等，数据服务器50可以根据数据识别信息来查询是否有新的数据。这里所采用的定时请求数据的函数与第一实施例相同，这里不再赘述。

步骤205至步骤206，数据服务器50中的判断单元30根据请求中的时间戳以及本地数据的时间戳来判断是否有新的数据，如果两个时间戳一样，则表明没有新的数据，那么数据服务器50不向客户端浏览器10发送数据，还可以进一步向客户端浏览器10发送表示没有新数据的提示。如果请求中的时间戳与本地数据的时间戳不同，则表明有新的数据，那么判断单元30通知数据服务器50向客户端浏览器10返回其所请求的数据。这里数据服务器所返回的数据可以与第一实施例相同的形式。

步骤207，客户端浏览器10收到所述数据后，运行所述用于绘图的JavaScript代码，绘制出对应的图形，从而将图形显示给用户。具体绘制过程与第一实施例相同，这里不再赘述。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1、一种实时图形的传送系统，其特征在于，该系统包括客户端浏览器和服务器，其中，

2、根据权利要求1所述的系统，其特征在于，所述服务器进一步包括判断单元，用于在收到客户端浏览器的数据请求时判断是否存在新数据，并在存在新数据的情况下由服务器向客户端浏览器发送所述新数据。

3、根据权利要求1所述的系统，其特征在于，所述服务器包括WEB服务器和数据服务器，其中，

所述WEB服务器用于向客户端浏览器提供嵌入所述脚本语言代码的页面；

所述数据服务器用于向客户端浏览器提供所述数据。

4、根据权利要求3所述的系统，其特征在于，所述数据服务器进一步包括判断单元，用于在收到客户端浏览器的数据请求时判断是否存在新数据，并在存在新数据的情况下由数据服务器向客户端浏览器发送所述新数据。

5、一种实时图形的传送方法，其特征在于，该方法包括以下步骤：

6、根据权利要求5所述的方法，其特征在于，步骤A中进一步包括服务器对客户端进行鉴权的步骤，并在鉴权通过时，向客户端浏览器返回所述页面。

7、根据权利要求5所述的方法，其特征在于，步骤B中客户端浏览器向服务器请求得到数据的步骤包括：

客户端浏览器根据所述用于请求数据的脚本语言代码向服务器请求数据，并携带客户端的数据识别信息；

服务器根据所述客户端的数据识别信息与服务器中的数据识别信息判断是否存在新数据，如果是，则将所述新数据发送给客户端浏览器。

8、根据权利要求7所述的方法，其特征在于，该方法进一步包括：服务器在判断出不存在新数据时，向客户端浏览器发送提示消息。

9、根据权利要求7或8所述的方法，其特征在于，所述数据识别信息为数据的时间戳或顺序号。