基于Websocket的桥梁结构变形实时监测系统设计

王丽红，王夏黎，曹晨洁，赵嘉兴

(长安大学 信息工程学院，陕西 西安 710064)

0 引 言

随着信息技术的飞速发展，互联网技术已覆盖生活中的各个领域。用服务器推送技术[1-2]实施监控，能够使用户不需要安装应用程序，在有浏览器的电脑上直接进行实时监控，减轻了监控系统的维护成本。

HTTP协议[3]遵从在浏览器和服务器建立连接的请求—响应模式。Ajax轮询[4]则遵循以固定时间间隔向浏览器发送请求的模式。此方式缺乏灵活性并且需要服务器具备快速处理速度。Comet技术遵循HTTP长连接[5]的通信特点。通常包括是长轮询(Long Polling)和Iframe流两种形式。这些技术最大的缺点就是需要由浏览器主动发出请求，不断建立连接并等待服务器处理。体现了服务器的被动性。同时浪费带宽和网络资源。Websocket技术使用基于浏览器-服务器的双向通信模式，浏览可以基于时间的方式与服务器实现真正的实时通信[6]。

基于Websocket技术的桥梁结构变形远程实时监测系统[7-8]可以对桥梁建设及后期维护中对桥梁数据进行远程实时监控、数据存储和历史查询。此系统实现了集远程化与网络化为一体的实时监控[9]。

1 基于Websocket的实时通信技术

1.1 相关实时通信技术

1.1.1 Ajax轮询技术

Ajax轮询技术[10]采用不需验证服务器接收数据与否，而是使客户端定时向服务器发送请求并接收返回的响应的模式。该模式缺点为定时性，即浏览器-服务器之间的数据传输需定时，且HTTP请求可能包含较长的头部，需传输数据仅为全部数据的一部分。显然此通信方式会极大地浪费服务器的带宽和资源。

1.1.2 Long Polling技术

基于以上缺陷，可采用Ajax的优化技术—Long Polling技术。该技术旨在服务器添加了检验更新数据的功能，服务器只有得到新数据后才向客户端传输数据内容。否则会进入持续等待状态，若等待时间过长，客户端就会重新向客户端发送HTTP请求。这种连接方式虽然实现了服务端主动传输消息，但是仍然需要频繁发出请求。还是会存在服务器端浪费带宽和资源的问题。

1.1.3 基于Iframe的流方式

Iframe是HTML中的标签，把它的属性设置为隐藏并且将它的src属性设置为对长连接的请求，然后服务器就可持续向客户端推送数据。其缺点为IE与Firefox底部进度条显示加载未完成，但IE中图表则显示加载正在进行，这会给用户一种正在加载的错觉。

1.1.4 SSE技术

SSE(server sent events)的通信原理和基于Iframe实时通信技术相似。服务器端的响应内容类型必须为“text/event-stream”，当连接建立之后，服务端就能够不断向服务器端推送数据。然而这种技术并不是很好地支持IE浏览器，使用具有局限性。只能服务器-浏览器单向发送数据。

1.2 基于Websocket的实时通信技术

1.2.1 Websocket协议概述

Websocket协议是在TCP协议基础上发展起来的一种新网络协议。在建立连接时，客户端向服务器发起包含升级为ws协议附加头信息的“握手”HTTP请求。服务器在解析完头信息后，将信息响应给客户端，只要“握手”操作完成并成功，就表明Websocket连接就被成功建立，连接后只有客户端或者服务器其中的一方关闭，连接才会被断开，否则双方就持续交互。

1.2.2 Websocket工作原理

Websocket协议建立连接步骤如下：

(1)Websocket客户端发送HTTP升级请求。

Websocket客户端发起“握手”请求到服务器。定义URI：

ws-URI=ws://127.0.0.1:8080/

具体客户端握手消息如图1所示，其中Connection：Upgrade表示该请求为协议升级请求；Upgrade：Websocket表示升级到Websocket协议，Sec-WebSocket-Key用来验证Websocket连接是否有效。

图1 Websocket客户端握手消息

(2)服务器接收服务端握手信息，并发送服务器打开握手的信息。

