基于SpringBoot和WebSocket的實時電力可視化系統(tǒng)的研究與實現(xiàn)

劉金帥 葛明濤 胡海峰 劉沛杰

摘 要：【目的】電力系統(tǒng)實時數(shù)據(jù)的可視化在快速了解電力運行狀態(tài)、數(shù)據(jù)分析與決策中具有重要意義，因此研究并實現(xiàn)一種基于SpringBoot和WebSocket的實時電力數(shù)據(jù)可視化系統(tǒng)?！痉椒ā肯到y(tǒng)采用前后端分離開發(fā)模式，前端運用HTML、JQuery、Echarts等技術(shù)展示電力數(shù)據(jù)，后端借助SpringBoot框架與MySQL數(shù)據(jù)庫實現(xiàn)數(shù)據(jù)交互。通過WebSocket技術(shù)實現(xiàn)實時數(shù)據(jù)傳輸，前端借助Ajax和WebSocket技術(shù)向后端發(fā)起數(shù)據(jù)請求，并獲得實時電力數(shù)據(jù)。【結(jié)果】通過設(shè)計合理的接口和數(shù)據(jù)交互方式，將電力系統(tǒng)實時數(shù)據(jù)以直觀的圖表方式展示在前端頁面上，實現(xiàn)數(shù)據(jù)可視化顯示的功能，從而提升用戶對電力信息的獲取效率?！窘Y(jié)論】實驗結(jié)果驗證了該方法的復(fù)用性和可拓展性，證明了其能夠滿足電力系統(tǒng)實時數(shù)據(jù)可視化的需求，為電力管理與決策提供了有力支持。

關(guān)鍵詞：SpringBoot；WebSocket；Ajax；Echarts；數(shù)據(jù)可視化

中圖分類號：TM76；TP311.13? ?文獻標(biāo)志碼：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 引言

隨著信息技術(shù)的快速發(fā)展，電力系統(tǒng)作為當(dāng)代社會重要的基礎(chǔ)設(shè)施，在整個社會中發(fā)揮著不可或缺的作用。電力系統(tǒng)的穩(wěn)定運行和高效管理對于保障國民經(jīng)濟運行和居民日常生活具有重要意義。然而，隨著電力系統(tǒng)規(guī)模的不斷擴大和復(fù)雜性的增加，電力數(shù)據(jù)的監(jiān)測、管理、決策變得日益復(fù)雜與煩瑣。

在過去，電力系統(tǒng)的數(shù)據(jù)監(jiān)測和管理主要依靠人工采集和手動錄入，這種方式不僅效率低下，而且容易出現(xiàn)數(shù)據(jù)誤差和延遲，難以滿足對電力數(shù)據(jù)實時性和準確性的要求［1］。隨著互聯(lián)網(wǎng)、物聯(lián)網(wǎng)和大數(shù)據(jù)技術(shù)的應(yīng)用，傳統(tǒng)的電力數(shù)據(jù)管理方式也面臨著新的挑戰(zhàn)和機遇。

在此背景下，本研究設(shè)計了一種基于SpringBoot和WebSocket技術(shù)的實時電力可視化系統(tǒng)，通過前后端分離的開發(fā)模式，充分利用現(xiàn)代Web技術(shù)的優(yōu)勢，實現(xiàn)對電力系統(tǒng)實時數(shù)據(jù)的監(jiān)測、傳輸、展示。該方法將前端的HTML、JQuery、Ajax技術(shù)與后端的SpringBoot框架和MySQL數(shù)據(jù)庫相結(jié)合，通過WebSocket實現(xiàn)實時數(shù)據(jù)傳輸，為電力系統(tǒng)的數(shù)據(jù)管理與決策提供充分支持。

1 總體架構(gòu)

該系統(tǒng)采用前后端分離的開發(fā)模式，基于 MVVM 軟件架構(gòu)開發(fā)模式進行系統(tǒng)的開發(fā)。前端使用Echarts和 BootStrap框架進行設(shè)計開發(fā)；后端采用 SpringBoot框架，利用MyBatis訪問MySQL數(shù)據(jù)庫接口［2］。前、后端功能劃分明確，前端負責(zé)對后端的數(shù)據(jù)進行接收與顯示，后端負責(zé)對數(shù)據(jù)庫接口進行編寫供前端調(diào)用。

