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->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.

【通联编辑：谢媛媛】