现代Web 技术在MES 系统中的应用

郭政健，杨 军

(北京邮电大学自动化学院，北京 100876)

0 引言

企业的生产管理信息化建设主要通过建立企业资源计划（ERP）、制造执行系统（MES）、过程控制系统（PCS）等，来实现计划层、执行层及设备层的有机结合。其中的ERP 实现对企业内部资源和生产计划的有效管理，PCS 完成对生产过程和车间设备的及时管控；而位于执行层的MES 系统则担当协调和传递企业计划与实际生产信息桥梁的角色，在制造业信息化过程中起着越来越重要的作用[1]。

随着随着企业员工对移动办公和远程工作的需求不断上升，信息管理系统移动化是企业提升管理能力和产品质量、降低生产运作成本、应对市场竞争的客观需要。

Web 应用具有天然的跨平台优势，采用传统开发模式开发MES 应用，在开发桌面应用的同时，根据需求往往需要相应开发Android 和IOS 两大平台的APP，不仅造成了成本上升和开发周期延长，也会加重小型企业的经营负担。

近些年来，利用Web 技术开发MES 系统的实践与论文设计越来越多。但经过调研发现，这些Web系统或者只使用落后技术如JSP 进行开发，或是没有有效利用Web 技术的新特性，因而造成应用性能不足、体验较差、开发部署成本较大等问题。随着Web 前后端技术的不断发展，Chrome 浏览器V8 内核性能的提升，Web 应用已经从最初用于单纯展示信息使用的静态页面发展成了具有成熟开发架构，可以处理复杂业务需求的应用。本文将从Web 前端SPA 技术与微服务化、Web 后端技术选型及设计、WebSocket 及WebWoker 的应用，结合MES 系统的具体功能场景进行讨论实现，在一定程度上提升了MES 系统利用Web 技术跨平台的性能和体验。

1 SPA 技术及微服务技术构建前端框架

1.1 SPA 单页应用开发技术介绍

SPA（Single Page Application）技术，即为单页应用技术。它将所有的活动局限在一个Web 页面中，所有业务功能都是其子模块，这些子模块通过特定的方式挂接到页面中[2]。单页Web 应用只加载单个HTML 页面，在用户与应用程序交互时动态更新该页面的Web 应用程序，通常使用JSON 数据格式进行数据交换。其具有以下显著优点：

（1）更好的用户体验，因为不需要再切换页面时发起二次HTTP 请求获取新的HTML。

（2）减轻服务器压力，因为页面所需的资源（HTML CSS JS 等），在一次请求中就加载完成，也不需刷新地动态加载。

（3）经典MVC 开发模式，前后端各负其责，程序耦合度低利于维护。

1.2 SPA 单页应用开发技术介绍

SPA 技术在带来性能及体验优化的同时，同样存在着一些问题：由于应用只有一个HTML 页面，它不利于搜索引擎优化（SEO），同时静态资源的一次性获取会造成应用首屏加载相对缓慢。不过对于MES 系统的应用场景，这些缺点将变得无关紧要。而其可以提供快速流畅的用户体验和交互特性，非常适合于制造执行系统即时通信，快速反应的需求。

SPA 应用技术的核心是前端路由拦截，可以通过HTML5 提供的History API 进行实现，核心代码如下：

class Route {

constructor (routeMap) {

this.routeMap = routeMap;

this._bindPopState();

}

init (path) {

path = Route.correctPath(path);

history.replaceState({path： path}, '', path);

this.routeMap[path] && this.routeMap[path]();

}

go (path) {

path = Route.correctPath(path);

history.pushState({path： path}, '', path);

this.routeMap[path] && this.routeMap[path]();

}

_bindPopState () {

window.addEventListener('popstate', (e) => {

const path = e.state && e.state.path;

this.routeMap[path] && this.routeMap[path]();

});

}

static correctPath (path) {

if (path !== '/' && path.slice(-1) === '/') {

path = path.match(/(.+)/$/)[1];

}

return path;

}

}

