一种基于客户端存储的气象可视化系统

摘要

本发明公开了一种基于客户端存储的气象可视化系统，客户端主动调用服务端的数据，服务端通过WebSocket对象向客户端推送数据；客户端包括气象数据客户端存储模块、气象数据客户端展示模块、气象数据监控模块、气象数据前端预处理模块、接口基础数据模块和气象数据客户端操作模块，气象数据客户端展示模块、气象数据监控模块、气象数据客户端操作模块均与气象数据客户端存储模块连接，气象数据监控模块与接口基础数据模块连接，接口基础数据模块通过气象数据前端预处理模块与气象数据客户端存储模块连接。本发明减少了客户端和服务端的请求次数；用户可快速打开气象可视化界面，在节省开销的同时也提高了整体的体验效果。

权利要求

1.一种基于客户端存储的气象可视化系统，其特征在于，包括客户端（7）和服务端（8），所述客户端（7）主动调用服务端（8）的数据，所述服务端（8）通过WebSocket对象向客户端（7）推送数据；

所述客户端（7）包括气象数据客户端存储模块（1）、气象数据客户端展示模块（2）、气象数据监控模块（3）、用于对数据进行归类的气象数据前端预处理模块（4）、接口基础数据模块（5）和气象数据客户端操作模块（6），所述气象数据客户端操作模块（6）用于通过操作界面输入文本信息、语音信息和资源信息；所述气象数据客户端展示模块（2）、气象数据监控模块（3）、气象数据客户端操作模块（6）均与气象数据客户端存储模块（1）连接，所述气象数据监控模块（3）与接口基础数据模块（5）连接，所述接口基础数据模块（5）通过气象数据前端预处理模块（4）与气象数据客户端存储模块（1）连接；

所述WebSocket对象为一个构造函数，用于新建 WebSocket 实例；通过所述WebSocket对象中的readyState属性返回实例对象的当前状态，用于判断所述客户端（7）与服务端（8）是正在连接、连接关闭或连接失败；所述WebSocket对象中的onopen属性，用于设定连接成功后的回调函数，在所述回调函数中向服务端（8）发送请求；所述WebSocket对象的onmessage 属性，用于接收服务端（8）返回的数据，通过onclose属性关闭所述WebSocket对象与服务端（8）的连接；

所述气象数据客户端存储模块（1）以IndexedDB数据库的形式进行分类存储不同的气象类型表的气象数据；

所述气象数据客户端展示模块（2）通过调用IndexedDB数据库中的不同的气象类型表的气象数据来展示气象变化的图形和图像；

所述气象数据前端预处理模块（4）用于将接口基础数据模块（5）返回的数据和IndexedDB数据库中的数据进行比对，如果IndexedDB数据库已经存在就不进行存储，否则就进行存储；

所述气象数据监控模块（3）采用WebSocket的方式来监控数据的变化；

所述接口基础数据模块（5）用于接收服务端（8）处理后返回的温度、压力、风力、湿度的数据。

2.根据权利要求1所述的基于客户端存储的气象可视化系统，其特征在于，所述客户端（7）和服务端（8）交互方法如下：

所述客户端（7）主动调用服务端（8）的数据，当请求结果获得后 ，返回给客户端（7）；

将所述服务端（8）的数据通过气象数据前端预处理模块（4）进行预处理，与IndexedDB数据库进行比较，如果IndexedDB数据库有该数据，不做存储，如果IndexedDB没有该数据就进行存储；

所述服务端（8）通过WebSocket向客户端（7）推送数据，如果所述客户端（7）展示的范围内的数据发生了改变，告知所述客户端（7），同时将结果返回给客户端（7）,所述客户端（7）同时对接受到的数据进行预处理，然后存储到IndexedDB数据库中；

所述客户端（7）直接调用IndexedDB数据库中的数据进行展示 ，在条件不变的情况下，可视化部分就可直接在客户端（7）的IndexedDB数据库中获取数据，可减少与服务端（8）的数据交互。

