摘要：以 HTML5-Net 网关为桥梁，将 Websocket 协议和 HTML5+CSS+JavaScript 网页编程技术应用于 PLC 控制系统，快速实现 PLC 控制系统 HMI 的设计以及跨平台访问。自定义了满足 PLC 功能要求的网页与服务器之间的数据通讯格式，设计了网页控制及 Websocket 通讯相关重要函数，搭建了跨平台硬件软件测试系统。实践证明，能很好的实现 PLC 跨平台访问，且能根据 PLC 控制器以及应用的变化进行功能扩展。

关键词：HTML5；跨平台；Websocket 通讯；PLC

0 引言

PLC 控制系统设计主要包含硬件搭建、PLC 编程和 HMI 编程等。当前，PLC 控制系统的 HMI 设计可通过WINCC，博图等软件实现，运行于上位机，或者是通过触摸屏相关人机界面设计软件实现，下载到触摸屏运行。上述方法设计的 HMI，均无法实现跨平台访问。HTML5 web 编程可应用于跨平台的 HMI 用户界面设计和组态设计，能很好地解决该问题。本文介绍了一种基于 HTML5-Net 网关，利用 HTML5 Web 软件开发技术进行协议程序开发以及网页设计，PC 台式电脑、笔记本电脑、平板、智能手机等任何智能终端都可以作为 PLC 的用户操作界面，实现对 PLC 的跨平台访问。

1 系统结构

网页以 HTML5-NET 服务器为桥梁，实现网页与 PLC 的数据通讯，借此实现对 PLC 的跨平台在线监控。系统结构图如图所示，网页与 PLC 的数据通讯过程为：网页通过 Websocket 协议连接 HTML5-NET 服务器，服务器通过 UDP 与 PLC 进行 UDP 通讯。

在服务器端，需要严格按照 WebSocket 协议，基于自定义的数据通信格式，利用 HTML5+CSS+JavaScript技术实现网页界面的设计，实现数据格式的调整，实现数据的发送和接收，实现网页界面的适时变化，满足 PLC功能要求。在 PLC 端，需要进行 UDP 通信编程以及数据采集和发送的编程。本文仅就网页端的编程设计进行论述。

2.自定义网页与服务器通讯的数据格式

本文以 S7-1200PLC 为例定义了通讯数据格式，数据格式包含网页向网关服务器发送数据和网页从网关服务器接收数据两个方面。

2.1 发送数据

通过网页发送数据，去控制 PLC 的数字输出口的输出以及模拟量输出，网页按照规定的数据格式发送 PLC的数字输出口的输出状态及模拟量输出大小给 HTML5-NET 服务器，HTML5-NET 服务器通过 UDP 通信将相关数据传给 PLC，PLC 接收到相关数据，通过 PLC 程序实现 PLC 数字输出口的输出及模拟量输出。

（1） S7-1200PLC 输出端子的状态控制指令定义控制指令格式具体为：40 30 30 30 31 3A 51 00 00 51

指令具体含义如下：

40：通讯数据的标志位“ @^′′ 的 ASCII 码的十六进制格式数据；

30 30 30 31：PLC 节点编号“ 0001” 的 ASCII 码的十六进制格式数据；

3A：数据开始标志“ ：” 的 ASCII 码的十六进制格式数据；

51：输出口的标志“ Q” 的 ASCII 码的十六进制格式数据；

00：该字节数据指示被控制的是哪一路输出节点，这一字节的数据取值范围为 00～07， 分别控制对应的 Q0.0～Q0.7；

00：该字节表示被控节点要切换的状态，“ 00” 表示输出口输出状态切换成“ 0^′′ 状态， “ 01” 输出口输出状态切换成“ 1” 状态；

51：该数据为数据第七个字节开始的所有数据的累加和的低八位，用于校验和。（2）S7-1200PLC 模拟量输出口输出值设置指令定义

指令格式具体为：40 30 30 30 31 3A 41 00 0C 4D

指令具体含义如下：

40：通讯数据的标志位“ @^′′ 的 ASCII 码的十六进制格式数据；30 30 30 31：PLC 节点编号“ 0001” 的 ASCII 码的十六进制格式数据；3A：数据开始标志“ ：” 的 ASCII 码的十六进制格式数据；41 ：数据标识“ A^′′ 的 ASCII 码的十六进制格式数据；00：PLC 模拟量输出口的编号（00 对应 AQ0——模拟量输出口 0，01 对应 AQ1——模拟量输出口 1）；0C ：十进制数 12，对应的是 12mA，表示将 PLC 模拟量输出口的输出电流值设置为 12mA（模拟量输出口设置电流值区间为 0mA～20mA）;