服务器通过请求的头部信息确定是否为Websocket请求。并通过规定算法将Sec-WebSocket-Key的信息生成新字符串序列，然后把它写入Sec-WebSocket-Accept内。具体Websocket服务器响应如图2所示。

图2 Websocket服务器响应消息

(3)客户端验证服务器的响应。

客户端收到服务器响应后，验证服务器是否收到协议升级请求，并返回握手应答报文。

只要Websocket连接建立，就会启动全双工通信，客户端和服务器就可以实时地向对方发送消息，直到某一方关闭连接。Websocket 通信模型如图3所示。

Websocket技术通过升级协议，不用发送大量头部信息，轻量且速度快。真正地双向通信，减少了不必要的开销，该方案大大提高了通信的实时性。

总结以上几种实时通信技术，其特性如表1所示。

图3 Websocket模型通信原理

表1 几种实时通信方式比较

从表1可以看出，Websocket在传输数据时只需一次连接建立，并且可以实现网页中长久实时信息的交互。在实时通信技术中有很大的优势。

随着桥梁规模及建设速度的提升，随之发生的安全事故也层出不穷，桥梁的变形监测尤其重要。基于Websocket技术的桥梁结构变形实时监测系统，可以在有网络的情况下，随时随地实时监测桥梁结构变形数据情况并对桥梁健康状况进行评估，从而实时智能地对桥梁故障进行诊断和维护。这对桥梁的正确施工和后期桥梁的健康状况监测具有重要作用。

2 系统设计

在桥梁的建设过程中，桥梁的准确施工关系着整个桥梁施工工程的质量以及施工成本，后期桥梁的安全性更关系着整个道路的畅通。因此，对桥梁结构变形进行实时监测在确保桥梁正确施工以及确定及时有效的维护养护方案等方面显得尤为重要。

随着监测技术的不断提升，桥梁结构变形实时监测的方法也越来越多。如传感器技术监测、GPS技术监测、三维激光扫描技术监测等，然而这些桥梁远程监测监控系统基本采用软件式开发。文中从便捷的角度出发，提前获取到桥梁结构变形监测数据，设计了基于Websocket技术的桥梁结构变形实时监测系统，并加以实现，此系统在有网络的前提下可对桥梁结构变形情况实时监测、桥梁健康及时评估及对桥梁故障实时诊断和维护。对桥梁的正确施工和后期桥梁的健康状况监测具有重要作用。

该系统前端页面开发设计，引入Echarts图表库，结合以Json为数据传输格式的Websocket技术，同步获取Websocket客户端数据，图形化展示数据，通过界面实现用户数据良好交互。

2.1 系统设计

完整的监控系统需要考虑的特性包括数据的可靠性、实时性、安全性和完整性等。实时性即监控系统对数据无延迟的及时传输，避免了难以发现及时数据异常的问题。数据的完整性即接收到的桥梁数据不能有丢失。否则数据的完整性不能保障。如果监控系统的上述特性无法得到保障，那么现场监控也就失去了实际价值。

此监测系统主要包括：数据实时采集，数据处理，数据传输、显示和存储等功能。

此监测系统由数据接收器、连接器、Web服务器和浏览器4部分构成。基本过程如图4所示。Grpc服务端负责实时接收桥梁数据并对数据进行初步的处理和存储，然后所有客户端接收Websocket服务端发送的数据，并利用网页中的JavaScript对数据进行简单处理，最后使用图库表Echarts展示数据。

图4 监控系统流程

2.2 系统关键技术

2.2.1 Grpc通信

采用HTTP/2协议，用ProtoBuf作为序列化工具的Grpc框架[11]是由Google开发。其客户端和服务器端都提供多种语言接口。该框架是先在proto文件里定义一个service，指定被远程调用的方法，然后在Grpc服务端重写接口函数并且处理客户端调用。它最大的优势就是采用ProtoBuf协议，将proto类型文件生成所需程序，简单易用。

2.2.2 Echarts

由JS(JavaScript)开发的Echarts[12]图库表，可以通过数据动态变化来驱动图表改变，考虑到移动端的显示，使用代码重构，使得Echarts库体积较小。本项目桥梁监测数据即使用Echarts实现数据的图形化显示，只要Websocket服务器发送数据，就会刷新界面，更新图表信息。

