基于B/S架构的“齐鲁风云”监控系统设计与实现

国婷婷，宋萍，任广治，赵子龙，张越

（1.山东省气象服务中心，山东 济南 250031；2.济南市气象局，山东 济南 250031；3.枣庄市气象局，山东 枣庄 277000）

0 引 言

近年来，随着移动互联网技术的飞速发展以及气象数据量的迅猛增长，气象服务需求发生了重大改变，用户希望能够随时随地看到更多的气象服务信息，气象管理人员也需要及时向政府和行业用户提供决策服务。有鉴于此，山东省气象局自主研发了一款气象服务产品“齐鲁风云”APP。该软件采用PHP、Javascript等汇编语言，基于用户的实际需求实现了雷达云图检测、降水检测、实况气象信息、24小时精细等多个特色气象服务产品。目前该软件已经在山东各级气象部门、各级政府决策部门以及服务行业用户群中广泛使用，对气象工作人员和各行各业的使用者起到了重要的气象指导作用。

伴随着云计算、大数据技术的迅猛发展以及“齐鲁风云”APP的不断推广，服务器中的数据量和数据种类逐渐增多，面对庞杂的数据传输，单纯依靠人力监控是远远满足不了用户的服务需求的，在系统运维的过程中，管理员也必须时刻关注服务器的运行状态。为了能够及时发现问题，尽量减少故障的发生，亟需采用一种信息化的手段来时刻监督APP的运行。因此，本文将基于B/S架构开发“齐鲁风云”APP的监控系统，以实时监控服务器的运行状态、各模块的数据传输状况、用户数量的变动以及访问状态的异常情况，确保APP能够稳定持续地运行，切实提高APP的服务数据质量。

1 相关技术

1.1 B/S架构

B/S架构即浏览器/服务器架构模式，是一个三层架构，包括应用层、业务逻辑层和数据管理层。B/S架构相较于C/S架构具有异地浏览和信息采集灵活的优点，用户只需安装浏览器即可，无需另外安装客户端。当需要改变应用逻辑时，只需更新服务器端的应用程序即可，同时客户端不受操作系统的限制，通过主流Chrome、IE、Edge、火狐浏览器就可以访问服务器端的程序并实现数据交互。与C/S架构相比，B/S架构能够消除数据库瓶颈，方便管理人员维护，而且浏览器与服务器可直接进行数据输入输出交换，大大减小了本地终端的压力，降低了系统维护的成本。

1.2 异步更新技术

异步更新技术（Asynchronous javascript and xml, Ajax）包括HTML、CSS、JavaScript、DOM、XML和XSLT等技术。使用Ajax技术网页无需刷新页面即可向服务器传输或读写数据，该操作方法可以使程序更快地响应用户的请求。Ajax轮询请求则是客户端定时向服务端发送Ajax请求，服务器在接收到请求后即刻返回响应信息并关闭连接，然后客户端继续发送Ajax请求，循环往复。

2 系统设计

2.1 框架设计

根据山东省专业行业气象服务要求，采用B/S架构模式，基于服务器状态、卫星云图、雷达监测、实况等数据，建立集数据监控、服务器状态监控及用户访问量监控于一体的“齐鲁风云”监控系统，实现对数据传输的实时监控以及对服务器状态的可视化展示，以便工作人员及时发现问题，从而更好地为气象工作人员和各级政府部门提供决策支撑。

如图1所示，系统总体架构由数据管理层、业务逻辑层和应用层三部分组成。数据管理层采用MySQL作为监控数据的存储系统，用于收集和保存各个模块的监测数据，基于数据库管理技术实现对入库数据的管控，实现应用层的各种数据请求，为系统提供基础的数据及用户信息；业务逻辑层使用PHP、shell等开发语言，采用Ajax轮询的方式让浏览器定时发送请求询问服务器是否有新信息，定时检测数据库、数据文件传输及服务器状态信息，为应用层提供服务器状态查询、数据入库时间查询、用户访问量查询等服务；应用层是基于数据管理层和业务逻辑层而构建的“齐鲁风云”监控系统，采用HTML5、Javascript、CSS等开发语言进行编写，使用HTML编写页面的基本框架，采用CSS对页面系统进行美化，使用Javascript编写脚本实现对HTML元素的读入以及对浏览器事件的响应，页面中的可视化图表采用Echarts组件，以便直观生动地为用户提供服务器状态、数据入库时间、用户访问量展示等服务，实现对服务器和数据传输的实时监控，为专业气象服务提供有力的技术支撑。

图1 系统总体架构

2.2 功能设计

“齐鲁风云”监控系统是基于HTML5标准建设的Web服务端，采用Echarts插件实现对服务器状态、内存使用情况等信息的动态显示，采用Web GIS技术实现对不同地区用户访问信息的展示，旨在为各行业工作人员提供更好的专业气象服务，实现对“齐鲁风云”服务器和各类气象数据的实时监控，实现对软件用户的系统管理，主要的系统功能为：