通常我们不需要自己编写一套完整的SPA 逻辑实现，可以采用社区中成熟的SPA 模式框架进行系统的开发，如React.js。

1.3 前端微服务技术介绍

前端微服务技术将微服务的理念应用于浏览器端，即将Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。这里的前端应用特指基于前述讨论的SPA 技术开发出的应用。

单体前端应用的路由是由框架进行分发，将路由指定到对应的组件或者内部服务中。前端微服务将应用内的组件调用变成了更细粒度的应用间组件调用，即从将路由分发到应用的组件执行，变为根据路由来找到对应的应用，再由应用分发到对应的组件上。

当Web 应用复杂到一定规模时，通常会面临程序代码管理困难、开发人员配合困难等问题，使用微服务思想构建系统是一个可行有效的方法。前端微服务化的架构图如图1 所示：

图1 前端微服务架构图 Fig.1 Front-end Microservice architecture

图2 MES 系统主要模块图 Fig.2 Main module of Manufacturing Execution System

1.4 前端微服务技术在MES 系统中的应用分析

国际制造执行系统协会MESA 对制造执行系统定义11 个功能模块，包括工序详细调度、资源分配和状态管理、生产单元分配、过程管理、人力资源管理、维护管理、质量管理、文档控制、产品跟踪和产品清单管理、性能分析和数据采集[3]。MES 系统主要包含的模块如图2 所示：

可以看出，MES 系统设计的功能模块很多，且每一个模块的纵向和横向扩展也可以很大。虽然多数情况下并不需要所有的功能模块，一旦面临这种特别复杂的系统实现时。前端微服务技术可以提供很大的帮助，有利于模块间的解耦和不同开发人员的协同配合，并提高应用程序的加载体验。实现前端微服务化的方式并不唯一，下面阐述一种实现方式：

（1）Web 应用具有一个主工程，主工程在运行时去服务器获取最新的应用配置。

（2）主工程在获取到配置后，将一一创建应用，并为应用绑定生命周期。

（3）当主工程监测到路由变化的时候，将寻找是否有对应的路由匹配到应用。

（4）当匹配对应应用时，加载相应的应用。 其架构图如图3 所示。

图3 前端微服务设计图 Fig.3 Front-end microservice design

2 Node.js 与MongoDB 构建后端框架

2.1 Node.js 介绍

Node.js 是一个基于Chrome V8 引擎的JavaScript 运行环境，它使JavaScript 代码既可以在浏览器运行，也可以在服务器端运行，同时可实现文件处理、网络通信等功能[4]。Node.js 使用了一个事件驱动、非阻塞式I/O 的模型，使其轻量又高效。开发者可以在不使用线程的情况下开发出一个能够承载高并发的服务器。其他服务器端语言难以开发高并发应用，而且即使开发出来，性能也不尽人意。Node.js 正是在这个前提下被创造出来。Node.js 把JavaScript 的易学易用和Unix 网络编程的强大结合到了一起。它专注于网络功能，在HTTP、DNS、TCP 等方面更加成熟。

2.2 Node.js 在MES 系统中的应用分析

如上文所述，Node.js 可以认为是数据密集型分布式部署环境下的实时应用系统的出色解决方案。相对其他方案而言，它不适合CPU 使用率较重、IO 使用率较轻的应用——如视频编码、人工智能等。但对于MES 系统面对的并发量较高，网络请求频繁而计算负担并不严重的场景性能更高，是一种优秀的选择。

在系统设计实践中，可以配合Node.js 框架Koa 协同开发。Koa 框架是Express 框架作者提出的另一种Node.js 平台Web 框架[5]，致力于成为Web 应用和API 开发领域中的一个更小、更富有表现力、更健壮的基石。它通过利用async 函数，Koa 丢弃了传统的回调函数，并有力地增强错误处理，同时具有更好的性能。