2.2.3 Django框架

Django框架[13]采用MTV模式即模型—模板—视图模式，“M”为“Model”、“T”为“Templates”、“V”为“Views”。使用该模式可对系统内组件的耦合关系进行控制，使得各个组件之间互不影响。同时Django提供的ORM机制方便用户定义所需数据模型，降低了对数据库开发的编程压力。

2.3 系统详细设计

基于对系统平台的需求分析，文中对基于Websocket技术的桥梁结构变形远程实时监测系统[14-15]进行详细设计，将此系统分为五个模块：数据采集模块、数据存储模块、实时监控模块、历史记录查询模块、用户管理模块。

2.4 系统实现

基于Websocket技术的桥梁结构变形实时监测系统[16]的实现也分为五个模块，其中在数据采集模块采用Grpc通信技术，在实时监测模块采用Websocket技术完成对数据的实时交互。

(1)数据采集模块。

数据采集模块即开启gRPC服务端后，只要有远程Grpc客户端启动，数据便开始传输，服务端接收数据并按照规定编码方式进行解码，数据采集过程完成。

(2)数据存储模块。

数据存储模块即gRPC提取到数据后，对数据进行简单处理后，连接数据库，存入数据库。

(3)实时监测模块。

在此系统[17]中，gRPC模块嵌入到Django框架，当项目启动后，gRPC服务端启动，此时将gRPC接收的数据进行简单处理后存储到数据库的同时，传入到Websocket服务端，Websocket服务端会主动将数据传输到页面的Websocket客户端，再通过Echarts展示数据的变化情况。同时可以查看项目初次建立时的图片信息，也可以查询当数据超过设定的阈值异常后的图像信息。

(4)历史记录查询模块。

历史记录查询模块主要是通过选择项目，任务，时间等条件，连接数据库，通过Echarts可视化方法来展示此项目在这段时间内的数据变化。

(5)用户管理模块。

用户管理模块使得管理员可增删查改用户，用户也可自行修改信息等。

3 系统测试

3.1 功能测试

对系统的功能模块进行测试，模块正常运行，已达预期效果。系统主要功能的测试结果如表2所示。

表2 系统主要功能测试结果

3.2 性能测试

3.2.1 测试指标

在多用户同时进行数据监控时，整体系统多方面的性能指标，重点描述下述几个方面：

Vuser图：虚拟情况下的用户数，拟说明各网站能够同时支持的并发用户数。

Throughput图：吞吐量图，显示方案运行中服务器的吞吐量。吞吐量的单位为字节/秒。反映了网站服务器的数据传输能力。

Websocket Statistics图：Websocket静态图，显示方案运行时Websocket服务器接收及发送的数据量。

3.2.2 测试方法

在系统性能的监测层面，借助LoadRunner12来组件网站的仿真性测验。依次选择具备代表性的模块开展具体的加压，依照所有模块的实际运用人数，来对网站开展仿真性的测验，以借助该措施来发现系统性能方面的缺陷，并对系统做出进一步的改善。

3.2.3 测试结果

经过性能测试，发现通过50个用户对系统进行循环迭代20分钟周期内访问，Vuser用户在测试期间的每一秒都正常运行和退出成功，如图5所示。Vuser在每一秒内从服务器获得的数据量达到140 000字节，反映了网站网络带宽的处理能力业务较强，如图6所示。Websocket客户端接收和发送的字节数都和实际相符，如图7所示。本次测试结果满足本次项目设计要求。

图5 Vuser图

图6 Throughput图

图7 Websocket Statistics图

4 结束语

对常用的几种实时通信技术的通信原理进行了剖析，对基于Websocket协议的实时通信技术进行了重点分析，通过案例分析、技术比较，Websocket技术优势明显，所以选用Websocket技术实现了基于Websocket技术的桥梁结构变形实时监测系统，编写测试用例，采用loadrunner工具进行网站性能测试，经过多次的测试和丰富的用例，测试结果显示Websocket技术达到了预期效果。此系统通过对桥梁结构变形实时监控产生的数据进行展示与分析，及时发现桥梁异常情况，大大发挥监控平台的作用，减少了因桥梁结构变形而造成的经济损失，达到了实时监控的目的。