4D ：该数据为数据第七个字节开始的所有数据的累加和的低八位，用于校验和。

2.2 接收数据

网页接收到的数据中包含 PLC 的输入端子（I）、输出端子（Q）的状态，以及模拟量的采集数据，改变网页界面输入端子（I）、输出端子（Q）的状态，显示模拟量采集数据。

指令格式具体为：40 30 30 30 31 3A 49 00 00 51 00 00 41 00 00 00 00 16

指令具体含义如下：

40：通讯数据的标志位“ @^′′ 的 ASCII 码的十六进制格式数据；

30 30 30 31：PLC 节点编号“ 0001” 的 ASCII 码的十六进制格式数据；

3A：数据开始标志“ ：” 的 ASCII 码的十六进制格式数据；

49 ：数据标识“ I” 的 ASCII 码的十六进制格式数据；

00 00 ：这两字节数据为 PLC 输入口 I0 和 I1 的状态字节；

51：数据标识“ Q” 的 ASCII 码的十六进制格式数据；

00 00：这两字节数据为 PLC 输入口 Q0 和 Q1 的状态字节；

41 ：数据标识“ A” 的 ASCII 码的十六进制格式数据；

00 00 ：这两字节数据为 PLC 模拟量采集通道 0（IW64 存储单元）的原始十六进制数的 高八位和低八位；

00 00 ：这两字节数据为 PLC 模拟量采集通道 1（IW66 存储单元）的原始十六进制数的 高八位和低八位；

16 ：该数据为数据第七个字节开始的所有数据的累加和的低八位，用于校验和。3.网页与网关通信协议 websocket.js 文件设计

3.1 Websocket 通讯系统架构

网页与 HTML5-NET 服务器之间的 Websocket 通讯系统流程如图 2 所示。

当 网 页 打 开 时 ， window.onload=function 监 听 到 事 件 （ 网 页 加 载 完 成 ） 发 生 ， 启 动 FunctionSocketConnect（nSocket）网络连接函数，在这个函数中，先是调用 function GetIP /获取服务器本地 IP 及端口号函数获取到 IP 地址与端口号，得到 Uri，之后连接网络时启动四个监听事件，每个监听事件下面都有自己的处理函数，当网页间监听到数据从网关处发来时：启动 function onReceiveHex（blob）接收十六进制或者 functiononReceiveStr（blob）接收字符串，在这些接收函数中都有自己的数据处理函数；若想向网关发送数据则调用functionSend_Data_Hex（str）， function Send_Data_Str（str）这两个函数发送 16 进制或者字符串数据，在这两个函数中都调用了 function WebSocket_Send（str）数据发送函数，其中数据处理调用函数调用 function HexToStr（buf）与 functionASCIIToStr（buf）函数处理字符串与 ASCII 码，这样一个完整的网络连接，接收与发送数据，数据处理与转换的js 文件就完整了，具体应用时，我们只需灵活调用这些函数来处理网页和网管之间的通讯数据即可。

图 2 Websocket 通讯系统流程图

3.2 重要函数编程实现

结合 PLC 控制系统的功能要求，下面就几个重要函数编程设计进行阐述。

（1）接收网关十六进制数据函数

functiononReceiveHex（blob）

//当网页监听到有数据从网关发来时（websocket_Message 中调用）{ varstr，bytebuf; //定义两个变量 str ，bytrbuf;

var reader Σ=Σ new FileReader;

//定义一个 reader 为一个新的 FileReader方法

reader.readAsArrayBuffer（blob）;

//调用上图中的第二种方法将接受到的数据转换为二进制。reader.onload = function（evt）//文件读取完成时触发

{

bytebuf= new Uint8Array（reader.result）;

//定义一个新的数组 bytebuf，并将读取到的文件存放进去。str=HexToStr（bytebuf）;

//调用 HexToStr 函数将十六进制数据转为字符串

Data_Dispose（str，bytebuf，ASCIIToStr（bytebuf））;

//调用 control.js 文件中的 Date.Dispose 函数对 str，bytebuf 以及由 ASCIIToStr 函数（ASCII 码转字符串函数）处理后的数据进行进一步处理。

};

}

（2）网页向服务器发送十六进制数据函数

function Send_Data_Hex（str） //str 为要发送的十六进制数据）{

varbuff，i，tstr; //定义三个变量：buff ， I ，tstr

str=str.replace（/＼s+/g，""）;

// replace方法执行的是查找并替换的操作。它将在 str 中查找与” /＼s+/g” （空格）相匹配的子字符串，然后用” ”

（空）来替换这些子字符串。buff=new Uint8Array（str.length/2）;//建立一个新的数组 buff，长度为 str 字符串的一半for（i=0;i

