現(xiàn)代Web 技術(shù)在MES 系統(tǒng)中的應(yīng)用

郭政健，楊 軍

(北京郵電大學(xué)自動(dòng)化學(xué)院，北京 100876)

0 引言

企業(yè)的生產(chǎn)管理信息化建設(shè)主要通過建立企業(yè)資源計(jì)劃（ERP）、制造執(zhí)行系統(tǒng)（MES）、過程控制系統(tǒng)（PCS）等，來實(shí)現(xiàn)計(jì)劃層、執(zhí)行層及設(shè)備層的有機(jī)結(jié)合。其中的ERP 實(shí)現(xiàn)對企業(yè)內(nèi)部資源和生產(chǎn)計(jì)劃的有效管理，PCS 完成對生產(chǎn)過程和車間設(shè)備的及時(shí)管控；而位于執(zhí)行層的MES 系統(tǒng)則擔(dān)當(dāng)協(xié)調(diào)和傳遞企業(yè)計(jì)劃與實(shí)際生產(chǎn)信息橋梁的角色，在制造業(yè)信息化過程中起著越來越重要的作用[1]。

隨著隨著企業(yè)員工對移動(dòng)辦公和遠(yuǎn)程工作的需求不斷上升，信息管理系統(tǒng)移動(dòng)化是企業(yè)提升管理能力和產(chǎn)品質(zhì)量、降低生產(chǎn)運(yùn)作成本、應(yīng)對市場競爭的客觀需要。

Web 應(yīng)用具有天然的跨平臺優(yōu)勢，采用傳統(tǒng)開發(fā)模式開發(fā)MES 應(yīng)用，在開發(fā)桌面應(yīng)用的同時(shí)，根據(jù)需求往往需要相應(yīng)開發(fā)Android 和IOS 兩大平臺的APP，不僅造成了成本上升和開發(fā)周期延長，也會(huì)加重小型企業(yè)的經(jīng)營負(fù)擔(dān)。

近些年來，利用Web 技術(shù)開發(fā)MES 系統(tǒng)的實(shí)踐與論文設(shè)計(jì)越來越多。但經(jīng)過調(diào)研發(fā)現(xiàn)，這些Web系統(tǒng)或者只使用落后技術(shù)如JSP 進(jìn)行開發(fā)，或是沒有有效利用Web 技術(shù)的新特性，因而造成應(yīng)用性能不足、體驗(yàn)較差、開發(fā)部署成本較大等問題。隨著Web 前后端技術(shù)的不斷發(fā)展，Chrome 瀏覽器V8 內(nèi)核性能的提升，Web 應(yīng)用已經(jīng)從最初用于單純展示信息使用的靜態(tài)頁面發(fā)展成了具有成熟開發(fā)架構(gòu)，可以處理復(fù)雜業(yè)務(wù)需求的應(yīng)用。本文將從Web 前端SPA 技術(shù)與微服務(wù)化、Web 后端技術(shù)選型及設(shè)計(jì)、WebSocket 及WebWoker 的應(yīng)用，結(jié)合MES 系統(tǒng)的具體功能場景進(jìn)行討論實(shí)現(xiàn)，在一定程度上提升了MES 系統(tǒng)利用Web 技術(shù)跨平臺的性能和體驗(yàn)。

1 SPA 技術(shù)及微服務(wù)技術(shù)構(gòu)建前端框架

1.1 SPA 單頁應(yīng)用開發(fā)技術(shù)介紹

SPA（Single Page Application）技術(shù)，即為單頁應(yīng)用技術(shù)。它將所有的活動(dòng)局限在一個(gè)Web 頁面中，所有業(yè)務(wù)功能都是其子模塊，這些子模塊通過特定的方式掛接到頁面中[2]。單頁Web 應(yīng)用只加載單個(gè)HTML 頁面，在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web 應(yīng)用程序，通常使用JSON 數(shù)據(jù)格式進(jìn)行數(shù)據(jù)交換。其具有以下顯著優(yōu)點(diǎn)：