说明书

一种基于客户端存储的气象可视化系统

技术领域

[0001] 本发明涉及一种基于客户端存储的气象可视化系统，属于气象数据可视化技术领域。

背景技术

[0002] 随着当代科技的发展，气象数据作为各行业的基础支持信息，已与电力、航空、农业等各个行业的经营发展密不可分，同时也与人们的生活密不可分，由于气象数据具有多
源性、多维度性、数据量庞大等特点 ，同时气象可视化平台还需要具备易扩展性、通用性、
层次性等特性。从人们的生活角度看，已经在电力、航空、农业等领域有很多成功的应用。从
气象领域看，搭建一个直观的数据分析平台和数据展示平台，对于气象工作来说，能够帮助
其更加直接的看出气象发展的规律，从而做好一个预判。相对来说气象可视化技术到目前
为止还是比较完善的，然而就目前全球气象预报系统中数据量来看,如美国国家环境预测
中心的全球预报系统Global Forecast System，数据更新时间正常为6个小时更新一次，每
小时的数据量近300多兆，如果按照这样计算一个月的数据量就是海量数据，经过服务端处
理后提供成相应的格式的图形数据和图像数据也是非常大的，这样导致服务端和客户端数
据交互时消耗掉大量的带宽、CPU和内存，也同时消耗大量时间，同时当用户按照自己的需
求搜索展示时，展示自己筛选条件的效果时展示缓慢，使得可视化界面打开缓慢导致用户
体验不好，这些问题都是亟待解决的。

[0003] 目前大多数气象数据在客户端展示的时候主要采用http协议通信，因此只能由客户端发起，举例来说当我们想了解今天的天气的展示情况，只能是客户端向服务端发起请
求，目前采用最多的方式我们只能使用"轮询"每隔一段时间，就发出一个询问，了解服务器
有没有新的信息，这样导致整体的效率非常低，导致资源大量浪费。其次是之前的cookie和
LocalStorage只能存储少量的数据，所以对于气象这种大数据量，客户端无法存储在其中，
所以整个界面打开的速度主要依赖于服务端和客户端数据的传输速度，这导致在网络情况
稍微差点的情况下，打开界面的速度非常缓慢，导致整体的体验效果变差。

发明内容

[0004] 本发明的目的是克服现有技术中的不足，提供一种基于客户端存储的气象可视化系统，可视化部分就可以直接在客户端获取数据，减少了与服务端的数据交互，减少了客户
端和服务端的请求次数。

[0005] 为了达到上述目的，本发明是通过以下技术方案实现的：

[0006] 本发明一种基于客户端存储的气象可视化系统，包括客户端和服务端，客户端主动调用服务端的数据，所述服务端通过WebSocket对象向客户端推送数据；客户端包括气象
数据客户端存储模块、气象数据客户端展示模块、气象数据监控模块、用于对数据进行归类
的气象数据前端预处理模块、接口基础数据模块和气象数据客户端操作模块，所述气象数
据客户端操作模块用于通过操作界面输入文本信息、语音信息和资源信息；所述气象数据
客户端展示模块、气象数据监控模块、气象数据客户端操作模块均与气象数据客户端存储
模块连接，所述气象数据监控模块与接口基础数据模块连接，所述接口基础数据模块通过
气象数据前端预处理模块与气象数据客户端存储模块连接；WebSocket对象为一个构造函
数，用于新建 WebSocket 实例；通过所述WebSocket对象中的readyState属性返回实例对
象的当前状态，用于判断所述客户端与服务端是正在连接、连接关闭或连接失败；所述
WebSocket对象中的onopen属性，用于设定连接成功后的回调函数，在所述回调函数中向服
务端发送请求；所述WebSocket对象的onmessage 属性，用于接收服务端返回的数据，通过
所述onclose属性关闭所述WebSocket对象与服务端的连接。

[0007] 上述气象数据客户端存储模块以IndexedDB数据库的形式进行分类存储不同的气象类型表的气象数据。

