Web HMI

置顶/标星公众号，不错过每一条消息！

对于一个简单的小型PLC系统，上位机OS HMI如果使用商业软件，很难控制项目成本。本文介绍一种结合Web前/后端技术的HMI解决方案。

主要内容：

1、Node.js

2、JavaScript

3、WebSocket

4、OS Web HMI系统

STEP 7-MicroWIN SMART版本：V2.0.3

1

Node.js

1.概述

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript 运行环境。

Node.js由Node.js基金会持有和维护，并与Linux基金会有合作关系。Node.js采用Google开发的V8运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。

Node.js允许通过JavaScript和一系列模块来编写服务器端应用和网络相关的应用。核心模块包括文件系统I/O、网络（HTTP、TCP、UDP、DNS、TLS/SSL等）、二进制数据流、加密算法、数据流等等。Node模块的API形式简单，降低了编程的复杂度。

使用Web框架可以加速开发。常用的框架有Express.js、Socket.IO和Connect等。Node.js的程序可以在Microsoft Windows、Linux、Unix、Mac OS X等服务器上运行。

Node.js主要用于编写像Web服务器一样的网络应用，这和PHP和Python是类似的。但是Node.js与其他语言最大的不同之处在于，PHP等语言是阻塞的（只有前一条命令执行完毕才会执行后面的命令），而Node.js是非阻塞的（多条命令可以同时被运行，通过回调函数得知命令已结束运行）。

Node.js是事件驱动的。开发者可以在不使用线程的情况下开发出一个能够承载高并发的服务器。Node.js把JavaScript的易学易用和Unix网络编程的强大结合到了一起。

Node.js使用Google V8 JavaScript引擎，因为：

V8是基于BSD许可证的开源软件

V8速度非常快

V8专注于网络功能，在HTTP、DNS、TCP等方面更加成熟

Node.js已经有数十万模块，它们可以通过一个名为npm的管理器免费下载，它是Node.js服务器平台的预安装包管理器。Node.js开发社区主要有两个邮件列表、一个在freenode的名为#node.js的IRC频道。社区集中在NodeConf。

2.Node.js及模块安装

Node.js安装包可到官方网站下载：https://nodejs.org/zh-cn/

安装方法和其它软件一样。安装完成，在CMD使用node -v命令可查看已安装的Node.js版本，说明安装正确。

模块安装使用包管理工具npm，如安装Websocket模块ws：npm install -g ws（-g：代表global全局安装，会将模块安装到C:\Users\用户名\AppData\Roaming\npm\node_modules路径中）。

2

JavaScript

JavaScript，通常缩写为JS，是一种高级的，解释执行的编程语言。

它是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

它已经由ECMA（欧洲计算机制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

学习JavaScript可以访问以下网址：

http://www.w3school.com.cn/js/index.asp

（提示：公众号文章中网页链接无法直接打开，请复制到浏览器打开）

说不定哪天一些主流组态软件就支持JavaScript脚本了。

3

Websocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通讯协定于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以建立持久性的连接，并进行双向数据传输。

为了建立WebSocket连接，客户端发送WebSocket握手请求，服务器为此返回WebSocket握手响应，如下图所示。

握手以HTTP请求/响应开始，允许服务器在同一端口上处理HTTP连接以及WebSocket连接。一旦建立连接，通信就切换到不符合HTTP协议的双向二进制协议。

使用ws模块建立Websocket服务器的JavaScript代码示例：

const WebSocket = require('ws');

const ws1 = new WebSocket.Server({ port:8000});

ws1.on('connection', function connection(wsocket,req) {

console.log('client connected');

wsocket.send("hello client");

wsocket.on('message',function(msg));

wsocket.on('close',function());

});

4

OS Web HMI系统

此OS Web HMI系统基本架构如下图：

上位机使用node.js建立并发多任务单进程应用，包括Websocket server向Web HMI浏览器提供双向数据服务，通过TCP/IP Client读写PLC数据。PLC编写TCP/IP Server程序。

下面是一个简单的在浏览器监视S7-200 SMART PLC VD100寄存器值（刷新周期250ms的0-100随机数）的HMI。

5

最后

若觉得文章对你有帮助，随手点好看、分享，也是支持和鼓励。