（1）更好的用戶體驗(yàn)，因?yàn)椴恍枰偾袚Q頁面時(shí)發(fā)起二次HTTP 請求獲取新的HTML。

（2）減輕服務(wù)器壓力，因?yàn)轫撁嫠璧馁Y源（HTML CSS JS 等），在一次請求中就加載完成，也不需刷新地動(dòng)態(tài)加載。

（3）經(jīng)典MVC 開發(fā)模式，前后端各負(fù)其責(zé)，程序耦合度低利于維護(hù)。

1.2 SPA 單頁應(yīng)用開發(fā)技術(shù)介紹

SPA 技術(shù)在帶來性能及體驗(yàn)優(yōu)化的同時(shí)，同樣存在著一些問題：由于應(yīng)用只有一個(gè)HTML 頁面，它不利于搜索引擎優(yōu)化（SEO），同時(shí)靜態(tài)資源的一次性獲取會(huì)造成應(yīng)用首屏加載相對緩慢。不過對于MES 系統(tǒng)的應(yīng)用場景，這些缺點(diǎn)將變得無關(guān)緊要。而其可以提供快速流暢的用戶體驗(yàn)和交互特性，非常適合于制造執(zhí)行系統(tǒng)即時(shí)通信，快速反應(yīng)的需求。

SPA 應(yīng)用技術(shù)的核心是前端路由攔截，可以通過HTML5 提供的History API 進(jìn)行實(shí)現(xiàn)，核心代碼如下：

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 邏輯實(shí)現(xiàn)，可以采用社區(qū)中成熟的SPA 模式框架進(jìn)行系統(tǒng)的開發(fā)，如React.js。

1.3 前端微服務(wù)技術(shù)介紹

前端微服務(wù)技術(shù)將微服務(wù)的理念應(yīng)用于瀏覽器端，即將Web 應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)小型前端應(yīng)用聚合為一的應(yīng)用。各個(gè)前端應(yīng)用還可以獨(dú)立運(yùn)行、獨(dú)立開發(fā)、獨(dú)立部署。這里的前端應(yīng)用特指基于前述討論的SPA 技術(shù)開發(fā)出的應(yīng)用。

單體前端應(yīng)用的路由是由框架進(jìn)行分發(fā)，將路由指定到對應(yīng)的組件或者內(nèi)部服務(wù)中。前端微服務(wù)將應(yīng)用內(nèi)的組件調(diào)用變成了更細(xì)粒度的應(yīng)用間組件調(diào)用，即從將路由分發(fā)到應(yīng)用的組件執(zhí)行，變?yōu)楦鶕?jù)路由來找到對應(yīng)的應(yīng)用，再由應(yīng)用分發(fā)到對應(yīng)的組件上。

當(dāng)Web 應(yīng)用復(fù)雜到一定規(guī)模時(shí)，通常會(huì)面臨程序代碼管理困難、開發(fā)人員配合困難等問題，使用微服務(wù)思想構(gòu)建系統(tǒng)是一個(gè)可行有效的方法。前端微服務(wù)化的架構(gòu)圖如圖1 所示：

圖1 前端微服務(wù)架構(gòu)圖 Fig.1 Front-end Microservice architecture

圖2 MES 系統(tǒng)主要模塊圖 Fig.2 Main module of Manufacturing Execution System

1.4 前端微服務(wù)技術(shù)在MES 系統(tǒng)中的應(yīng)用分析

國際制造執(zhí)行系統(tǒng)協(xié)會(huì)MESA 對制造執(zhí)行系統(tǒng)定義11 個(gè)功能模塊，包括工序詳細(xì)調(diào)度、資源分配和狀態(tài)管理、生產(chǎn)單元分配、過程管理、人力資源管理、維護(hù)管理、質(zhì)量管理、文檔控制、產(chǎn)品跟蹤和產(chǎn)品清單管理、性能分析和數(shù)據(jù)采集[3]。MES 系統(tǒng)主要包含的模塊如圖2 所示：

