基于SpringBoot和WebSocket的实时电力可视化系统的研究与实现

刘金帅 葛明涛 胡海峰 刘沛杰

摘 要：【目的】电力系统实时数据的可视化在快速了解电力运行状态、数据分析与决策中具有重要意义，因此研究并实现一种基于SpringBoot和WebSocket的实时电力数据可视化系统。【方法】系统采用前后端分离开发模式，前端运用HTML、JQuery、Echarts等技术展示电力数据，后端借助SpringBoot框架与MySQL数据库实现数据交互。通过WebSocket技术实现实时数据传输，前端借助Ajax和WebSocket技术向后端发起数据请求，并获得实时电力数据。【结果】通过设计合理的接口和数据交互方式，将电力系统实时数据以直观的图表方式展示在前端页面上，实现数据可视化显示的功能，从而提升用户对电力信息的获取效率。【结论】实验结果验证了该方法的复用性和可拓展性，证明了其能够满足电力系统实时数据可视化的需求，为电力管理与决策提供了有力支持。

关键词：SpringBoot；WebSocket；Ajax；Echarts；数据可视化

中图分类号：TM76；TP311.13   文献标志码：A   文章编号：1003-5168（2024）07-0010-04

DOI：10.19968/j.cnki.hnkj.1003-5168.2024.07.002

Research and Implementation of Real-Time Power Visualization System Based on SpringBoot and WebSocket

LIU Jinshuai GE Mingtao HU Haifeng LIU Peijie

（Pingdingshan university，Pingdingshan 467000， China）

Abstract： [Purposes] The visualization of real-time data of power system is of great significance in the rapid understanding of power operation status， data analysis and decision-making. Therefore this paper aims to study and implement a real-time power data visualization system based on SpringBoot and WebSocket. [Methods] The system adopts the front-end and back-end separation development mode. The front-end uses HTML， JQuery and Echarts to display power data， and the back-end uses the SpringBoot framework to interact with the MySQL database. Real-time data transmission is realized through WebSocket technology. The front-end uses Ajax and WebSocket technology to initiate data requests to the back-end and obtain real-time power data. [Findings] By designing a reasonable interface and data interaction method， the real-time data of the power system is displayed on the front-end page in an intuitive chart way， and the function of data visualization is realized， so as to improve the efficiency of users ' acquisition of power information. [Conclusions] The experimental results verify the reusability and extensibility of the method， and prove that it can meet the needs of real-time data visualization of power system， which provides strong support for power management and decision-making.

Keywords： SpringBoot；WebSocket； Ajax；Echarts；data visualization

0 引言

隨着信息技术的快速发展，电力系统作为当代社会重要的基础设施，在整个社会中发挥着不可或缺的作用。电力系统的稳定运行和高效管理对于保障国民经济运行和居民日常生活具有重要意义。然而，随着电力系统规模的不断扩大和复杂性的增加，电力数据的监测、管理、决策变得日益复杂与烦琐。

在过去，电力系统的数据监测和管理主要依靠人工采集和手动录入，这种方式不仅效率低下，而且容易出现数据误差和延迟，难以满足对电力数据实时性和准确性的要求［1］。随着互联网、物联网和大数据技术的应用，传统的电力数据管理方式也面临着新的挑战和机遇。

在此背景下，本研究设计了一种基于SpringBoot和WebSocket技术的实时电力可视化系统，通过前后端分离的开发模式，充分利用现代Web技术的优势，实现对电力系统实时数据的监测、传输、展示。该方法将前端的HTML、JQuery、Ajax技术与后端的SpringBoot框架和MySQL数据库相结合，通过WebSocket实现实时数据传输，为电力系统的数据管理与决策提供充分支持。

1 总体架构

该系统采用前后端分离的开发模式，基于 MVVM 软件架构开发模式进行系统的开发。前端使用Echarts和 BootStrap框架进行设计开发；后端采用 SpringBoot框架，利用MyBatis访问MySQL数据库接口［2］。前、后端功能划分明确，前端负责对后端的数据进行接收与显示，后端负责对数据库接口进行编写供前端调用。

