JSON和Websocket在顯控軟件前后端數據交互中的應用

摘要：在某顯控平臺顯控軟件中，采用的是前后端分離的開發模式，前端為基于jQuery EasyUI的Web開發，主要用于界面顯示；后端為Qt開發，主要用于網絡報文的接收、解析與操控命令報文的發送等。文章旨在實現Qt后端與Web前端通過JSON和WebSocket相結合的數據交互方法，并在實際顯控平臺中得以應用。

關鍵詞：Web；Qt；JSON；Websocket；數據交互

中圖分類號：TP311" " " 文獻標識碼：A

文章編號：1009-3044（2025）08-0048-03

開放科學（資源服務） 標識碼（OSID）

0 引言

軍工某型號顯控平臺主要由數據處理組合、顯控一體機及操控模塊組成，數據處理組合采用VxWorks操作系統，內嵌數據處理軟件用于數據處理、模型算法解算等，并將數據組合成各種報文形式，通過UDP傳輸給顯控一體機顯示，顯控一體機采用銀河麒麟操作系統，顯控軟件運行在顯控一體機上。為了給用戶帶來更好的顯控界面視覺體驗，前端采用基于jQuery EasyUI的Web開發，后端采用技術成熟的Qt開發，因此，Qt后端與Web前端的數據交互方法成為本文研究的重點。鑒于Qt具有豐富的JSON庫，此外WebSocket為Web開發中最為常見的網絡通信方式，因此，本文采用JSON和WebSocket相結合的數據交互方法解決顯控軟件前后端數據交互問題。目前，該方法已在該顯控平臺上得到應用，經驗證，該方法有效可行。

1 研究背景

數據交互是指主體之間以數據的形式進行交流和協作的過程[1-3]，在應用軟件開發過程中，常用的數據交互方式有TCP/UDP傳輸協議的socket方式、FTP文件共享服務器方式、數據庫共享方式、message方式以及基于Web的WebSocket網絡通信方式[4]。在某顯控平臺顯控軟件中，采用的是前后端分離的開發模式，前端為基于jQuery EasyUI的Web開發，后端為Qt開發，因此采用能夠進行實時雙向數據傳輸的WebSocket網絡通信方式[5]。在Qt開發中，JSON是常用的輕量級數據交互格式[6]，具有語法簡單、數據量小、網絡傳輸效率高和良好的跨平臺能力等特點[7-9]，尤其在JavaScript環境中，JSON源自JavaScript，因此常通過內置的JSON.parse（）和JSON.stringify（）方法進行數據解析和生成，處理JSON數據特別方便。基于以上考慮，本文采用JSON和WebSocket相結合的數據交互方法解決顯控軟件前后端數據交互問題。

2 JSON和WebSocket在顯控軟件前后端數據交互中的應用

本文采用的是JSON與WebSocket相結合的數據交互方法進行Qt后端與Web前端之間的數據交互，主要通過Qt后端和Web前端的網絡建立，Qt后端通過UDP接收數據處理軟件各類網絡報文，經解析將數據轉換為JSON字符串格式，通過WebSocket發送給Web前端接收顯示。同時，Web前端響應相關操控命令，并將數據轉換為JSON字符串格式，通過WebSocket發送給Qt后端接收處理，最終組織相應操控命令報文經UDP發送給數據處理軟件，下面對具體軟件實施步驟進行介紹。

2.1 Qt后端網絡初始化

在Qt后端主線程MainWindow的initWebServer（）函數中初始化用于向Web端發送數據的WebSocketServer服務，當有新的WebSocket連接時，QWebSocketServer會觸發信號newConnection的處理方法onConnectWeb（），在onConnectWeb槽函數中創建WebSocket連接，將Qt后端顯示內容轉換為JSON字符串，發送信號sig_sendMsgToWeb將數據傳遞給Web前端。同時，創建接收Web前端JSON字符串數據的信號-槽連接，槽函數slot_MessageRecvFromWeb（）用于解析Web前端JSON字符串內容，并組織相關報文經UDP發送給數據處理軟件。最后，創建MainWindow的UI界面，讀取UI界面上設置的地址和端口號，啟動WebSocket網絡監聽機制，若返回值為true，則說明WebSocket連接成功，可進行Qt后端與Web前端的數據交互。Qt后端WebSocket初始化流程圖如圖1所示，主線程MainWindow的UI界面如圖2所示。