2.3 MongoDB 介绍

MongoDB 是一个基于分布式文件存储的数据库，属于非关系数据库，用C++语言编写而成，旨在为Web 应用程序提供可扩展的高性能数据存储解决方案[6]。它在许多场景下用于替代传统的关系型数据库或键值对存储方式。它主要具有以下几点特性：

（1）实用性

MongoDB 是一个面向文档的数据库，它并不是关系型数据库，直接存取BSON，这意味着MongoDB更加灵活，因为可以在文档中直接插入数组之类的复杂数据类型，设计数据库将变得非常方便，可以大大地提升开发进度。

（2）可用性和负载均衡

MongoDB 在高可用和读负载均衡上的实现非常简洁和友好，自带副本集的概念，通过设计适合自己业务的副本集和驱动程序，可以非常有效和方便地实现高可用，读负载均衡。而在其他数据库产品中想实现以上功能，往往需要额外安装复杂的中间件，大大提升了系统复杂度，故障排查难度和运维成本。

（3）扩展性

在扩展性上，MongoDB 有非常有效的，现成的解决方案。通过自带的Mongos 集群，只需要在适当的时候继续添加Mongo 分片，就可以实现程序段自动水平扩展和路由，一方面缓解单个节点的读写压力，另外一方面可有效地均衡磁盘容量的使用情况。整个mongos 集群对应用层完全透明，并可完美地做到各个Mongos 集群组件的高可用性。

2.4 MongoDB 在MES 系统中的应用分析

MongoDB 的劣势是不适合数据量小，数据间交叉引用关系复杂，查询模式丰富的系统。而MES系统在多数场景下，如生产数据管理、文档设备人员管理、库存管理等并不需要过于复杂的查询逻辑，因此不会受到明显的影响。同时MES 系统的并发量较高，数据量较大同时面临数据库扩容的问题，很符合MongoDB 数据库的应用场景。因此选取MongoDB 作为数据库开发系统是一种可行有效的方案。

在实际系统开发中，需要为Node.js 提供操作MongoDB的插件，比较优秀的一种方案是使用Mongoose。Mongoose是在NodeJS 异步情况下对MongoDB 进行方便快捷操纵行为的目标模型工具库[7]。它封装了对MongoDB 对文档操作的常用处理方法，使得Node.js 操作MongoDB 数据库变得更加容易。Web 后端的简易架构图如图4 所示：

图4 后端简易架构图 Fig.4 Back-end simple architecture

3 WebSocket 技术实现生产监控

3.1 WebSocket 技术介绍

WebSocket 协议是基于TCP 的一种新的网络协议。WebSocket 本质上是建立在TCP 协议上的Socket连接，在应用层对Socket 连接进行了封装，简化了接口及调用方法[8]。它实现了浏览器与服务器全双工（full-duplex）通信——允许服务器主动发送信息给客户端。

WebSocket 协议为实现即时服务带来了两大好处：

（1）互相沟通的Header 是很小的-大概只有2 Bytes。

（2）服务器的推送，服务器不再被动的接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。

传统Web 应用中的即时通信采用ajax 轮询的机制，这样既耗费了服务器的资源，又会带来通信不及时，通信中断等问题。

3.2 WebSocket 技术在MES 系统中的应用分析

生产监控是MES 系统的核心模块，在生产实际中往往需要实时的获取机器设备的状态参数如温度、湿度等，以及获取机器的加工状态数据如正在加工的工件数据、加工时间和进展等。利用WebSocket技术可以解决传统Web 应用的性能弊端，是一种有效的解决方案。

在实际开发中，通常利用Socket.IO 进行辅助开发，Socket.IO 是一个WebSocket 库，包括了客户端的JavaScript 和服务器端的Node.js，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。开发生产监控实际应用的核心代码如下，为了演示方便假设机器加工数据会被推送到某个文件中：

const server = require('http').Server(app.callback());

const io = require('socket.io')(server);