4.实现网页控制功能的 control.js 文件设计

4.1 网页控制 PLC 功能流程架构

为了实现 PLC 输入输出量的测控和显示，需要进行系列功能函数的设计。具体流程如图 3 所示。

图 3 网页控制 PLC 功能流程图

当我们打开网页时，由于网页加载完成后便会自动调用 websocket.js 中的 socket函数来连接网络，连接成功时便调用 onConnect来向控制台发送网络连接成功的语句，其次再新建一个新的定时器变量用来改变网页连接的画面。若网络连接出错或是断开则调用 Disconnect（num）来重连或则发送弹窗提示我们。若无问题，则通过监听函数来观测有无数据接收或发送事件产生，若有数据接收事件发生，则调用 Data_Dispose（str，Hex，HexStr）对数据先进行处理，处理时调用 CRCFun（Buff）验证数据是否正确，处理完毕后再调用 GetBitStatu（str，num）与GetACData（VALUE0，VALUE1）对网页进行更改。若发送数据，调用 Control_DQ（num）与 ACOutFun（num）来将我们在网页上做的改动发送到服务器。

通过以上过程我们就可实时在网页上观测到一切 PLC 的变化，也可以通过网页改变 PLC 的状态了。

4.2 网页编程实现

下图为 PLC 基础控制页面的截图，图中红框圈定的部分为页面具有功能的页面元素，其功能分别如下：①显示 PLC 数字输入口 DIa 和 DIb 的状态，共十六路输入，若输入为“ 1” ，对应的 LE 灯元素变成绿色，若为“ 0” 则为灰蓝色；

②显示 PLC 数字输出口 DQa 和 DQb 的状态，共十路输出，若输出为“ 1” ，对应的 LE 灯元素变成绿色，若为“ 0” 则为灰蓝色，同时可通过点击这些元素来控制 PLC 对应输出口的输出状态；

③显示网页与 HTML5-NET 服务器的连接状态，网页若已链接服务器该图标将会显示黄灯闪烁的动画，同时绿灯常亮，否则黄绿二灯均显示熄灭；

④设置当前与网页通讯的 PLC 编号，该编号与 PLC 实现与 HTML5-NET 服务器的 UDP 连接时注册的编号一致，网页通过该编号给指定的 PLC 发送数据；

⑤显示 PLC 两个通道的模拟量采集数据，由于使用的 PLC 的模拟量信号采集类型为电压型，因此在这显示成电压数据，其中两个通道的电压采集范围为 -10V～10 V；

⑥分别用来控制 PLC 的两个通道的模拟量的输出值，这两通道的模拟量信号输出类型为电流型，范围为0mA～20 mA。

图 4 S7-1200PLC 基础控制页面

4.3 重要函数编程实现

4.3.1 PLC 模拟量输出口输出值设置函数functionACOutFun（num）