2.2 Web前端網絡初始化

首先設置WebSocket的LocalIP為本地地址127.0.0.1，端口號WebSocketPort為9652，與Qt后端端口號對應。然后在Web前端WebSocketClient.js中，創建WebSocket對象，指定服務器的URL，處理連接事件，若連接成功，在onopen事件中處理連接成功后的邏輯，接收消息，在onmessage事件中處理接收到的服務器消息。最后，若連接關閉，在onclose事件中對網絡進行定時重連。Web前端網絡初始化流程圖如圖3所示。

2.3 數據接收、顯示過程

數據的接收、顯示過程主要分為4個步驟，分別為Qt后端網絡接收數據，解析數據并轉換為JSON字符串格式發送給Web前端，Web前端接收JSON字符串數據，對數據進行解析和顯示。下面通過舉例介紹空情顯示報文22H的整個實現過程。

2.3.1 Qt后端網絡接收數據

Qt后端通過UDP通信方式接收數據處理軟件22H空情顯示報文，readDatagram將22H空情顯示報文數據存儲在QByteArray變量datagram中，判斷報頭報文標識ID，若值為0x22，則將datagram數據memcpy到空情顯示結構體變量skyShow中，并觸發信號-槽，在主進程MainWindow中創建信號-槽連接，在槽函數slot_NetMsgCome22H中對結構體數據進行解析處理。

2.3.2 向Web前端發送JSON字符串數據

在槽函數slot_NetMsgCome22H中，創建QJsonObject對象JSON，并插入鍵值對JSON.insert（\"cmd\"， \"recvData22H\"），此處用于標識網絡報文的報文標識ID，用于區分該JSON字符串顯示類型，以便于Web前端進行解析和顯示處理。創建QJsonArray對象jsTgtTable，用于存儲多目標數據，在for循環中對單個目標數據進行添加，具體為聲明QJsonObject對象subJSON，將Web前端需要顯示的參數插入subJSON中，如目標批號、距離、方位等，對應鍵名分別為“targetPH”“targetR”“tartgetA”，然后在for循環結束位置將subJSON添加到QJsonArray數組中，jsTgtTable.insert（t++， subJSON），最后插入JSON對象中JSON.insert（\"rows\"， QJsonValue（jsTgtTable）），并構建JSON文檔QJsonDocument對象document，將JSON對象設置到QJsonDocument，然后將QJsonDocument轉換為QByteArray，最后將QByteArray轉換為QString格式，并發送信號sig_sendMsgToWeb，經WebSocket連接傳送給Web前端。

2.3.3 Web前端接收數據并顯示

Web收到數據后在onmessage事件中處理接收到的服務器消息，調用handleMessage（data）處理函數，通過JSON.parse（data）進行解析，根據JSON字符串鍵名cmd獲取鍵值，判斷鍵值是否為\"recvData22H\"，若是，則該數據為Qt后端發過來的目標顯示報文內容，然后獲取多目標數據let datas = obj.rows，在datas.length個for循環中提取單個目標數據，如目標批號let batch = datas[i].targetPH，Web前端根據解析后的數據在Web地圖上進行目標顯示，如圖4所示。

2.4 操控命令發送過程

Web操控命令的發送主要分為4個步驟，分別為Web前端進行操控，組織相關操控命令JSON內容并發送給Qt后端，Qt后端接收JSON字符串內容并解析，組織相關操控命令報文通過UDP發送給數據處理軟件處理。下面通過舉例介紹目標請求報文51H的整個實現過程。