io.on('connection', function (socket) {

socket.on('monitor', () => {

socket.join('monitor', () => {

let cacheData;

fs.readFile('../static/processData.txt', (err, data) => {

cacheData = data.toString(); // 缓存数据

io.to('monitor').emit('status', cacheData);

fs.watch('../static/processData.txt', (eventType, filename) => {

fs.readFile('../static/processData.txt', (err, data) => {

if (data.toString() !== cacheData) {

io.to('monitor').emit('status', data.toString());

}

});

});

});

});

})

});

浏览器端的WebSocket 实现方式与上述服务端类似，限于篇幅不再列出核心代码。

4 WebWorker 技术结合排产算法

4.1 WebWorker 技术介绍

JavaScript 语言采用的是单线程模型，所有任务只能在一个线程上完成。随着计算机计算能力的增强，尤其是多核CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。

H5 的出现为我们带来了WebWorker，WebWorker 允许我们通过浏览器主线程来创建工作线程[9]。WebWorker 为Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。等到工作线程完成计算任务，再把结果返回给主线程。这样一些计算密集型或高延迟的任务可以交付被工作线程解决，主线程（通常负责UI 交互）不会被阻塞或拖慢。

4.2 WebWorker 技术在MES 系统中的应用分析

计划排产模块是MES 系统的又一个核心模块，它的主要作用是解决柔性作业调用问题（FJSSP）。柔性作业车间调度问题（FJSSP）是组合优化和生产管理领域很重要的研究课题，它是经典的作业车间调度问题（JSSP）的延伸且被认为是强NP-hard 问题[10]。在FJSSP 中，同一个工序的加工机器可能有多台。FJSSP 由两个子问题组成，第一个子问题是将一系列可选的机器分配给指定的工序，第二个子问题是计算分配给指定机器的工序序列的完工时间。目前业界流行的FJSSP 问题解决方案是以遗传算法为基础，结合其他算法进行深度优化。

在一般的MES 系统的开发中，算法程序可以内置在Web 后端的Java 程序中，或是在Web 后端和Python 算法模块进行数据交换得到排产数据返回Web 前端。随着Chrome 浏览器V8 内核性能的提升，浏览器端的计算速度得到了较大提升。同时由于HTML5 中WebWorker 技术的出现，Web 前端的纯算法计算可以不造成JavaScript 主线程的阻塞从而影响用户的使用。

在Web 前端部署一些算法的好处是可以避免发送相关的网络请求，以及在断网异常情况下仍然可以完成模块的功能。尽管在WebWorker 中运行算法的速度仍然和传统的后端运行环境有一定的差距，但对于一些小型企业，排产需求相对不复杂，这种方案的运算速度将足以胜任生产需求，并可以发挥前述列举的优势。WebWorker 在项目中的实践核心代码如下：

// 主线程

let worker = new Worker('work.js')；// 引入文件

worker.postMessage({plans： [], mechines： []}); // 传入工序配置和加工机器

worker.onmessage = function (event) {

getDataSuccess(event.data); // 获取排产数据

}

function getDataSuccess () {

// 执行后续任务

worker.postMessage('Work done!');

…

}

// Worker 线程

self.addEventListener('message', function (e) {

let data = doJob();

self.postMessage('result ' + data); // 将排产结果返回给主线程

}, false);

function doJob (){

// 这里进行相关算法（如遗传算法）的运算

….

}

5 结论

本文给出了结合现代Web 技术开发MES 系统的有效方案，分别从Web 前端架构设计、Web 后端设计及技术选型、WebSocket 在MES 系统生产监控中的应用以及WebWorker 在MES 系统排产中的应用方案等方面进行探讨。这些方案在Web 应用的体验及性能优化、减轻服务器负载、降低开发成本及提高开发效率等方面起到了很好的帮助作用。可以为MES 系统的开发人员提供有效可行的参考，在工程实践上具有很大的意义。