系統(tǒng)的總體架構(gòu)如圖1所示，主要包括前端UI顯示層、控制層、表現(xiàn)層、服務(wù)層、數(shù)據(jù)持久層、數(shù)據(jù)庫層的架構(gòu)。數(shù)據(jù)存儲在SSL遠程數(shù)據(jù)庫，通過 Navicat Premium 16工具連接到MySQL數(shù)據(jù)庫，在定義變量的基本類型后，Data實體類復(fù)寫數(shù)據(jù)庫字段類型和名稱，并設(shè)置Setter和Getter等方法便于封裝。數(shù)據(jù)持久層使用Mapper編寫數(shù)據(jù)庫SQL語句和映射關(guān)系，并使用Mybatis實現(xiàn)數(shù)據(jù)庫的訪問；服務(wù)層用來封裝業(yè)務(wù)邏輯；表現(xiàn)層在應(yīng)用程序中起到連接用戶請求和業(yè)務(wù)邏輯處理的作用，通過接收用戶請求，根據(jù)請求信息進行路由，處理業(yè)務(wù)邏輯并渲染視圖后返回用戶；控制層使用Ajax發(fā)送GET、POST、PUT請求至后端獲取折線圖數(shù)據(jù)，利用WebSocket實現(xiàn)實時電力數(shù)據(jù)的接收；前端UI顯示層通過BootStrap和Echarts等框架顯示從后端獲取的實時數(shù)據(jù)。

2 關(guān)鍵技術(shù)

2.1 前端數(shù)據(jù)展示技術(shù)

前端數(shù)據(jù)展示是實現(xiàn)實時數(shù)據(jù)可視化的重要環(huán)節(jié)。在該系統(tǒng)中，采用HTML、JQuery、Echarts等技術(shù)實現(xiàn)對電力系統(tǒng)數(shù)據(jù)的可視化展示。

HTML是一種標(biāo)記語言，廣泛應(yīng)用于構(gòu)建Web頁面結(jié)構(gòu)［3］。通過HTML的靈活標(biāo)簽和元素，可以將實時數(shù)據(jù)以直觀的方式展示在前端頁面上，從而滿足用戶對電力運行狀態(tài)實時監(jiān)測的需求。

JQuery是一種快速、簡潔的JavaScript庫，它封裝了許多常用的操作和功能，能夠極大地簡化JavaScript的編碼過程［4］。在前端數(shù)據(jù)展示中，可以利用JQuery的特性來處理前端頁面與后端數(shù)據(jù)的交互，實現(xiàn)數(shù)據(jù)的動態(tài)加載和刷新。

Echarts是一款由百度開發(fā)的強大數(shù)據(jù)可視化庫，提供了豐富的圖表類型和交互功能［5］。通過Echarts可以選擇合適的圖表類型，如折線圖、柱狀圖、餅狀圖等，將數(shù)據(jù)以直觀、清晰的方式展示在前端頁面上。

Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)［6］。通過使用Ajax技術(shù)，前端頁面能夠在不重新加載整個頁面的情況下向服務(wù)器收起數(shù)據(jù)請求，并將獲得的數(shù)據(jù)動態(tài)更新到頁面上。在該系統(tǒng)中，前端通過Ajax技術(shù)向后端發(fā)起數(shù)據(jù)請求，并獲取實時電力數(shù)據(jù)，實現(xiàn)前后端的數(shù)據(jù)交互和實時更新。

2.2 后端數(shù)據(jù)交互技術(shù)

后端數(shù)據(jù)交互是實現(xiàn)實時數(shù)據(jù)可視化的另一重要環(huán)節(jié)。在該系統(tǒng)中，選用SpringBoot框架和MySQL數(shù)據(jù)庫實現(xiàn)后端數(shù)據(jù)交互。

SpringBoot是基于Spring Framework的快速開發(fā)框架，它簡化了項目的配置和搭建，提供了豐富的功能和插件，能夠快速實現(xiàn)Web應(yīng)用的開發(fā)。通過SpringBoot，方便用戶搭建后端服務(wù)，處理前端數(shù)據(jù)請求的發(fā)起，并將數(shù)據(jù)傳遞給前端展示。

MySQL是一種常用的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，將電力系統(tǒng)的實時數(shù)據(jù)存儲在MySQL數(shù)據(jù)庫中。通過數(shù)據(jù)表的設(shè)計，將時間戳、總發(fā)電量、電池耗電量等信息存儲在相應(yīng)的字段中，實現(xiàn)數(shù)據(jù)的持久化管理。

2.3 實時數(shù)據(jù)傳輸技術(shù)

實時數(shù)據(jù)傳輸是實現(xiàn)實時數(shù)據(jù)可視化的核心技術(shù)。在該系統(tǒng)中，采用WebSocket技術(shù)完成實時數(shù)據(jù)的低延遲傳輸。