（1）服务器状态。动态显示服务器的开机时间、CPU使用情况、系统进程、内存使用量及各磁盘空间等服务器状态信息，以便工作人员随时了解服务器状态，及时处理因服务器状态不佳而带来的软件问题。

（2）用户信息管理。显示用户的注册量和日访问量，以及在地图上动态显示各个地区的用户使用情况，以不同大小的图标来显示各地区的用户使用量，当鼠标指在某区域时会显示该地区的用户活跃量。

（3）数据信息管理。管理卫星云图、雷达拼图、环境预报等气象数据的入库时间，如若数据没有按照规定的时间（即超出了设定的时间阈值）到达指定文件夹，系统则会显示异常警告，同时发出告警声音提示。

3 系统功能实现与应用

3.1 数据库设计

齐鲁风云监控系统采用MySQL作为开发平台，构建气象监控系统基础数据库，根据系统需求来区分，其核心数据库主要包括3个数据表，分别为用户信息表、数据信息表、服务器状态信息表，数据库表结构如表1所示。

表1 数据库表结构

用户信息表主要存储用户的注册信息及使用信息，表中的主要字段有id（用户名）、tellphone（手机号）、Registration_time（注册时间）、use_time（最近使用时间）；数据信息表主要储存齐鲁风云APP的各类气象数据信息及入库时间信息，主要字段有data_name（数据名称）、type（数据类型）、create_time（数据入库时间）；服务器状态信息表主要存储服务器不同时刻的状态信息，该表中的主要字段有时间编号（time_code）、剩余内存量（free_memory）、剩余CPU（free_cpu）。

3.2 服务端实现

使用php、shell开发语言，通过Ajax轮询技术查看服务器是否有新信息，定时检测服务器状态及数据库、数据文件的传输状态；采用MySQL作为监控数据的存储系统，对收集到的新数据执行入库操作，以供前端的调取展示。客户端从浏览页面上请求服务器查询SQL数据，服务器接收到命令后，响应客户端的要求建立数据连接，最终将相应数据展示到浏览器页面中。检测数据传输状态的核心代码为：

3.3 前端实现

前端采用html5+Javascript+css开发语言，实现服务器状态、用户信息及数据传输信息的展示。基于后端查询到的信息及阈值的判断，将在前端展示预警信息，以便工作人员及时处理突发状况。主要的功能模块如下：

（1）服务器状态模块。查询当前时刻服务器状态信息（主要包括服务器的开机时长、CPU占用情况、内存剩余量、进程数等）并将其展示在主页面上。同时针对CPU使用情况、内存占用情况及各磁盘空间，采用Echarts技术制作可视化饼图、柱状图等展示于首页，以便更加清晰明了地展示服务器状态信息。服务器状态查询的核心代码为：

（2）用户信息模块。用户信息模块用于展示当前用户量、今日访问量以及活跃用户的地区分布。其中，用户量及今日访问量信息从sdqx_user数据表中获取，会员活跃度信息则通过调取山东地图的Js文件展示于用户信息模块，并可通过Web GIS技术将其反映在地图上，以便直观地显示各地区用户的使用量。用户信息可通过查询数据库获得，部分代码为：

（3）数据传输信息模块。数据传输信息模块用于展示各气象数据是否按时到达数据库，由此可以看出APP上各数据是否按时更新。通过检查各个气象数据的入库时间，并以之前设置的报警阈值作为参考标准，若超出阈值，则会发出异常警告，工作人员可根据警报信息及时处理相应的问题，从而为行业用户提供更好的气象服务，数据采集显示方式如图2所示。

图2 数据传输情况图

3.4 实际应用

为了统计齐鲁风云APP的用户使用信息以及动态监控服务器的状态信息和数据传输情况，本文基于B/S架构开发了“齐鲁风云”监控系统，系统应用显示如图3所示，主要包括服务器状态、用户信息管理及数据传输情况三大部分，从可视化的监控界面中可以直观地看到系统的运维状况，当服务器运行异常或出现数据传输不及时等问题时，监控系统可自动弹出报警信息，大大减少了运维人员的工作量，为APP的平稳运行奠定了坚实的技术基础。

4 结 论

为了更好地提供专业气象服务，本文在“齐鲁风云”APP的基础上，继续开发了基于B/S架构的监控管理系统。运用数据库建设、Ajax轮询、Web GIS和Echarts可视化等技术，对服务器的运行状态、用户的使用情况以及各类气象数据是否正常等进行了全方位的监控，实现了对各类气象数据和服务器状态的实时可视化监测，切实提高了APP的服务质量，同时大大减少了运维工作人员的工作量，为专业气象服务奠定了坚实的技术基础。

图3 齐鲁风云监控系统