文档介绍：Jenny was compiled in January 2021
工业实时监控系统WEB客户端实现
工业实时监控系统WEB客户端实现
摘要：本文介绍了如何利用HTML5WebSocket和SVG技术解决采用务器端就可以通过TCP连接直接交换数据。因为WebSocket连接本质上就是一个TCP连接，所以在数据传输的稳定性和数据传输量的大小方面，具有很大的性能优势。
我们在建设工业实时监控系统时考虑免去客户安装客户端软件，同时满足工业数据监控对实时性的要求，确定自己开发构建一个实现了WebSocket规范的服务器，完成基于浏览器的实现WebSocket连接的客户端程序，用户只需要被允许接入工厂网络，通过PC机和移动设备的浏览器就可以查看实时的工业数据。如下图所示。
工厂流程总貌图
过程数据趋势图
WebSocket规范
WebSocket协议本质上是一个基于TCP的协议。为了建立一个WebSocket连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息”Upgrade:WebSocket”表明这是一个申请协议升级的HTTP请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
我们在服务器端实现了WebSocket服务器，在客户端编写JS脚本语言，实现WebSocket客户端与服务器的连接，数据请求，消息处理等函数，通过在WEB页面中引入JS脚本文件，在页面被打开时执行
WebSocket函数，连接服务器上运行的WebSocket服务，实现数据的实时显示。
当页面初次加载的时候，首先会检测当前的浏览器是否支持WebSocket并给出相应的提示信息。页面会初始化一个到服务器的WebSocekt连接，初始化成功以后，页面会加载缺省的SVG文件和WebSocket事件处理函数，将装置实时运行状态的流程总貌图呈现给客户，客户端JavaScript代码如下所示：
画面显示采用SVG技术的原因
目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。
在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储（如JPEG,GIF,PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些图形只需要做解压处理就可以了。
在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。
绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放，矢量图形都不会失真。这使得当我们需要具有精确测量