[0008] 上述气象数据客户端展示模块通过调用IndexedDB数据库中的不同的气象类型表的气象数据来展示气象变化的图形和图像。

[0009] 上述气象数据前端预处理模块用于将接口基础数据模块返回的数据和IndexedDB数据库中的数据进行比对，如果IndexedDB数据库已经存在就不进行存储，否则就进行存
储。

[0010] 上述气象数据监控模块采用WebSocket的方式来监控数据的变化。

[0011] 上述接口基础数据模块用于接收服务端处理后返回的温度、压力、风力、湿度的数据。

[0012] 上述的基于客户端存储的气象可视化系统，其特征在于，所述客户端和服务端交互方法如下：

[0013] 所述客户端主动调用服务端的数据，当请求结果获得后 ，返回给客户端；

[0014] 将所述服务端的数据通过气象数据前端预处理模块进行预处理，与IndexedDB 数据库进行比较，如果IndexedDB数据库有该数据，不做存储，如果IndexedDB没有该数据就进
行存储；

[0015] 所述服务端通过WebSocket向客户端推送数据，如果所述客户端展示的范围内的数据发生了改变，告知所述客户端，同时将结果返回给客户端,所述客户端同时对接受到的
数据进行预处理，然后存储到IndexedDB数据库中；

[0016] 所述客户端直接调用IndexedDB数据库中的数据进行展示 ，在条件不变的情况下，可视化部分就可直接在客户端的IndexedDB数据库中获取数据，可减少与服务端的数据
交互。

[0017] 本发明的有益效果如下：本发明的客户端可以与任意服务端进行通信，同时服务端可以通过Websocket向客户端推送数据，这样就抛弃了那种消耗大量资源的方式，也可以
采用由客户端发起请求的方式，同时采用IndexedDB数据库的形式进行存储数据，气象数据
客户端展示模块通过调用IndexedDB数据库中的气象数据来展示气象变化的图形和图像，
这样在条件不变的情况下，可视化部分就可以直接在客户端的IndexedDB数据库中获取数
据，这样减少与服务端的数据交互，减少了大量开销，本发明减少了客户端和服务端的请求
次数，可以节省大量的带宽、CPU、还有内存的开销；同时用户可以快速打开气象可视化界
面，在节省开销的同时也提高了整体的体验效果。

附图说明

[0018] 图1为本发明的客户端的组成图；

[0019] 图2为本发明的服务端和客户端交互流程图。

具体实施方式

[0020] 下面结合说明书附图对本发明的技术方案作进一步说明：

[0021] 下面结合说明书附图对本发明的技术方案作进一步说明：

[0022] 术语解释：

[0023] IndexedDB：是一种客户端底层 API，用于在客户端存储大量的结构化数据，也包括文件或二进制大型对象（blobs），该 API 使用索引实现对数据的高性能搜索和存储。

[0024] WebSocket：是一种网络通信协议,它的最大特点就是，服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正的双向平等对话，属于服务器推送
技术的一种。

[0025] HTTP：超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求‑响应协议，它指定了客户端可能发送给服务端什么样的消息以及得到什么样的响应。

[0026] 如图1、图2所示，一种基于客户端存储的气象可视化系统，包括客户端7、服务端8，所述客户端7主动调用服务端8的数据，所述服务端8通过WebSocket对象向客户端7推送数
据，所述客户端7包括气象数据客户端存储模块1、气象数据客户端展示模块2、气象数据监
控模块3、气象数据前端预处理模块4、接口基础数据模块5、气象数据客户端操作模块6，所
述气象数据客户端展示模块2、气象数据监控模块3、气象数据客户端操作模块6都与气象数
据客户端存储模块1连接，所述气象数据监控模块3与接口基础数据模块5连接，所述接口基
础数据模块5通过气象数据前端预处理模块4与气象数据客户端存储模块1连接。所述
WebSocket对象为一个构造函数，用于新建 WebSocket 实例，执行成功后客户端7就会与服
务端8进行连接，然后通过WebSocket对象中的readyState属性返回实例对象的当前状态来
判断是正在连接还是连接关闭以及失败，通过WebSocket对象中的onopen属性，用于指定连
接成功后的回调函数，在回调函数中可以向服务端8发送请求，通过WebSocket对象的
onmessage 属性来接收服务端8返回的数据，通过WebSocket对象中的onclose属性来关闭
WebSocket与服务端8的连接。

