The industrial Internet of things from Modbus to Web-based data visualization

Source: Internet
Author: User

Tags: gif mass = = = Recommended line Dex demo Mes any


Industrial Internet of Things (IoT) is a large-scale concept, this paper introduces a minimal industrial IoT platform from the perspective of data visualization, from Modbus data acquisition to front-end data visualization of the basic implementation ideas. This mainly involves data acquisition based on Modbus Communication protocol, real-time data processing in the background, real-time reception of the front-end and real-time data visualization display. The IoT platform architecture mainly refers to the graphic topology IoT platform, which extracts some of the features, and the front-end data visualization uses the HT for Web.

Because the content is more, the concrete realization involves the front-end engineer, the backstage engineer, the data acquisition engineer and so on many development role's participation, therefore this article emphatically introduces realizes the idea and the WebSocket message pushes the realization, the other link concrete Realization detail author will carry on the detailed introduction in other articles.

I. IoT platform architecture

The Internet of Things platform is mainly B/s mode, the industrial IoT platform mostly uses the micro-service architecture, this paper mainly involves two micro-services: Pre-data acquisition service and WEB real-time message push service.

Pre-data acquisition services are mainly used for field equipment, instrumentation, instrumentation, sensor real-time data acquisition, IOTOPO Industrial IoT platform support MQTT and through-stream cloud analysis two ways, through the cloud Analysis Support Modbus communication protocol.

Real-time data acquisition to the platform, the need to push to the browser to display, Web real-time message push service with the Web Socket for real-time information push, can ensure the real-time and efficient data.

The front-end visualization technology uses the HT for Web, the HT for Web is a one-stop solution for enterprise application graphical interfaces based on the HTML5 standard, which contains a rich graphical interface development class library including general-purpose components, topology components, and 3D rendering engines. Although the HT for Web is commercial software, it offers a one-stop solution that can dramatically shorten the product development cycle, reduce development costs, and complement our short board on the Web graphical interface visualization technology.

Second, Modbus data collection

Modbus is a serial communication protocol that is published by Modicon Corporation (now Schneider Electric Schneider Electric) in 1979 for the use of Programmable logic controllers (PLCs). Modbus has become the industry standard for communication protocols in the industrial sector and is now a common connection between industrial electronic devices. The main reasons for the wider use of modbus than other communication protocols are:

    1. Public publication and no copyright requirements
    2. Easy to deploy and maintain
    3. For vendors, there is no limit to modifying the number of bits or bytes moved locally

Modbus allows multiple (approximately 240) devices to communicate on the same network, for example, a device that measures temperature and humidity and sends the results to a computer. In the data acquisition and monitoring control system (SCADA), Modbus is commonly used to connect the monitoring computer and the remote Terminal Control System (RTU).

At present, the mainstream editing language has Modbus development library, because Modbus relatively simple, many enterprises also choose to develop their own implementation. Modbus data acquisition belongs to the background communication, data collection to the platform first will be cleaned and pre-processing, filtering out redundant and invalid data, to form real-time data. When the platform gets real-time data, it usually does 3 things:

1. Push to the Web front end for display

2. Storing to the timing database

3. Determine if an alarm is generated

Third, push real-time data to the Web front-end

WEB-based real-time data push needs to use WebSocket, beginners can learn Nanyi teacher's WebSocket tutorial . We encapsulate a set of message transfer protocols based on WebSocket, similar to a message middleware, where the front-end part subscribes to real-time data. Considering the push demand of massive real-time data, the real-time data is divided into platform level, site level, device level, and the front end can subscribe to different levels of data through message subject rules when subscribing to real-time data. Platform side when you receive a subscription request, you can proactively push a real-time data. This ensures that the data visualization interface displays the correct interface the first time after a successful subscription to real-time data.

The following is a simplified client code for the WebSocket message protocol, which can be adapted to suit your business scenario.

A message subject regular expression that matches the message subject:

function(str, rule) {2     new RegExp (' ^ ' + rule.split (' * '). Join ('. * ') + ' $ '). Test (str)3} 

WebSocket client, support for message subject subscriptions, cancellation of message topic subscriptions, and multiple subscribers for the same message topic:

1Class Websocketclient {2Constructor () { =Null4This.opts ={5 Debug:False,6 AutoReConnect:True,7 reconnectinterval:10000,8Subscriber: {},9}10this.opened =False11}1213Connect () {14if (!This. Opened) {15Return16}17Const URL = ' WS://WWW.IOTOPO.COM/MSG/V1 'Console.debug (' WebSocket Connect ', URL)20WS =NewWebSocket (URL)Ws.onmessage = Event = ={23if (This. opts.debug) {24Console.log (Event)25}-Let data =Json.parse ( (Let topicInchThis. Opts.subscriber) {29If(Matchwildcard (data.topic, topic)) {Listeners =This. Opts.subscriber[topic]31If(Array.isarray (listeners)) {Listeners.foreach (cb + ={33if (typeof cb = = = ' function ') {34CB (DATA.PAYLOAD)35}36})37}38}39}40}Ws.onopen = e ={42if (This. opts.debug) {43Console.log (e)44}45//Execute a subscription request46for (Let topicInchThis. Opts.subscriber) {47This. _sendsubscribe (Topic)48}49if (typeofThis.opts.onopen = = = ' function ') {50This. Opts.onopen (E)51}52}Ws.onclose = e ={54if (This. opts.debug) {55Console.log (e)56}57if (typeofThis.opts.onclose = = = ' function ') {58This. Opts.onclose (E)59}60if (this.opened &&This. opts.autoreconnect) {SetTimeout (() ={62This. Connect ()63},This. Opts.reconnectinterval)64}65}Ws.onerror = e ={67if (This. opts.debug) {68Console.log (e)69}70if (typeofThis.opts.onerror = = = ' function ') {71This. Opts.onerror (E)72}73}74}7576Open (opts) {77if (!This. Opened) { Object.assign (this.opts, opts | | {}) this.opened = True This.connect () Bayi} "() () () () () () () {this.opened = False if (!== null) {87 ()} (= null) isopened () {94 return this.opened isconnected} ()!== NULL 98} _sendsubscribe (topic) {101 if ( = = = null) {102 return Error (' Websocet not opened ') 103 }104 if (typeof topic!== ' string ') {Error (' topic should be a String value ') 106}107 108 if ( E = = {109 Let msg = {type: ' subscribe ', 111 topic:topic,112}113 (json.stringify (msg)) 114 } else {Websocet not connected ')}117}118 119 Subscribe (topic, CB) {+ if (This.opts.debug) {121 C Onsole.log (' Subscribe: ', topic) 122}123 Let listeners = this.opts.subscriber[topic]124 if (! Array.isarray (listeners)) {listeners = [126 cb127]128 this.opts.subscriber[topic] = listeners129} else {listener S.push (CB) 131}132 This._sendsubscribe (Topic) 133 134 Return {topic, CB}135}136 137 unsubscribe ({topic, CB}) {138 if (this.opts.debug) {1 Console.log (' Unsubscribe: ', topic)}141 142 if ( = = null) {143 return Error (' Websocet not opened ') 144}145 1 typeof topic!== ' string ') {147 return Error (' topic should be a String value ') 148}149-listeners = this.opt s.subscriber[topic]151 if (CB) {Array.isarray (listeners)) {153 Let idx = Listeners.indexof (CB) 154 if (IDX >= 0) {155 Listeners.splice (IDX, 1) 156}157}158} else {159 Delete this.opts.subscriber[topic]160}161 162 if (Array.isarray (l isteners) && listeners = = 0) {163 if ( = = = {164 let msg = {165 type: ' Unsubscrib E ', 166 topic:topic,167}168 (json.stringify (msg)) 169} else {return Error (' Websocet not connected ') 171}1 72}173}174}

Examples of usage:

1// Initialize client  2 const WS = new Websocketclient ()  3 // recommended connection to WebSocket server  4 ({ 5 debug: false 6 ")  7 // subscription message Span style= "COLOR: #008080" > 8 ws.subscribe ('/foo/bar/* ', function 9 Console.log (' recv ws msg: ' 10})             

Realization of data visualization interface

Based on the HT for Web, you can easily and quickly build a visual graphical interface that conforms to the HTML5 standard, subscribing to real-time data via WebSocket and then driving changes in the graphical interface. Data-driven graphical interface changes in a number of ways, the basic method is the use of data binding, in particular, can refer to the official HT for Web documentation .

In a later article, the author introduces a data-binding method that separates business data and graphics data based on the HT for WEB implementation.

Online Demo Address

The industrial Internet of things from Modbus to Web-based data visualization

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: