基于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—），男，博士，副教授，研究方向：信號處理、大數據分析。