可以看出，MES 系統(tǒng)設(shè)計(jì)的功能模塊很多，且每一個(gè)模塊的縱向和橫向擴(kuò)展也可以很大。雖然多數(shù)情況下并不需要所有的功能模塊，一旦面臨這種特別復(fù)雜的系統(tǒng)實(shí)現(xiàn)時(shí)。前端微服務(wù)技術(shù)可以提供很大的幫助，有利于模塊間的解耦和不同開發(fā)人員的協(xié)同配合，并提高應(yīng)用程序的加載體驗(yàn)。實(shí)現(xiàn)前端微服務(wù)化的方式并不唯一，下面闡述一種實(shí)現(xiàn)方式：

（1）Web 應(yīng)用具有一個(gè)主工程，主工程在運(yùn)行時(shí)去服務(wù)器獲取最新的應(yīng)用配置。

（2）主工程在獲取到配置后，將一一創(chuàng)建應(yīng)用，并為應(yīng)用綁定生命周期。

（3）當(dāng)主工程監(jiān)測到路由變化的時(shí)候，將尋找是否有對應(yīng)的路由匹配到應(yīng)用。

（4）當(dāng)匹配對應(yīng)應(yīng)用時(shí)，加載相應(yīng)的應(yīng)用。 其架構(gòu)圖如圖3 所示。

圖3 前端微服務(wù)設(shè)計(jì)圖 Fig.3 Front-end microservice design

2 Node.js 與MongoDB 構(gòu)建后端框架

2.1 Node.js 介紹

Node.js 是一個(gè)基于Chrome V8 引擎的JavaScript 運(yùn)行環(huán)境，它使JavaScript 代碼既可以在瀏覽器運(yùn)行，也可以在服務(wù)器端運(yùn)行，同時(shí)可實(shí)現(xiàn)文件處理、網(wǎng)絡(luò)通信等功能[4]。Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O 的模型，使其輕量又高效。開發(fā)者可以在不使用線程的情況下開發(fā)出一個(gè)能夠承載高并發(fā)的服務(wù)器。其他服務(wù)器端語言難以開發(fā)高并發(fā)應(yīng)用，而且即使開發(fā)出來，性能也不盡人意。Node.js 正是在這個(gè)前提下被創(chuàng)造出來。Node.js 把JavaScript 的易學(xué)易用和Unix 網(wǎng)絡(luò)編程的強(qiáng)大結(jié)合到了一起。它專注于網(wǎng)絡(luò)功能，在HTTP、DNS、TCP 等方面更加成熟。

2.2 Node.js 在MES 系統(tǒng)中的應(yīng)用分析

如上文所述，Node.js 可以認(rèn)為是數(shù)據(jù)密集型分布式部署環(huán)境下的實(shí)時(shí)應(yīng)用系統(tǒng)的出色解決方案。相對其他方案而言，它不適合CPU 使用率較重、IO 使用率較輕的應(yīng)用——如視頻編碼、人工智能等。但對于MES 系統(tǒng)面對的并發(fā)量較高，網(wǎng)絡(luò)請求頻繁而計(jì)算負(fù)擔(dān)并不嚴(yán)重的場景性能更高，是一種優(yōu)秀的選擇。

在系統(tǒng)設(shè)計(jì)實(shí)踐中，可以配合Node.js 框架Koa 協(xié)同開發(fā)。Koa 框架是Express 框架作者提出的另一種Node.js 平臺Web 框架[5]，致力于成為Web 應(yīng)用和API 開發(fā)領(lǐng)域中的一個(gè)更小、更富有表現(xiàn)力、更健壯的基石。它通過利用async 函數(shù)，Koa 丟棄了傳統(tǒng)的回調(diào)函數(shù)，并有力地增強(qiáng)錯(cuò)誤處理，同時(shí)具有更好的性能。

2.3 MongoDB 介紹

MongoDB 是一個(gè)基于分布式文件存儲的數(shù)據(jù)庫，屬于非關(guān)系數(shù)據(jù)庫，用C++語言編寫而成，旨在為Web 應(yīng)用程序提供可擴(kuò)展的高性能數(shù)據(jù)存儲解決方案[6]。它在許多場景下用于替代傳統(tǒng)的關(guān)系型數(shù)據(jù)庫或鍵值對存儲方式。它主要具有以下幾點(diǎn)特性：

（1）實(shí)用性

MongoDB 是一個(gè)面向文檔的數(shù)據(jù)庫，它并不是關(guān)系型數(shù)據(jù)庫，直接存取BSON，這意味著MongoDB更加靈活，因?yàn)榭梢栽谖臋n中直接插入數(shù)組之類的復(fù)雜數(shù)據(jù)類型，設(shè)計(jì)數(shù)據(jù)庫將變得非常方便，可以大大地提升開發(fā)進(jìn)度。

（2）可用性和負(fù)載均衡

MongoDB 在高可用和讀負(fù)載均衡上的實(shí)現(xiàn)非常簡潔和友好，自帶副本集的概念，通過設(shè)計(jì)適合自己業(yè)務(wù)的副本集和驅(qū)動(dòng)程序，可以非常有效和方便地實(shí)現(xiàn)高可用，讀負(fù)載均衡。而在其他數(shù)據(jù)庫產(chǎn)品中想實(shí)現(xiàn)以上功能，往往需要額外安裝復(fù)雜的中間件，大大提升了系統(tǒng)復(fù)雜度，故障排查難度和運(yùn)維成本。

（3）擴(kuò)展性

在擴(kuò)展性上，MongoDB 有非常有效的，現(xiàn)成的解決方案。通過自帶的Mongos 集群，只需要在適當(dāng)?shù)臅r(shí)候繼續(xù)添加Mongo 分片，就可以實(shí)現(xiàn)程序段自動(dòng)水平擴(kuò)展和路由，一方面緩解單個(gè)節(jié)點(diǎn)的讀寫壓力，另外一方面可有效地均衡磁盤容量的使用情況。整個(gè)mongos 集群對應(yīng)用層完全透明，并可完美地做到各個(gè)Mongos 集群組件的高可用性。

2.4 MongoDB 在MES 系統(tǒng)中的應(yīng)用分析

MongoDB 的劣勢是不適合數(shù)據(jù)量小，數(shù)據(jù)間交叉引用關(guān)系復(fù)雜，查詢模式豐富的系統(tǒng)。而MES系統(tǒng)在多數(shù)場景下，如生產(chǎn)數(shù)據(jù)管理、文檔設(shè)備人員管理、庫存管理等并不需要過于復(fù)雜的查詢邏輯，因此不會(huì)受到明顯的影響。同時(shí)MES 系統(tǒng)的并發(fā)量較高，數(shù)據(jù)量較大同時(shí)面臨數(shù)據(jù)庫擴(kuò)容的問題，很符合MongoDB 數(shù)據(jù)庫的應(yīng)用場景。因此選取MongoDB 作為數(shù)據(jù)庫開發(fā)系統(tǒng)是一種可行有效的方案。

在實(shí)際系統(tǒng)開發(fā)中，需要為Node.js 提供操作MongoDB的插件，比較優(yōu)秀的一種方案是使用Mongoose。Mongoose是在NodeJS 異步情況下對MongoDB 進(jìn)行方便快捷操縱行為的目標(biāo)模型工具庫[7]。它封裝了對MongoDB 對文檔操作的常用處理方法，使得Node.js 操作MongoDB 數(shù)據(jù)庫變得更加容易。Web 后端的簡易架構(gòu)圖如圖4 所示：

圖4 后端簡易架構(gòu)圖 Fig.4 Back-end simple architecture

3 WebSocket 技術(shù)實(shí)現(xiàn)生產(chǎn)監(jiān)控

3.1 WebSocket 技術(shù)介紹

WebSocket 協(xié)議是基于TCP 的一種新的網(wǎng)絡(luò)協(xié)議。WebSocket 本質(zhì)上是建立在TCP 協(xié)議上的Socket連接，在應(yīng)用層對Socket 連接進(jìn)行了封裝，簡化了接口及調(diào)用方法[8]。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工（full-duplex）通信——允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。

WebSocket 協(xié)議為實(shí)現(xiàn)即時(shí)服務(wù)帶來了兩大好處：

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

（2）服務(wù)器的推送，服務(wù)器不再被動(dòng)的接收到瀏覽器的請求之后才返回?cái)?shù)據(jù)，而是在有新數(shù)據(jù)時(shí)就主動(dòng)推送給瀏覽器。

傳統(tǒng)Web 應(yīng)用中的即時(shí)通信采用ajax 輪詢的機(jī)制，這樣既耗費(fèi)了服務(wù)器的資源，又會(huì)帶來通信不及時(shí)，通信中斷等問題。

3.2 WebSocket 技術(shù)在MES 系統(tǒng)中的應(yīng)用分析

生產(chǎn)監(jiān)控是MES 系統(tǒng)的核心模塊，在生產(chǎn)實(shí)際中往往需要實(shí)時(shí)的獲取機(jī)器設(shè)備的狀態(tài)參數(shù)如溫度、濕度等，以及獲取機(jī)器的加工狀態(tài)數(shù)據(jù)如正在加工的工件數(shù)據(jù)、加工時(shí)間和進(jìn)展等。利用WebSocket技術(shù)可以解決傳統(tǒng)Web 應(yīng)用的性能弊端，是一種有效的解決方案。

在實(shí)際開發(fā)中，通常利用Socket.IO 進(jìn)行輔助開發(fā)，Socket.IO 是一個(gè)WebSocket 庫，包括了客戶端的JavaScript 和服務(wù)器端的Node.js，它的目標(biāo)是構(gòu)建可以在不同瀏覽器和移動(dòng)設(shè)備上使用的實(shí)時(shí)應(yīng)用。開發(fā)生產(chǎn)監(jiān)控實(shí)際應(yīng)用的核心代碼如下，為了演示方便假設(shè)機(jī)器加工數(shù)據(jù)會(huì)被推送到某個(gè)文件中：

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(); // 緩存數(shù)據(jù)

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 實(shí)現(xiàn)方式與上述服務(wù)端類似，限于篇幅不再列出核心代碼。

4 WebWorker 技術(shù)結(jié)合排產(chǎn)算法

4.1 WebWorker 技術(shù)介紹

JavaScript 語言采用的是單線程模型，所有任務(wù)只能在一個(gè)線程上完成。隨著計(jì)算機(jī)計(jì)算能力的增強(qiáng)，尤其是多核CPU 的出現(xiàn)，單線程帶來很大的不便，無法充分發(fā)揮計(jì)算機(jī)的計(jì)算能力。

H5 的出現(xiàn)為我們帶來了WebWorker，WebWorker 允許我們通過瀏覽器主線程來創(chuàng)建工作線程[9]。WebWorker 為Web 內(nèi)容在后臺線程中運(yùn)行腳本提供了一種簡單的方法。線程可以執(zhí)行任務(wù)而不干擾用戶界面。等到工作線程完成計(jì)算任務(wù)，再把結(jié)果返回給主線程。這樣一些計(jì)算密集型或高延遲的任務(wù)可以交付被工作線程解決，主線程（通常負(fù)責(zé)UI 交互）不會(huì)被阻塞或拖慢。

4.2 WebWorker 技術(shù)在MES 系統(tǒng)中的應(yīng)用分析

