Node-RED 基于Web浏览器的可视化拖拽式Scada软件

Node-RED 是一种编程工具，用于以新颖有趣的方式将硬件设备、API 和在线服务连接在一起。

它提供了一个基于浏览器的可视化拖拽式编辑器，可以使用面板中的各种节点轻松地将流连接在一起，只需单击一下即可将其部署到其runtime。

它可以使用富文本编辑器在编辑器中创建 JavaScript 函数。内置库允许您保存有用的函数、模板或流程以供重复使用。

轻量级Run Time基于 Node.js 构建，充分利用其事件驱动、非阻塞模型。这使得它非常适合在网络边缘的低成本硬件（例如 Raspberry Pi）以及云服务器中运行。

Node 的包存储库中有超过 225,000 个模块，几乎包含了所有的工业通讯协议，可以轻松与PLC、仪表仪器、模块等通讯。

在 Node-RED 中创建的流使用 JSON 存储，可以轻松导入和导出以便与其他人共享。

在线流程库可让您与他人分享您最好的流程。

node-red编辑器的使用界面说明

当成功在windows系统启动node-red开发工具后，可以看到node-red编辑器，这是在浏览器执行的web使用界面，如下图所示。

上述node-red编辑器的上方是标签列（Header），位在标签列最右方是部署按钮，在下方使用界面从左至右分成三大部分：节点工具箱（Palette)、流程标签页和侧边栏（sidebar）。

节点工具箱

在node-red编辑器左边是节点工具箱，提供建立流程的节点清单，节点是node-red基本建立元素，每一个节点就是一个软体模组，可以处理node-red流程传递的讯息。

node-red是使用群组方式来分类节点，除了预设按装的节点外，还可以自行安装所需的节点，部分新安装节点会在工具箱建立新区段，工具箱主要区段的简单说明，如下所示。

• 共通（Commom）：基本流程的起始.状态和除错的相关节点。
• 功能（Function）：处理流程讯息的相关节点。
• 网络（Network）：建立网络应用程式的相关节点。
• 序列（Sequence）：处理讯息分割.和并和排序的相关节点。
• 解析（Parser）：解析JSON.XML等资料的相关节点。
• 存储（Storage）：用来储存资料的相关节点。

流程标签页

流程标签页的流程编辑空间（Workspace），预设建立名为【流程1】的流程标签页（按标签页的【+】按钮可以新增流程标签页），每一个流程标签页是一个工作空间，可以直接从节点工具箱拖拉至工作空间后，连接节点建立流程（Flows），如下图所示。

在完成流程编辑后，如果在节点右上方看到红色三角形显示，表示节点右错误，如果是绿色小圆点，表示节点尚未部署，我们需要按工具最右侧的【部署】按钮，部署和执行node-red流程，在成功部署后，可以看到节点右上方小圆点已经不见了，如下图所示。

侧边栏

在node-red编辑器的右边是侧边栏，提供多种编辑所需的工具，我们可以在上方标题列按图示按钮来切换这些工具的标题列，如果工具太多，请选择右上方向下箭头图示，可以在下拉功能表选择所需的工具，如下图所示。

上述从上而下的工具说明，如下所示：

• 节点管理（Information）：显示节点和流程的资料。
• 帮助（Help）：检视指定节点的文字说明。
• 名称（Debug messages）：显示流程的资料送入debug节点的内容，可以帮助我们进行流程的对错。
• 配置节点（Configuration nodes）：管理流程的配置节点，例如：仪表板的标签和群组.序列号和各类伺服等。
• 上下文数据（Context Date）：显示节点.流程和全部的分享资料。

在node-red安装新节点时，部分节点会新增工具至侧边栏，例如：安装node-red-dashboard仪表板节点，就会新增dashboard工具的标签页。

node-red编辑器的基本操作

node-red主功能表

在node-red编辑器右上方三条线的图示是主功能表，点选可以开启主功能表，如下图所示：

上述主功能表的主要选项说明，如下所示：

显示