系统的总体架构如图1所示，主要包括前端UI显示层、控制层、表现层、服务层、数据持久层、数据库层的架构。数据存储在SSL远程数据库，通过 Navicat Premium 16工具连接到MySQL数据库，在定义变量的基本类型后，Data实体类复写数据库字段类型和名称，并设置Setter和Getter等方法便于封装。数据持久层使用Mapper编写数据库SQL语句和映射关系，并使用Mybatis实现数据库的访问；服务层用来封装业务逻辑；表现层在应用程序中起到连接用户请求和业务逻辑处理的作用，通过接收用户请求，根据请求信息进行路由，处理业务逻辑并渲染视图后返回用户；控制层使用Ajax发送GET、POST、PUT请求至后端获取折线图数据，利用WebSocket实现实时电力数据的接收；前端UI显示层通过BootStrap和Echarts等框架显示从后端获取的实时数据。

2 关键技术

2.1 前端数据展示技术

前端数据展示是实现实时数据可视化的重要环节。在该系统中，采用HTML、JQuery、Echarts等技術实现对电力系统数据的可视化展示。

HTML是一种标记语言，广泛应用于构建Web页面结构［3］。通过HTML的灵活标签和元素，可以将实时数据以直观的方式展示在前端页面上，从而满足用户对电力运行状态实时监测的需求。

JQuery是一种快速、简洁的JavaScript库，它封装了许多常用的操作和功能，能够极大地简化JavaScript的编码过程［4］。在前端数据展示中，可以利用JQuery的特性来处理前端页面与后端数据的交互，实现数据的动态加载和刷新。

Echarts是一款由百度开发的强大数据可视化库，提供了丰富的图表类型和交互功能［5］。通过Echarts可以选择合适的图表类型，如折线图、柱状图、饼状图等，将数据以直观、清晰的方式展示在前端页面上。

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术［6］。通过使用Ajax技术，前端页面能够在不重新加载整个页面的情况下向服务器收起数据请求，并将获得的数据动态更新到页面上。在该系统中，前端通过Ajax技术向后端发起数据请求，并获取实时电力数据，实现前后端的数据交互和实时更新。

2.2 后端数据交互技术

后端数据交互是实现实时数据可视化的另一重要环节。在该系统中，选用SpringBoot框架和MySQL数据库实现后端数据交互。

SpringBoot是基于Spring Framework的快速开发框架，它简化了项目的配置和搭建，提供了丰富的功能和插件，能够快速实现Web应用的开发。通过SpringBoot，方便用户搭建后端服务，处理前端数据请求的发起，并将数据传递给前端展示。

MySQL是一种常用的关系型数据库管理系统，将电力系统的实时数据存储在MySQL数据库中。通过数据表的设计，将时间戳、总发电量、电池耗电量等信息存储在相应的字段中，实现数据的持久化管理。

2.3 实时数据传输技术

实时数据传输是实现实时数据可视化的核心技术。在该系统中，采用WebSocket技术完成实时数据的低延迟传输。

WebSocket是基于TCP连接上实现全双工通信的一种网络协议，WebSocket协议支持Web浏览器与Web 服务器之间的数据交互，具有较低的性能开销［7］。相较于传统的HTTP协议，WebSocket具有低延迟、高效率的优势，非常适用于实时数据传输［8］。

3 研究方法

3.1 数据传输与交互

在前端，通过SockJS和Stomp.js技术，实现了与后端WebSocket的连接。一旦建立了WebSocket连接，前端可以订阅特定的主题Topic，以便在后端实时数据更新时接收通知。为了实现折线图的实时更新，前端需要使用 Ajax 技术向后端发起数据请求，以获取最新的电力数据。在收到 WebSocket 通知后，前端使用Ajax从后端获取最新数据，然后通过 Echarts 将数据实时展示在折线图中。

在后端，当有新的实时数据可以应用时，通过SimpMessagingTemplate类向前端推送消息，实现实时数据的传输。在数据更新的时候，后端可以调用SimpMessagingTemplate的convertAndSend方法将最新数据发送到前端指定的主题，然后前端运用 Ajax 技术获取到实时数据，并将其展示在折线图中。

通过WebSocket和Ajax技术的结合，前端可以实现实时更新折线图和获取实时数据，使电力系统中的实时数据得以直观地展示在前端页面，为管理者提供及时的数据分析和决策支持。

3.2 数据库设计与数据处理