WebSocket是基于TCP連接上實現(xiàn)全雙工通信的一種網(wǎng)絡(luò)協(xié)議，WebSocket協(xié)議支持Web瀏覽器與Web 服務(wù)器之間的數(shù)據(jù)交互，具有較低的性能開銷［7］。相較于傳統(tǒng)的HTTP協(xié)議，WebSocket具有低延遲、高效率的優(yōu)勢，非常適用于實時數(shù)據(jù)傳輸［8］。

3 研究方法

3.1 數(shù)據(jù)傳輸與交互

在前端，通過SockJS和Stomp.js技術(shù)，實現(xiàn)了與后端WebSocket的連接。一旦建立了WebSocket連接，前端可以訂閱特定的主題Topic，以便在后端實時數(shù)據(jù)更新時接收通知。為了實現(xiàn)折線圖的實時更新，前端需要使用 Ajax 技術(shù)向后端發(fā)起數(shù)據(jù)請求，以獲取最新的電力數(shù)據(jù)。在收到 WebSocket 通知后，前端使用Ajax從后端獲取最新數(shù)據(jù)，然后通過 Echarts 將數(shù)據(jù)實時展示在折線圖中。

在后端，當(dāng)有新的實時數(shù)據(jù)可以應(yīng)用時，通過SimpMessagingTemplate類向前端推送消息，實現(xiàn)實時數(shù)據(jù)的傳輸。在數(shù)據(jù)更新的時候，后端可以調(diào)用SimpMessagingTemplate的convertAndSend方法將最新數(shù)據(jù)發(fā)送到前端指定的主題，然后前端運用 Ajax 技術(shù)獲取到實時數(shù)據(jù)，并將其展示在折線圖中。

通過WebSocket和Ajax技術(shù)的結(jié)合，前端可以實現(xiàn)實時更新折線圖和獲取實時數(shù)據(jù)，使電力系統(tǒng)中的實時數(shù)據(jù)得以直觀地展示在前端頁面，為管理者提供及時的數(shù)據(jù)分析和決策支持。

3.2 數(shù)據(jù)庫設(shè)計與數(shù)據(jù)處理

為了滿足電力系統(tǒng)數(shù)據(jù)的存儲和查詢需求，該系統(tǒng)采用MySQL數(shù)據(jù)庫進行數(shù)據(jù)管理。數(shù)據(jù)庫中設(shè)計了Data和DataTime兩張表格結(jié)構(gòu)來進行數(shù)據(jù)存儲，其中，Data表用來存儲折線圖的數(shù)據(jù)，表中數(shù)據(jù)有存儲第一標(biāo)識的id、時間戳time、耗電量、風(fēng)產(chǎn)儲能量等數(shù)據(jù)；DataTime表用來存儲實時的數(shù)據(jù)，表中數(shù)據(jù)有存儲第一標(biāo)識的id、時間戳time、總發(fā)電量、電池耗電量等信息。后端通過DataMapper類實現(xiàn)與數(shù)據(jù)庫的數(shù)據(jù)交互，包括數(shù)據(jù)的插入和查詢。部分代碼如下：

@Mapperpublic interface DataMapper ｛void insertData（Data data）；//插入折線圖的數(shù)據(jù)

List getAllData（）；//查詢所有折線圖的數(shù)據(jù)

void insertRealData（data_time data_time）；data_time getLatestData（）；//查詢最新的實時數(shù)據(jù)｝

4 系統(tǒng)實現(xiàn)與結(jié)果分析

為了驗證和研究基于SpringBoot和WebSocket的電力系統(tǒng)實時數(shù)據(jù)可視化方法的有效性，本研究對該系統(tǒng)進行了實驗分析，主要分為前端數(shù)據(jù)展示和后端數(shù)據(jù)傳輸兩個方面。

4.1 前端數(shù)據(jù)展示實現(xiàn)

前端數(shù)據(jù)展示實驗采用Echarts技術(shù)來實現(xiàn)對電力系統(tǒng)實時數(shù)據(jù)的可視化展示。通過使用HTML搭建了一個大數(shù)據(jù)可視化的Web頁面，包含用電量、發(fā)電量、風(fēng)產(chǎn)電量、總電量的實時變化數(shù)據(jù)和折線圖。運用WebSocket和Ajax技術(shù)，前端向后端發(fā)起數(shù)據(jù)請求，并實時獲取最新的電力數(shù)據(jù)。