{

var Data="40";

varData_Hex=new Array;

var Bit="";

var ID="#AC_Output"+num;

varVALUE=parseInt（＼$（ID）.val）;

for（var i=0;i<4;i++）{Bit=PLC_Number.substr（i，1）;Data=Data+" "+Bit.charCodeAt.toString（16）;Data+=" 3A ";Data_Hex[0]=65;//字符"A"的 ASCII 码的十六进制数Data_Hex[1]=num;//模拟量输出口编号Data_Hex[2]=VALUE;//模拟量输出值（整数）Data_Hex[3]=0;CRC=CRCFun（Data_Hex）.CRC;Data_Hex[3]=CRC;Data+=HexToStr（Data_Hex）;Send_Data_Hex（Data）;4.3.2 PLC 模拟量输输入值采集及显示函数functionGetACData（VALUE0，VALUE1）var NORM_X_MIN=-27648，SCALE_X_MIN=-10;var NORM_X_MAX=27648，SCALE_X_MAX=10;var

AI0=（（VALUE0-NORM_X_MIN）/（NORM_X_MAX-NORM_X_MIN）*（SCALE_X_MAX-SCALE_X_MIN）+SCALE

_X_MIN）+"";var

AI1=（（VALUE1-NORM_X_MIN）/（NORM_X_MAX-NORM_X_MIN）*（SCALE_X_MAX-SCALE_X_MIN）+SCALE

_X_MIN）+"";＼$（"#AC_Input0"）.val（AI0.substr（0，AI0.indexOf（"."）+3））;//提取数据，保留小数点后两位＼$（"#AC_Input1"）.val（AI1.substr（0，AI1.indexOf（"."）+3））;//提取数据，保留小数点后两位4.3.3 数字量输出口输出状态控制函数functionControl_DQ（num）var Data="40";//定义数据标识位varData_Hex=new Array;var Bit="";for（var i=0;i<4;i++）{//将编号转换成 ASCII 码对应的十六进制数Bit=PLC_Number.substr（i，1）;Data=Data+" "+Bit.charCodeAt.toString（16）;Data+=" 3A ";//添加字符“ ：” 的 ASCII 码对应的十六进制数Data_Hex[0]=81;//字符 Q 的 ASCII 码Data_Hex[1]=num;//输出口编号Data_Hex[2]=1-OutputStatu[num];//输出口要切换的状态Data_Hex[3]=0;//CRC 位初始化CRC=CRCFun（Data_Hex）.CRC;//获取 CRC 校验值Data_Hex[3]=CRC;Data+=HexToStr（Data_Hex）;//获得最终的控制指令（HexToStr 函数将十六进制数转换成对应的字符串）Send_Data_Hex（Data）;//发送数据4.3.4 数据处理函数functionData_Dispose（str，Hex，HexStr）varNum=＼$（"#PLC_Num"）.val;//获取当前的 PLC 编号if（Num==HexStr.substr（1，4）&&HexStr.substr（0，1）=="@"）{//判断数据是否来自当前 PLC 编号所对节点var Buff=Hex.slice（6）;//将数组的第七位元素开始的数组分割出来赋给变量 Buffif（CRCFun（Buff）.Result $= = 0 ）$ {//进行 CRC 校验，校验错误则退出函数return;//获取 I0 和 I1 的状态字节数据var I0=Hex[HexStr.indexOf（"I"）+1]，I1=Hex[HexStr.indexOf（"I"）+2];//获取 Q0 和 Q1 的状态字节数据var Q0=Hex[HexStr.indexOf（"Q"）+1]，Q1=Hex[HexStr.indexOf（"Q"）+2];//获取模拟量采集口通道 0 的数据var AI0=Hex[HexStr.indexOf（"A"）+1]*0x100+Hex[HexStr.indexOf（"A"）+2];//获取模拟量采集口通道 1 的数据var AI1=Hex[HexStr.indexOf（"A"）+3]*0x100+Hex[HexStr.indexOf（"A"）+4];var IB0=I0.toString（2），IB1=I1.toString（2）;//将十六进制数据转换成对应的二进制数的字符串var QB0=Q0.toString（2），QB1=Q1.toString（2）;while（IB0.length<8）{IB0="0"+IB0;}//长度不满足要求在高位补零while（IB1.length<6）{IB1="0"+IB1;}while（QB0.length<8）{QB0="0"+QB0;}while（QB1.length<2）{QB1="0"+QB1;}GetBitStatu（IB1+IB0，0）;GetBitStatu（QB1+QB0，1）;GetACData（AI0，AI1）;}}

5 结语

本文借助 HTML5+CSS+JavaScript 技术，在 Adobe Dreamweaver CS6 平台下实现了 PLC 跨平台访问网页端网关通信及网页控制编程设计，下载到一内含 Web 服务器和 UDP 服务器端口的 HTML5-Net 网关，基于各类智能终端，实现了 PLC 的跨平台应用。因为是自定义数据格式，根据 PLC 资源的变化，只需对系列函数进行微调，即可实现各类 PLC 的跨平台访问，该方法具有普适性。

参考文献（Reference）：

[1]李伟，王强，陈晨。基于 OPC UA 与 WebSocket 的 PLC 跨平台 Web 监控系统设计 [J]. 工业控制计

算机，2024， 37 （8）： 56-58.

[2]赵鑫，孙伟，刘敏。面向异构 PLC 的协议转换网关及 Web 组态界面开发 [J]. 自动化仪表，2024， 45 （5）：

45-49.

[3]陈宇，周明，吴迪。基于 HTML5 的 PLC 跨平台 Web 控制界面设计与实现 [J]. 电子技术应用，2024，

50 （3）： 89-93.

[4]王浩，李娟，张磊。基于 Node.js 的 PLC 跨平台 Web 网关及前端界面开发 [J]. 计算机测量与控制，

2023， 31 （10）： 123-127.

[5]刘阳，张峰，马涛。基于嵌入式 Web 服务器的 PLC 跨平台监控网关设计 [D]. 杭州 ∵ 杭州电子科技大

学，2023.

[6]何四华，基于WebSocket技术的靶船远程监控数据推送方法，兵器装备工程学报，2020 年 12

月：262

[7]姜灿灿，基于 PLC 的跨平台通信软件的设计与实现《南方农机》，2019 年第 23 期 245-246

作者简介：吴云君（1982-），男，江西人，实验师，主要从事自动化系统、物联网技术研究。支撑项目：市教委科技项目：PLC 跨平台应用技术研究（KJQN202101519）。