在【显示】子功能表提供相关选项，可以切换显示节点工具箱（显示控制板）侧边栏·事件日志和工作列表。在分隔线下方是常用的侧边栏工具，例如：仪表板和对错页面。

搜寻流程

在主功能表执行【搜寻流程】命令，可以搜寻流程的节点，只需在上方输入关键字，即可在下方显示搜寻结果，如下图所示。

点选节点，可以看到节点表示为目标节点。

修改节点配置

如果在node-red流程拥有配置节点，例如：MQTT代理人，我们可以执行【修改节点配置】命令，快速切换至侧边栏的配置节点工具（在点选后，按Del键即可删除指定的配置节点，如果节点是虚线框表示此配置节点并没有使用），如下图所示。

使用者设置

在主功能表执行【设置】命令，可以在上方指定界面的语言，在工作空间是否显示网格和尺寸和是否显示节点状态，如下图所示。

管理流程标签页

node-red标签页可以使用流程标签页来管理你的node-red，预设建立名为【流程3】的标签页，我们可以新增.删除.更名和启用标签页流程。

新增流程标签页

在node-red编辑器可以新增流程标签页来群组管理不同种类的node-red流程，其步骤如下。

在工作空间上方标题列按之后【+】按钮，或执行主功能表的【流程>增加】命令来新增标签页。

更名流程标签页

在切换指定流程标签页后，例如：【流程3】执行主功能表的【流程>重新命名】命令，可以在【名称】栏更改标签页名后，和下方输入详细描述，按【完成】按钮完成更名，如下图所示。

然后可以看到标签页改成新名称，如下图所示。

停用和删除流程标签页

当我们在node-red编辑器新增标签页，预设是启用流程标签页，基于测试需要，我们可以停用指定的流程标签页。例如：停用名为【web网站】的标签页，其步骤如下所示。

请双击打开【web网站】标签页

在对话框点选左下角【有效】，就会切换成【无效】，按【完成】按钮停用此标签页。

可以看到标签页成为虚线框，如下图所示：

在点选欲删除的标签页后，执行主功能表的【流程>删除】命令，就可以删除标签页（请注意！删除流程标签页并不会确认删除）。

节点管理

node-red节点管理就是管理节点工具箱的节点清单，我们可以安装和移除节点，如果节点有更新，也可以在节点管理进行更新节点。

安装和移除节点

我们准备在node-red安装random随机数节点，其步骤如下：

请执行主功能表的【流程>节点管理】命令，可以在【节点】标签看到目前已经安装的节点清单（按【移除】按钮可删除此节点），如下图所示：

点击安装按钮，在输入框如输入random，找到node-red-node-random节点，按【安装】按钮安装此节点。

安装完成节点工具箱会多出此节点。

请注意！有些节点的安装需要重新启动node-red，有些节点需要特殊的软体需求。

建立node-red视觉化流程

  在前面安装和启动node-red开发工具后，我们就可以建立第一个流程来说明node-red的基本使用，例如：我们准备建立流程，只需点选inject节点前的按钮，就可以在debug节点显示一个hello word！joe chen讯息文字，每按一次显示一个，其步骤如下。

  启动node-red开发工具，预设新增【流程1】标签，请拖拉左边【共通】区域的【inject】节点至中间流程编辑区域，此节点可以触发事件和送出流程讯息至流程的下一个节点，如下图所示。

双击打开节点，可以看到【编辑inject节点】对话方框，在【msg.payload】属性【=】后的值栏位，点选向下小箭头的下拉式清单选【文字列】的字串，即指定payload属性的资料类型。

在栏位输入【hello world！】字串，在下方重复栏可以设定周期送出msg讯息，按右上方【完成】按钮完成编辑。

可以看到节点成为【hello world！】，如下图所示。

请拖拉左边位在【功能】区域的【function】节点至流程编辑区域，可以编写javescript代码来处理讯息，如下图所示。

双击打开节点，在【编辑function节点】对话框的【名称】栏输入节点名称【My name】，在下方输入javescript代码将讯息msg.payload使用【+=】运算符加上姓名字串，然后按【完成】按钮，如下所示。

