node-red 学习

1,135 阅读6分钟

介绍

基于浏览器的流程编辑

Node-RED 是一种编程工具,用于以新颖有趣的方式将硬件设备、API 和在线服务连接在一起。它提供了一个基于浏览器的流编辑器,可以使用调色板中的各种节点轻松地将流连接在一起。然后,只需单击一下部署即可将流部署到运行时。可以使用富文本编辑器在编辑器中创建 JavaScript 函数。

基于 Node.js 构建

轻量级运行时基于 Node.js,充分利用其事件驱动的非阻塞模型。这使得它非常适合在 Raspberry Pi(树莓派) 等低成本硬件以及云服务器-中运行。

Node-red 的包存储库中有超过 225,000 个模块,可以轻松扩展调色板节点的范围以添加新功能。

安装

要安装 Node-RED,可以使用npmnode.js 附带的命令:

sudo npm install -g --unsafe-perm node-red

如果使用的是 Windows,请不要以sudo

该命令会将 Node-RED 及其依赖项安装为全局模块。

如果命令输出的结尾类似于以下内容,可以确认它已成功:

+ node-red@1.1.0
added 332 packages from 341 contributors in 18.494s
found 0 vulnerabilities

运行

安装为全局模块后,可以使用该node-red命令在终端中启动 Node-RED。可以用Ctrl-C或关闭终端窗口来停止 Node-RED。

$ node-red

Welcome to Node-RED
===================

30 Jun 23:43:39 - [info] Node-RED version: v1.3.5
30 Jun 23:43:39 - [info] Node.js  version: v14.7.2
30 Jun 23:43:39 - [info] Darwin 19.6.0 x64 LE
30 Jun 23:43:39 - [info] Loading palette nodes
30 Jun 23:43:44 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
30 Jun 23:43:44 - [info] Settings file  : /Users/nol/.node-red/settings.js
30 Jun 23:43:44 - [info] HTTP Static    : /Users/nol/node-red/web
30 Jun 23:43:44 - [info] Context store  : 'default' [module=localfilesystem]
30 Jun 23:43:44 - [info] User directory : /Users/nol/.node-red
30 Jun 23:43:44 - [warn] Projects disabled : set editorTheme.projects.enabled=true to enable
30 Jun 23:43:44 - [info] Creating new flows file : flows_noltop.json
30 Jun 23:43:44 - [info] Starting flows
30 Jun 23:43:44 - [info] Started flows
30 Jun 23:43:44 - [info] Server now running at http://127.0.0.1:1880/red/

然后,可以通过浏览器访问http://localhost:1880来访问 Node-RED 编辑器。

节点介绍

inject

最常用到的子模块之一,作为输入用途,可以自行选择 payload 类型。

创立 inject 节点时点击模块可以进入设定,选单中主要分为5个要素:

  1. 模块名称。

    • 为 inject 设定名称
  2. 输入属性。

    • 预设为payload
    • 可以自行添加属性
  3. 输入属性类型。

    • 指定属性类型,包含常见的字串、数字、布尔值、json 等
    • 还可以使用在本流程的全局属性 flow 或者整个 node-red 所有流程的全局属性 global
  4. 选择输入机制。

    • 手动输入模式
    • 循环输入模式
    • 指定时间输入模式

image.png

debug

输出模块,用来将输入结果显示在指定视窗上(通常是除错视窗),点击可以进入设定选单。

debug模块设定主要包含:

  1. 输出属性

    • 预设 payload
    • 亦可指定已存在的属性
  2. 选择输出窗口

    • 选择输出视窗
  3. 模块名称

    • debug 模块名称

image.png

catch

捕获由同一标签页上的节点引发的错误。

catch 模块设定:

  1. 名称

    • catch 模块名称
  2. 捕获范围

    • 所有节点
    • 指定节点(可多选)

image.png

function

使用 javascript 编写的函式模块,可以提供使用者自定义的功能,我们可以对传入的对象属性进行处理,然后返回 msg,后续的模块就可以得到加工后的结果。

例如我编写一个用来判断 result 值是否为真的模块,如果成立便新增一个新的属性 name,并给予它一个值。

if(msg.result == true){
    msg.payload.flag = "真的"
}
return msg;

一样点击 function 模块进入设定,在函数栏位编写自定义的程式码就可以了。

image.png

change

改变对象属性类型,可以进行增、删、修改、转移等操作。

点击模块后可以进入设定选单,change模块的重点在操作指令

change模块设定:

  1. 模块名称

    • change 模块名称
  2. 操作指令

    • 设定

      • 将 key 设定为指定 value
      • 也可以用来新增一个key,并给 value
    • 修改

      • 搜寻特定值然后取代
    • 删除

      • 删除物件中指定属性
    • 转移

      • 将对象中的属性值转移到另一个属性上(原来的属性删除)
  3. 对象属性

    • 用来指定属性,预设是 payload

image.png

switch

它类似于 switch 语句,可以用来当作流程控制。

switch(msg.payload){
        case 1:
        /*do something*/
        break;
        
        case 2:
        /*do something*/
        break;
        
        ...
}

switch模块设定:

  1. 名称

    • switch 模块名称
  2. 属性

    • switch(var)
    • 属性栏位相当于设定var
  3. 判断类型

    • 相当于条件判断子
  4. 判断值指定值

    • 依照不同判断子填入的参数
    • case x:
    • 相当于x的功用

image.png

http in

创建用于创建Web服务的HTTP端点。

http in 模块设定:

  1. 请求方式

    • 创建接口的请求方式
  2. URL

    • 接口的请求地址
  3. 名称

    • 节点名称

image.png

http response

将响应发送回从HTTP输入节点接收的请求。

http response 模块设定:

  1. 名称

    • 节点名称
  2. 状态码

    • 响应状态代码。默认值:200。

image.png

实践

创建一个简单的接口

推拽一个inject 节点作为启动节点(这个节点是测试方便,后期可删除)。 拖拽一个 http in 节点, 双击 http in 节点, 打开编辑框,选择请求方式为 GET, 接口地址填写 /test, 名称选填。 image.png

载拖拽一个 change 节点,连接线到 http in 和 inject 节点, 双击打开编辑设定一个变量 url ,为 flow 设定一个url 属性,值为接口传递的url。

image.png

拖拽一个 function 节点,连接到 change 节点, 然后双击打开编辑区使用 js 语法来进行一个判断,我这里判断了一下接口请求时是否携带了参数 url。

image.png

拖拽一个 switch 节点,连接到 function 节点,然后双击打开编辑区添加两条规则,使用刚才设定的 flag 属性值来判断是否携带 url。

image.png

设置好规则后 switch 节点右侧会出现同规则数量的2个连接节点,对应每条规则的路线。

image.png

拖拽两个 function节点,分别连接到两条路线,在 flag 为真的路线上设置返回数据。

image.png

在 flag 为假的路线上设置错误提示信息。

image.png

拖拽一个http response 节点,将上面两个 function 都连接到节点上。

到这里,一个简单的 get, 将携带的 url 返回接口就写好了。

image.png

image.png

总结

由于用到的节点不是很多,所以本文只写了我用到的一些节点。下面的 JSON 文件 是本文中用到的例子。

pan.baidu.com/s/1Q0sbWyE_…