为了满足电力系统数据的存储和查询需求，该系统采用MySQL数据库进行数据管理。数据库中设计了Data和DataTime两张表格结构来进行数据存储，其中，Data表用来存储折线图的数据，表中数据有存储第一标识的id、时间戳time、耗电量、风产储能量等数据；DataTime表用来存储实时的数据，表中数据有存储第一标识的id、时间戳time、总发电量、电池耗电量等信息。后端通过DataMapper类实现与数据库的数据交互，包括数据的插入和查询。部分代码如下：

@Mapperpublic interface DataMapper ｛void insertData（Data data）；//插入折线图的数据

List getAllData（）；//查询所有折线图的数据

void insertRealData（data_time data_time）；data_time getLatestData（）；//查询最新的实时数据｝

4 系统实现与结果分析

为了验证和研究基于SpringBoot和WebSocket的电力系统实时数据可视化方法的有效性，本研究对该系统进行了实验分析，主要分为前端数据展示和后端数据传输两个方面。

4.1 前端数据展示实现

前端数据展示实验采用Echarts技术来实现对电力系统实时数据的可视化展示。通过使用HTML搭建了一个大数据可视化的Web页面，包含用电量、发电量、风产电量、总电量的实时变化数据和折线图。运用WebSocket和Ajax技术，前端向后端发起数据请求，并实时获取最新的电力数据。

数据可视化界面如图2所示。前端数据展示部分成功地將电力系统的实时数据以直观的文字和折线图的方式展示在前端页面。用户可以通过图表直观地了解电力系统运行状态的实时变化情况，如用电量和发电量的波动趋势等，从而帮助管理者快速了解电力系统的运行情况。

4.2 后端数据传输实现

后端数据传输实验主要验证了WebSocket和SimpMessagingTemplate在实现实时数据传输方面的效果。在该系统中，运用SockJS和Stomp.js技术与后端建立WebSocket连接，并订阅特定的主题Topic以接收实时的电力数据。通过SimMessagingTemplate类将最新的电力数据实时推送到前端页面。当有新的实时数据可以应用时，后端即时向前端发送消息，使前端页面能够自动更新数据，无需手动刷新页面。

4.3 结果分析

实验结果表明，后端数据传输部分可以成功地实现实时数据的推送和传输。无论是用电量、发电量还是风产电量，前端页面都可以实时地显示最新数据，从而保持与电力系统实时数据的同步。

5 结语

本研究基于SpringBoot和WebSocket技术，提出并实现了一种电力系统实时数据可视化技术。通过前后端分离的开发模式，前端采用HTML、JQuery、Echarts技术进行数据展示，后端采用SpringBoot框架与MySQL数据库进行数据交互。通过WebSocket实现实时数据传输，保持前端页面与电力系统数据的同步更新。实验结果表明，该方法具有较强的复用性和可拓展性，能够满足电力系统实时数据可视化的需求，为电力管理与决策提供有效支持。

参考文献：

［1］ 苏斌.电力系统运营监测的可视化管理［J］.电子世界，2016（24）：175.

［2］ 王志亮，纪松波.基于SpringBoot的Web前端与数据库的接口设计［J］.工业控制计算机，2023，36（3）：51-53.

［3］ 邹晓丹.基于HTML5和CSS3的网页前端设计优化研究［J］.自动化应用，2023，64（S1）：217-219.

［4］ 周公平.基于jQuery框架的Web前端开发设计方法研究［J］.信息与电脑（理论版），2022，34（5）：128-130.

［5］ 许梦雅.基于Echarts技术的企业数据可视化的设计与开发［J］.现代信息科技，2022，6（6）：90-92，96.

［6］ 邱恒，李红云.基于Ajax与Echarts的动态数据可视化的研究［J］.电脑编程技巧与维护，2020（10）：148-150.

［7］孔晓阳，代真虎.基于WebSocket与Redis的高性能Web组态系统设计［J］.信息技术与标准化，2021（3）：51-56.

［8］李仲岐.基于WebSocket即时通信系统设计与实现［C］//天津市电子学会.第三十七届中国（天津）2023IT、网络、信息技术、电子、仪器仪表创新学术会议论文集.2023：129-131.

收稿日期：2023-08-14

基金项目：河南省科技攻关项目（242102241061，242102210131）。

作者简介：刘金帅（2002—），男，本科生，研究方向：大数据、软件开发。

通信作者：葛明涛（1979—），男，博士，副教授，研究方向：信号处理、大数据分析。