【亲测免费】 Node-RED Dashboard 使用教程

1. 项目介绍

Node-RED Dashboard 是一个为 Node-RED 设计的实时数据仪表盘 UI 模块。它提供了一组节点，可以快速创建一个实时数据展示的仪表盘。该模块基于 Angular v1 开发，支持 Node.js 12 及以上版本。尽管 Angular v1 已经不再维护，但该项目仍提供“生命支持”，即小修小补，但不进行重大功能升级。

2. 项目快速启动

安装

1. 打开 Node-RED，进入“管理面板”。
2. 在“管理面板”中搜索 node-red-dashboard。
3. 点击安装。

或者，你也可以在 Node-RED 的用户目录下运行以下命令进行安装：

npm i node-red-dashboard

启动

安装完成后，重启 Node-RED 实例。你将在左侧的节点面板中看到新的 UI 节点，同时在右侧的侧边栏中看到一个新的“仪表盘”选项卡。

配置

默认情况下，仪表盘的 URL 是基于 Node-RED 的 httpRoot 路径，并在其后添加 /ui。例如，如果 Node-RED 运行在 http://localhost:1880，那么仪表盘的 URL 将是 http://localhost:1880/ui。

你可以在 Node-RED 的 settings.js 文件中进行配置，例如：

ui: {
    path: "ui",
    middleware: function (req, res, next) {
        console.log('LOGGED');
        next();
    }
}

3. 应用案例和最佳实践

应用案例

Node-RED Dashboard 可以用于各种实时数据展示场景，例如：

• 智能家居控制面板：展示和控制家庭中的各种设备状态，如灯光、温度、湿度等。
• 工业监控系统：实时监控生产线上的各种参数，如温度、压力、速度等。
• 物联网设备管理：展示和管理连接到网络的各种物联网设备的状态和数据。

最佳实践

• 使用多个组：为了更好地适应不同屏幕尺寸，建议使用多个组而不是一个大组，以便页面能够动态调整布局。
• 自定义主题：通过设置自定义主题，可以使仪表盘更符合你的品牌或个人风格。
• 使用中间件：通过配置中间件，可以对 HTTP 请求和 WebSocket 连接进行自定义处理，增加安全性和功能性。

4. 典型生态项目

Node-RED Dashboard 作为 Node-RED 生态系统的一部分，可以与其他 Node-RED 节点和模块结合使用，例如：

• node-red-contrib-ui：提供额外的 UI 组件和功能，增强仪表盘的展示能力。
• node-red-contrib-chartjs：集成 Chart.js，提供更丰富的图表展示功能。
• node-red-contrib-web-worldmap：用于在地图上展示位置数据，适用于物联网设备的地理位置监控。

通过这些生态项目的结合，可以构建出功能更加强大和多样化的实时数据展示系统。