計(jì)劃排產(chǎn)模塊是MES 系統(tǒng)的又一個(gè)核心模塊，它的主要作用是解決柔性作業(yè)調(diào)用問題（FJSSP）。柔性作業(yè)車間調(diào)度問題（FJSSP）是組合優(yōu)化和生產(chǎn)管理領(lǐng)域很重要的研究課題，它是經(jīng)典的作業(yè)車間調(diào)度問題（JSSP）的延伸且被認(rèn)為是強(qiáng)NP-hard 問題[10]。在FJSSP 中，同一個(gè)工序的加工機(jī)器可能有多臺。FJSSP 由兩個(gè)子問題組成，第一個(gè)子問題是將一系列可選的機(jī)器分配給指定的工序，第二個(gè)子問題是計(jì)算分配給指定機(jī)器的工序序列的完工時(shí)間。目前業(yè)界流行的FJSSP 問題解決方案是以遺傳算法為基礎(chǔ)，結(jié)合其他算法進(jìn)行深度優(yōu)化。

在一般的MES 系統(tǒng)的開發(fā)中，算法程序可以內(nèi)置在Web 后端的Java 程序中，或是在Web 后端和Python 算法模塊進(jìn)行數(shù)據(jù)交換得到排產(chǎn)數(shù)據(jù)返回Web 前端。隨著Chrome 瀏覽器V8 內(nèi)核性能的提升，瀏覽器端的計(jì)算速度得到了較大提升。同時(shí)由于HTML5 中WebWorker 技術(shù)的出現(xiàn)，Web 前端的純算法計(jì)算可以不造成JavaScript 主線程的阻塞從而影響用戶的使用。

在Web 前端部署一些算法的好處是可以避免發(fā)送相關(guān)的網(wǎng)絡(luò)請求，以及在斷網(wǎng)異常情況下仍然可以完成模塊的功能。盡管在WebWorker 中運(yùn)行算法的速度仍然和傳統(tǒng)的后端運(yùn)行環(huán)境有一定的差距，但對于一些小型企業(yè)，排產(chǎn)需求相對不復(fù)雜，這種方案的運(yùn)算速度將足以勝任生產(chǎn)需求，并可以發(fā)揮前述列舉的優(yōu)勢。WebWorker 在項(xiàng)目中的實(shí)踐核心代碼如下：

// 主線程

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

worker.postMessage({plans： [], mechines： []}); // 傳入工序配置和加工機(jī)器

worker.onmessage = function (event) {

getDataSuccess(event.data); // 獲取排產(chǎn)數(shù)據(jù)

}

function getDataSuccess () {

// 執(zhí)行后續(xù)任務(wù)

worker.postMessage('Work done!');

…

}

// Worker 線程

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

let data = doJob();

self.postMessage('result ' + data); // 將排產(chǎn)結(jié)果返回給主線程

}, false);

function doJob (){

// 這里進(jìn)行相關(guān)算法（如遺傳算法）的運(yùn)算

….

}

5 結(jié)論

本文給出了結(jié)合現(xiàn)代Web 技術(shù)開發(fā)MES 系統(tǒng)的有效方案，分別從Web 前端架構(gòu)設(shè)計(jì)、Web 后端設(shè)計(jì)及技術(shù)選型、WebSocket 在MES 系統(tǒng)生產(chǎn)監(jiān)控中的應(yīng)用以及WebWorker 在MES 系統(tǒng)排產(chǎn)中的應(yīng)用方案等方面進(jìn)行探討。這些方案在Web 應(yīng)用的體驗(yàn)及性能優(yōu)化、減輕服務(wù)器負(fù)載、降低開發(fā)成本及提高開發(fā)效率等方面起到了很好的幫助作用。可以為MES 系統(tǒng)的開發(fā)人員提供有效可行的參考，在工程實(shí)踐上具有很大的意義。