2.4.1 Web前端操控并發送操控命令內容

操作人員在Web前端地圖上使用鼠標左鍵選擇一批目標，例如批號為1002的目標，選中后該目標批號標牌內容展開顯示，如圖5所示，選中后通過目標按下事件 that.target.on 獲取目標批號 selectedTgt = that.options.batch，組織數據內容 var msgSend = { \"webCmd\"： 0x51， \"pihao\"： selectedTgt }，調用webSocketClient.js的網絡發送任務函數sendMsg（msgSend），將msgSend內容通過JSON.stringify（）轉換為JSON字符串形式，并經WebSocket服務器發送給Qt后端。

2.4.2 Qt后端接收JSON字符串數據

Qt后端收到WebSocket數據后觸發槽函數slot_MessageRecvFromWeb，在槽函數中，通過QJsonDocument：：fromJson方法將JSON字符串數據轉換為JSON文檔，并存儲在doc變量中，然后封裝JSON對象 QJsonObject object = doc.object（），若對象中包含\"webCmd\"，則獲取\"webCmd\"鍵值 int cmdNo = object.take（\"webCmd\"）.toInt（），然后判斷鍵值是否為0x51，若是，則該數據為目標請求51H內容，在發送函數sendNetMsg中，獲取目標批號并賦值給目標請求結構體變量 skyRequst.pihao = object.take（\"pihao\"）.toInt（），最后將skyRequst數據轉換為QByteArray，通過UDP的方式發送給IP地址為serverIP、端口號為serverPort的數據處理軟件，udpS-gt;writeDatagram（sendbuf， QHostAddress（serverIP）， serverPort）。

3 結束語

本文詳細介紹了Qt后端與Web前端的數據交互過程，具體為Qt后端網絡初始化過程，Web前端網絡初始化過程，并舉例介紹目標顯示報文從UDP數據接收、解析，組織JSON字符串內容發送給Web前端，到Web前端接收JSON字符串內容、解析并顯示的過程，舉例介紹目標請求報文從Web前端操控，組織JSON字符串內容發送給Qt后端，到Qt后端接收JSON字符串內容、解析并組織相應操控命令報文發送給數據處理軟件的過程。目前，該方法已在某顯控平臺顯控軟件中得到應用，經驗證，該方法有效可行。不過，該方法還存在不足之處，對于數據量大、頻率高的應用環境下，存在卡頓現象，如何解決卡頓問題成為未來研究重點，例如可通過搭建多條WebSocket連接，更好地保證數據量大、頻率高的應用環境下數據交互的實時性和可靠性。

參考文獻：

[1] 劉平.Android手機訪問服務器的一種數據交互方法[J].電子設計工程，2010，18（9）：96-102.

[2] 付保川，王中杰，班建民，等.基于CGI嵌入式監控系統動態數據交互的實現[J].計算機工程，2005，31（24）：196-198.

[3] 胡振華，周斌，冷文浩.AJAX在J2EE中數據交互的應用研究[J].計算機工程與設計，2008，29（12）：3102-3105.

[4] 陳曉玲，張世彤，孫伯貽.基于產業專題庫的科技大數據融合應用平臺設計與研發[J].無線互聯科技，2023（24）：69-73.

[5] 李樂蒙.電力基建現場違章識別系統設計與實現[D].濟南：山東大學，2023.

[6] 周夢禹.基于雙向流量的Web攻擊檢測算法研究與實現[D].北京：北京郵電大學，2021.

[7] 陳業恩.跨平臺移動Web開發框架與數據交互[J].電子制作，2015（16）：41.

[8] 李張永，陳和平，顧進廣.跨平臺移動Web開發框架與數據交互方法[J].計算機工程與設計，2014，35（5）：335-340.

[9] 沈楠，范凌.基于Web自動化理念實現跨平臺數據交互[J].電信工程技術與標準化，2024（2）：77-82.

【通聯編輯：謝媛媛】