NodeRED

aricvvang
919 阅读5分钟

什么是 NodeRED ?

IBM 公司开发的一款专为物联网（IoT）应用设计的基于流的低代码编程工具。通过拖拽节点并连接数据流的方式，快速实现设备连接、数据处理和服务集成，无需编写大量代码。

基于 Node.js 构建，充分利用其事件驱动、非阻塞模型。这使得它非常合适运行在网络边缘的低成本硬件上，如树莓派等。

核心特性

可视化编程

  • 可视化界面：浏览器内拖拽编程器，直观设计数据流。
  • 低代码：非专业的开发人员也能快速上手。
  • 实时预览和部署：修改即生效，快速迭代。

强大的集成能力

  • 协议支持：通用的 HTTP(S)、TCP/UDP 以及 OPC UA、MQTT、MODBUS 等工业协议。
  • 云服务集成：AWS IoT、Azure、阿里云等。
  • 数据库支持：MySQL、MongoDB、InfluxDB 等。

轻量与扩展性

  • 资源占用低：低内存、低CPU，适配树莓派等边缘设备。
  • 节点扩展：丰富的节点生态，可按需添加功能

案例展示

气象台系统

准备工作

  1. 安装 Node-RED

    • 使用 npm 命令安装：

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

    • 验证安装：

      node-red --version

      image.png

    • 启动 Node-RED ，浏览器访问 http://localhost:1880打开编程界面：

      image.png

  2. 添加扩展节点

    在该例中，我们需要用到两个非内置节点：

    • node-red-dashboard：一个基于 web 的可视化 UI 构建工具，用于创建交互式仪表板和控制面板。
    • node-red-contrib-weather：一个获取气象信息的插件。

    节点安装步骤：

    打开左上角菜单栏 > 节点管理 > 控制板 > 安装 > 在搜索栏中键入需要的节点名 > 点击安装

    nodered安装节点.gif

  3. 部署须知

    • 创建流程之后需要点击右上角的部署按钮才能运行
    • 每次修改流程之后也需要重新部署才能生效
节点介绍
inject节点

作为流程的起点，有两个作用：

  • 向流程注入消息
  • 设置流程运行的周期

从节点面板拖拽出 inject 节点并单击，可以从右侧帮助窗口中查看关于节点的描述信息：

image.png

默认情况下，需要通过手动触发的方式向流程中注入消息（Unix时间戳）。当然，我们可以双击该节点进行配置，比如设置为周期性触发：

image.png

debug节点

使用该节点可以在右侧调试窗口中输出结果，主要用于开发环境调试。例如，查看 inject 节点的输出消息：

image.png

function节点

对传递过来的消息运行 JavaScript 代码。例如，转换输入消息格式：

image.png

join节点

把多条消息合并为一条消息。例如，将多个输入合并为一个数组输出：

image.png

在收到两条输入消息之后，输出合并结果：

image.png

weather节点

第三方节点，用于从小米获取气象信息。将节点拖拽到工作区，双击设置需要获取气象信息地区的经纬度并将输出端口连接到 debug 节点：

image.png

点击 inject 节点启动流程，通过 调试窗口 就可查看到对应地区的气象数据，如温度、湿度等。

image.png

dashboard节点

一个基于 Node-RED 的可视化插件，提供了一个简单易用的 Web 界面。可访问 http://localhost:1880/ui 查看创建的仪表板。

简单介绍两个重要概念：

  • Tab：类似于浏览器的标签页，用于将界面划分为多个独立的“页面”。
  • Group：在 Tab 内进一步组织 UI 组件，所有的 Group 和 UI 组件都必须属于某个 Tab。

多个 Tab：

image.png

单个 Tab 多个 Group：

image.png

gauge组件

以仪表盘的形式展示数据，特别适合显示有上下限的连续数据，如温度、湿度、百分比等。

创建步骤：

  1. 编辑节点信息：

    image.png

  2. 添加/选择分组：

    image.png

  3. 添加/选择标签页：

    image.png

流程启动后在浏览器中访问 http://localhost:1880/ui 查看创建的仪表板：

image.png

text组件

用于在仪表板上显示静态文本或动态数据。

创建步骤：

  1. 编辑节点信息：

    image.png

  2. 设置分组，同上。

流程启动后在浏览器中访问 http://localhost:1880/ui 查看创建的仪表板：

image.png

template组件

允许你使用 HTML、CSS 和 JavaScript 创建自定义的 UI 元素。

创建步骤:

  1. 编辑节点信息：

    image.png

  2. 设置分组，同上。

流程启动后在浏览器中访问 http://localhost:1880/ui 查看创建的仪表板：

image.png

创建流程

  1. 从节点面板中选择所需节点（inject、weather、debug），并连接输入/输出端：

    image.png

  2. 部署后单击 inject 节点左侧按钮启动流程，获取气象数据（非必须步骤，主要是通过 调试窗口 查看输出是否如预期）：

    image.png

  3. 成功获取气象数据后，选择合适的 dashboard 组件展示气象数据：

    image.png

    注意，需要更改以下组件配置：

    1. 使用 join 节点收集 weather 组件输出的日升/日落时间，并通过 function 节点进行二次处理。其中，function 节点的 JavaScript 代码如下：
    msg.payload = {
startTime: new Date(msg.payload[0]).toLocaleTimeString(),
endTime: new Date(msg.payload[1]).toLocaleTimeString(),
};

return msg;
    1. 将 function 节点的输出作为 template 节点的输入，并在 template 节点中添加如下 html 代码：
    <style>
    .weather-card {
        width: 200px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }
    .part {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>
<div class="weather-card">
    <div class="part">
        <span>🌅日升:</span>
        <span>{{msg.payload.startTime}}</span>
    </div>
    <div class="part">
        <span>🌇日落:</span>
        <span>{{msg.payload.endTime}}</span>
    </div>
</div>

  4. 重新部署后启动流程，访问 http://localhost:1880/ui 查看创建的仪表板：

    image.png

总结

借助 Node-RED，我们可以通过简单地拖拽以及编写少量的 JavaScript 代码，快速地搭建可视化数据流。它极大地减少了我们的开发工作，让我们可以专注于数据的采集处理，非常适合用来搭建物联网中的数据采集监控系统。

当然，这里只是简单介绍了 Node-RED 的使用，更详细的资料可以参考官档。

avatar
文章
阅读
粉丝