[0027] 如图1‑2所示，气象数据客户端存储模块1以IndexedDB数据库的形式分类存储不同的气象类型表的气象数据，如气象数据为JSON格式的数据 或者图片的url地址。气象数
据客户端展示模块2通过调用IndexedDB数据库中的气象数据来展示气象变化的图形和图
像。气象数据监控模块3采用WebSocket的方式来监控数据的变化，服务端8可以主动向客户
端7推送数据，客户端7也可以主动向服务端8发送数据，能够更实时地进行通讯。气象数据
前端预处理模块4将接口基础数据模块5返回的数据和IndexedDB数据库中的数据进行比
对，如果IndexedDB数据库已经存在就不进行存储，否则就进行存储，所述气象数据前端预
处理模块还用于对数据进行归类，将风、温度等数据进行归类为后期存储做准备，同时进行
差异化处理，如果和之前的数据相同则不作处理，如果和之前的数据有差异则进行更新和
删除老的数据。接口基础数据模块5用于接收服务端8处理后返回的温度、压力、风力、湿度
的数据，气象数据客户端操作模块6用于用户通过操作界面输入文本信息、语音信息、资源
信息。

[0028] 图2为本发明的服务端8和客户端7交互流程图，总体包括以下内容：

[0029] 1、客户端7可以主动调用服务端8数据，当请求结果获得后，返回给客户端7。

[0030] 2、将数据返回结果通过气象数据前端预处理模块4进行预处理，与IndexedDB 数据库进行比较，如果IndexedDB数据库有该数据，不做存储，如果IndexedDB没有该数据就进
行存储。

[0031] 3、服务端8同时可以直接通过WebSocket向客户端7推送数据，即在客户端7展示的范围内的数据发生了改变，告知客户端7同时将结果返回给客户端7,客户端7同时对接受到
的数据进行预处理，然后存储到IndexedDB数据库中。

[0032] 4、客户端7直接调用IndexedDB数据库中的数据进行展示，这样在条件不变的情况下，可视化部分就可以直接在客户端7的IndexedDB数据库中获取数据，这样减少与服务端8
的数据交互，减少了大量开销。

[0033] 本发明支持通过Websocket技术加IndexedDB实现客户端气象数据可视化展示，WebSocket建立在TCP协议上，并且与HTTP协议有良好的兼容性，并且握手阶段采用HTTP协
议，因此握手时不容易被屏蔽，能通过任何代理服务器，WebSocket数据格式比较轻量，总体
性能开销相对较小，没有同源限制，客户端可以与任意服务端进行通信。同时服务端可以通
过Websocket向客户端推送数据，这样就抛弃了那种消耗大量资源，只能由客户端发起请求
的方式。同时采用IndexedDB客户端存储数据的方式，IndexedDB属于非关系型数据库，数据
以对象的形式存储，每个对象都有对应的key键名，当客户端展示相关的气象数据界面时，
首选先在IndexedDB数据库中查找。如有就直接展示，如果没有通过Websocket向服务端请
求数据，然后经过客户端对数据预处理后将数据进行存储。同时服务端在当前的筛选条件
下，如果数据有改变也对客户端进行数据推送，当客户端收到数据后，同样的方式进行处
理，这样减少了客户端和服务端的请求次数，可以节省大量的带宽、CPU、还有内存的开销。
同时用户可以快速打开气象可视化界面，在节省开销的同时也提高了整体的体验效果。

[0034] 以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施
例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换,凡在本发明的精
神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。