工业物联网之从Modbus到Web数据可视化

　　工业物联网是一个范围很大的概念，本文从数据可视化的角度介绍了一个最小化的工业物联网平台，从Modbus数据采集到前端数据可视化呈现的基本实现思路。这里面主要涉及基于Modbus通讯规约的数据采集、后台实时数据处理、前端实时数据接收、前端实时数据可视化显示。物联网平台架构主要参考了图扑物联工业物联网平台，并从中提取了部分功能进行介绍，前端数据可视化采用的是HTforWeb。
　　由于内容比较多，具体实现上涉及到前端工程师、后台工程师、数据采集工程师等多个开发角色的参与，所以本文重点介绍实现思路和WebSocket消息推送的实现，其它环节的具体实现细节作者会在其它文章中进行详细介绍。
　　一、物联网平台架构
　　物联网平台主要是BS模式，图扑物联工业物联网平台采用的是微服务架构，本文主要涉及两个微服务：前置数据采集服务和Web实时消息推送服务。
　　前置数据采集服务主要用于现场设备、仪器、仪表、传感器实时数据的采集，图扑物联工业物联网平台支持MQTT和透传云解析两种方式，透传云解析支持Modbus通讯规约。
　　实时数据采集到平台后，需要推送到浏览器端进行显示，Web实时消息推送服务采用WebSocket进行实时数据推送，可以确保数据的实时性和高效性。
　　前端可视化技术采用的是HTforWeb，HTforWeb是基于HTML5标准的企业应用图形界面一站式解决方案，其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库。虽然HTforWeb是商业软件但其提供的一站式解决方案可以极大缩短产品开发周期、减少研发成本、补齐我们在Web图形界面可视化技术上的短板。
　　二、Modbus数据采集
　　Modbus是一种串行通信协议，是Modicon公司（现在的施耐德电气SchneiderElectric）于1979年为使用可编程逻辑控制器（PLC）通信而发表。Modbus已经成为工业领域通信协议的业界标准，并且现在是工业电子设备之间常用的连接方式。Modbus比其他通信协议使用的更广泛的主要原因有：
　　公开发表并且无版权要求
　　易于部署和维护
　　对供应商来说，修改移动本地的比特或字节没有很多限制
　　Modbus允许多个（大约240个）设备连接在同一个网络上进行通信，举个例子，一个由测量温度和湿度的装置，并且将结果发送给计算机。在数据采集与监视控制系统（SCADA）中，Modbus通常用来连接监控计算机和远程终端控制系统（RTU）。
　　目前主流的编辑语言都有Modbus开发库，由于Modbus相对比较简单，很多企业也选择自行开发实现。Modbus数据采集属于后台通讯，数据采集到平台后首先会进行数据清理和预处理，过滤掉冗余和无效数据，形成实时数据。平台获取到实时数据后一般会做3项工作：
　　1。推送到Web前端进行显示
　　2。存储到时序数据库
　　3。判断是否产生告警
　　三、将实时数据推送到Web前端
　　基于Web的实时数据推送需要用到WebSocket，初学者可以学习阮一峰老师的WebSocket教程。图扑物联的物联网平台基于WebSocket封装了一套消息传输协议，类似于一个消息中间件，前端部分可以订阅实时数据。考虑到海量实时数据的推送需求，将实时数据分为平台级、站点级、设备级，前端在订阅实时数据时，可以通过消息主题规则订阅不同级别的数据。平台侧在收到订阅请求时，可以主动推送一次实时数据。这样可以确保数据可视化界面在订阅实时数据成功后，第一时间显示出正确的界面。
　　下面给出一个简化的WebSocket消息协议的客户端代码，大家可以在些基础上进行改造以适合自己的业务场景。
　　消息主题正则表达式，用来匹配消息主题：
　　1constmatchWildcardfunction（str，rule）｛
　　2returnnewRegExp（rule。split（）。join（。）39；）。test（str）
　　3｝
　　WebSocket客户端，支持消息主题订阅、取消消息主题订阅、同一个消息主题支持多个订阅者：
　　classWebSocketClient｛
　　constructor（）｛
　　this。wsnull
　　this。opts｛
　　debug：false，
　　autoReconnect：true，
　　reconnectInterval：10000，
　　subscriber：｛｝，
　　｝
　　this。openedfalse
　　｝
　　connect（）｛
　　if（！this。opened）｛
　　return
　　｝
　　consturlws：www。iotopo。commsgv1
　　console。debug（websocketconnect，url）
　　letwsthis。wsnewWebSocket（url）
　　ws。onmessageevent｛
　　if（this。opts。debug）｛
　　console。log（event）
　　｝
　　letdataJSON。parse（event。data）
　　for（lettopicinthis。opts。subscriber）｛
　　if（matchWildcard（data。topic，topic））｛
　　letlistenersthis。opts。subscriber〔topic〕
　　if（Array。isArray（listeners））｛
　　listeners。forEach（cb｛
　　if（typeofcbfunction）｛
　　cb（data。payload）
　　｝
　　｝）
　　｝
　　｝
　　｝
　　｝
　　ws。onopene｛
　　if（this。opts。debug）｛
　　console。log（e）
　　｝
　　执行订阅请求
　　for（lettopicinthis。opts。subscriber）｛
　　this。sendSubscribe（topic）
　　｝
　　if（typeofthis。opts。onopenfunction）｛
　　this。opts。onopen（e）
　　｝
　　｝
　　ws。onclosee｛
　　if（this。opts。debug）｛
　　console。log（e）
　　｝
　　if（typeofthis。opts。onclosefunction）｛
　　this。opts。onclose（e）
　　｝
　　if（this。openedthis。opts。autoReconnect）｛
　　setTimeout（（）｛
　　this。connect（）
　　｝，this。opts。reconnectInterval）
　　｝
　　｝
　　ws。onerrore｛
　　if（this。opts。debug）｛
　　console。log（e）
　　｝
　　if（typeofthis。opts。onerrorfunction）｛
　　this。opts。onerror（e）
　　｝
　　｝
　　｝
　　open（opts）｛
　　if（！this。opened）｛
　　Object。assign（this。opts，opts｛｝）
　　this。openedtrue
　　this。connect（）
　　｝
　　｝
　　close（）｛
　　this。openedfalse
　　if（this。ws！null）｛
　　this。ws。close（）
　　｝
　　this。wsnull
　　｝
　　isOpened（）｛
　　returnthis。opened
　　｝
　　isConnected（）｛
　　returnthis。ws！null
　　｝
　　sendSubscribe（topic）｛
　　if（this。wsnull）｛
　　returnError（websocetnotopened）
　　｝
　　if（typeoftopic！string）｛
　　returnError（topicshouldbeastringvalue）
　　｝
　　if（this。ws。readyStateWebSocket。OPEN）｛
　　letmsg｛
　　type：subscribe，
　　topic：topic，
　　｝
　　this。ws。send（JSON。stringify（msg））
　　｝else｛
　　returnError（websocetnotconnected）
　　｝
　　｝
　　subscribe（topic，cb）｛
　　if（this。opts。debug）｛
　　console。log（subscribe：，topic）
　　｝
　　letlistenersthis。opts。subscriber〔topic〕
　　if（！Array。isArray（listeners））｛
　　listeners〔
　　cb
　　〕
　　this。opts。subscriber〔topic〕listeners
　　｝else｛
　　listeners。push（cb）
　　｝
　　this。sendSubscribe（topic）
　　return｛topic，cb｝
　　｝
　　unsubscribe（｛topic，cb｝）｛
　　if（this。opts。debug）｛
　　console。log（unsubscribe：，topic）
　　｝
　　if（this。wsnull）｛
　　returnError（websocetnotopened）
　　｝
　　if（typeoftopic！string）｛
　　returnError（topicshouldbeastringvalue）
　　｝
　　letlistenersthis。opts。subscriber〔topic〕
　　if（cb）｛
　　if（Array。isArray（listeners））｛
　　letidxlisteners。indexOf（cb）
　　if（idx0）｛
　　listeners。splice（idx，1）
　　｝
　　｝
　　｝else｛
　　deletethis。opts。subscriber〔topic〕
　　｝
　　if（Array。isArray（listeners）listeners0）｛
　　if（this。ws。readyStateWebSocket。OPEN）｛
　　letmsg｛
　　type：unsubscribe，
　　topic：topic，
　　｝
　　this。ws。send（JSON。stringify（msg））
　　｝else｛
　　returnError（websocetnotconnected）
　　｝
　　｝
　　｝
　　｝
　　用法举例：
　　初始化客户端
　　constwsnewWebSocketClient（）
　　与WebSocket服务器建议连接
　　ws。open（｛
　　debug：false
　　｝）
　　订阅消息
　　ws。subscribe（foobar，function（msg）｛
　　console。log（recvwsmsg：，msg）
　　｝）
　　四、数据可视化界面实现
　　基于HTforWeb可以简单快速地搭建一个符合HTML5标准的可视化图形界面，通过WebSocket订阅实时数据，然后驱动图形界面的变化。数据驱动图形界面变化的实现方式很多，基本方法是采用数据绑定的方式，具体可以参考HTforWeb的官方文档。
　　在后面的文章中，作者会介绍一种基于HTforWeb实现的业务数据和图形数据分离的数据绑定方法，这也是图扑物联的物联网平台采用的方式。
　　版权声明：本文为CSDN博主YHFHing的原创文章，遵循CC4。0BYSA版权协议，转载请附上原文出处链接及本声明。
　　原文链接：https：blog。csdn。netu010199413articledetails100572231