拖拉【共通】区域的【debug】节点至流程编辑区域，如下图所示。

接着开始连接节点，请将游标移至【inject】节点后的小圆点的端点，按住滑鼠左键后开始拖拉，可以看到一条灰色线，请拖拉至【function】节点前方小圆点的端点，如下图所示。

放开滑鼠左键，可以建立2个节点之间的连接线，接着将游标移至【function】节点后的小圆点，按住滑鼠左键拖拉至【debug】节点前方的小圆点，建立之间的连接线，如下图所示。

请按右上方红色【部署】钮储存和部署node-red流程。

现在，我们可以执行流程，请按【inject】节点前方游标所在的圆角方框按钮，在侧边栏选【名称】（debug）工具，可以在【调试窗口】标签页看到送出的讯息文字，如下图所示。

上述第一个流程是一个标准的node-red流程，包含输入.处理和输出节点，从输入inject节点触发时间送出【hello worid！】字串的讯息，最后在输出节点输出msg.payload属性值。

在节点之间传送的msg物件，这就是在流程的个节点之间传送的资料，主要使用payload属性，如果需要，我们可以自行增加属性，在【debug】节点可以设定输出的msg物件是哪一个属性，如下图所示。

上述debug节点预设输出msg.payload，点选msg，选【与调试输出相同】，可以输出整个msg物件。

请注意！当在node-red编辑流程后，如果流程有任何变更，我们都需要再次按右上方【部署】按钮来部署和执行流程，此操作就是在储存和执行流程。

编辑node-red流程

node-red编辑器是在流程标签页的工作空间建立编辑的流程，我们可以使用键盘或滑鼠来编辑node-red流程。

删除连接线.节点和整个node-red流程

在选取连接线成为灰色后，按del键删除2个节点之间的连接线，如下图所示。

无论节点有多少连接线，选取指定节点显示橙色外框后，按del键，即可删除选取的节点，如下图所示。

在node-red删除流程，请用滑鼠拖拉选取整个流程后，按del键来删除选取的整个流程。

请注意！如果不小心删错了，请按ctrl+z键来复原删除操作。

编辑节点的属性

选取节点后，按enter键，或双击节点，都可以开启编辑节点对话框，以inject节点为例，如下图所示。

node-red每一个节点都有不同的栏位设定，在这说明是每一个节点都拥有的栏位和按钮，如下所示。

• 删除钮：位于左上角的删除按钮，可以删除此节点。
• 完成钮：在完成编辑后，请按右上角【完成】按钮。
• 名称栏位或name栏位：在此栏位可以输入节点名称，这是节点显示在编辑器工作空间的名称，例如：输入名称【启动流程】，如下图所示。
• 

• 有效：在node-red新增的节点预设是启用，所以显示有效，点选可切换成无效，也就是停用此节点，可以看到节点成为虚线框，如下图所示。
• 
• 

键盘快捷键

node-red因为是web界面，所以有很多编辑操作需要使用键盘按键，请在主功能表执行【键盘快捷方式】命令，可以检视键盘快捷键的说明。

导入导出node-red流程

对于建立好的node-red流程，我们可以导出成JSON格式的档案，同理，也可以导入存在流程的JSON档案。

导出node-red流程

打开我们之前弄的流程，其步骤如下。

使用滑鼠拖拉方框来选取想要的节点，共选取3个节点，可以看到选取节点显示橙色外框，如下图所示。

执行主功能表【导出】命令。

在【导出节点至剪切板】对话方框，按下【下载】按钮下载流程档，预设档名是flows.json。

上述标签可以切换已选择节点或现在的节点和所有流程，选【JSON】标签可以看到流程的JSON资料，如下图所示。

请将下载的flows.json文件更名为ch2-2.json文件。

导入node-red流程

在【导入节点】对话方框按【选择导入文件】按钮导入JSON档案（如果是JSON字串，请直接复制字串后，贴至下方的方框）。

在【打开】对话方框选ch2-2.json，按【打开】按钮开启流程。

在【流程1】标签页可以看到导入的流程，如下图所示。