數(shù)據(jù)可視化界面如圖2所示。前端數(shù)據(jù)展示部分成功地將電力系統(tǒng)的實時數(shù)據(jù)以直觀的文字和折線圖的方式展示在前端頁面。用戶可以通過圖表直觀地了解電力系統(tǒng)運行狀態(tài)的實時變化情況，如用電量和發(fā)電量的波動趨勢等，從而幫助管理者快速了解電力系統(tǒng)的運行情況。

4.2 后端數(shù)據(jù)傳輸實現(xiàn)

后端數(shù)據(jù)傳輸實驗主要驗證了WebSocket和SimpMessagingTemplate在實現(xiàn)實時數(shù)據(jù)傳輸方面的效果。在該系統(tǒng)中，運用SockJS和Stomp.js技術(shù)與后端建立WebSocket連接，并訂閱特定的主題Topic以接收實時的電力數(shù)據(jù)。通過SimMessagingTemplate類將最新的電力數(shù)據(jù)實時推送到前端頁面。當(dāng)有新的實時數(shù)據(jù)可以應(yīng)用時，后端即時向前端發(fā)送消息，使前端頁面能夠自動更新數(shù)據(jù)，無需手動刷新頁面。

4.3 結(jié)果分析

實驗結(jié)果表明，后端數(shù)據(jù)傳輸部分可以成功地實現(xiàn)實時數(shù)據(jù)的推送和傳輸。無論是用電量、發(fā)電量還是風(fēng)產(chǎn)電量，前端頁面都可以實時地顯示最新數(shù)據(jù)，從而保持與電力系統(tǒng)實時數(shù)據(jù)的同步。

5 結(jié)語

本研究基于SpringBoot和WebSocket技術(shù)，提出并實現(xiàn)了一種電力系統(tǒng)實時數(shù)據(jù)可視化技術(shù)。通過前后端分離的開發(fā)模式，前端采用HTML、JQuery、Echarts技術(shù)進行數(shù)據(jù)展示，后端采用SpringBoot框架與MySQL數(shù)據(jù)庫進行數(shù)據(jù)交互。通過WebSocket實現(xiàn)實時數(shù)據(jù)傳輸，保持前端頁面與電力系統(tǒng)數(shù)據(jù)的同步更新。實驗結(jié)果表明，該方法具有較強的復(fù)用性和可拓展性，能夠滿足電力系統(tǒng)實時數(shù)據(jù)可視化的需求，為電力管理與決策提供有效支持。

參考文獻：

［1］ 蘇斌.電力系統(tǒng)運營監(jiān)測的可視化管理［J］.電子世界，2016（24）：175.

［2］ 王志亮，紀松波.基于SpringBoot的Web前端與數(shù)據(jù)庫的接口設(shè)計［J］.工業(yè)控制計算機，2023，36（3）：51-53.

［3］ 鄒曉丹.基于HTML5和CSS3的網(wǎng)頁前端設(shè)計優(yōu)化研究［J］.自動化應(yīng)用，2023，64（S1）：217-219.

［4］ 周公平.基于jQuery框架的Web前端開發(fā)設(shè)計方法研究［J］.信息與電腦（理論版），2022，34（5）：128-130.

［5］ 許夢雅.基于Echarts技術(shù)的企業(yè)數(shù)據(jù)可視化的設(shè)計與開發(fā)［J］.現(xiàn)代信息科技，2022，6（6）：90-92，96.

［6］ 邱恒，李紅云.基于Ajax與Echarts的動態(tài)數(shù)據(jù)可視化的研究［J］.電腦編程技巧與維護，2020（10）：148-150.

［7］孔曉陽，代真虎.基于WebSocket與Redis的高性能Web組態(tài)系統(tǒng)設(shè)計［J］.信息技術(shù)與標(biāo)準化，2021（3）：51-56.

［8］李仲岐.基于WebSocket即時通信系統(tǒng)設(shè)計與實現(xiàn)［C］//天津市電子學(xué)會.第三十七屆中國（天津）2023IT、網(wǎng)絡(luò)、信息技術(shù)、電子、儀器儀表創(chuàng)新學(xué)術(shù)會議論文集.2023：129-131.

收稿日期：2023-08-14

基金項目：河南省科技攻關(guān)項目（242102241061，242102210131）。

作者簡介：劉金帥（2002—），男，本科生，研究方向：大數(shù)據(jù)、軟件開發(fā)。

通信作者：葛明濤（1979—），男，博士，副教授，研究方向：信號處理、大數(shù)據(jù)分析。