node-red,一个可视化的数据流程编辑软件
ztj100 2025-04-02 00:34 17 浏览 0 评论
我们通常会遇到很多这种情形的数据处理。 举个几个典型的例子:
- 在工业物联网应用中,通常的数据流是:从设备端进行数据采集,利用进行格式转换,或者进行计算,或者存储,通过另外一种协议,传出去。到物联网平台,或者对接到一个第三方的系统当中。
- 儿童编程教学领域,例如Scratch,Blockly这类软件。都是通过一个可视化界面,来设计程序的执行步骤。
其实这一类都是典型的流式数据处理。它们的特点,以数据为中心,将各个处理模块可以想象成一个处理节点,一个个串接起来。
那问题来了,针对一个一个节点编程,每个应用程序都重新来一遍,那也太累了。有没有更简单的办法呢? 那Node-RED就是这样类型的软件。它把各个node做了抽象和封装,可以重复使用,另外提供了可视化拖拽的界面,可以大幅简化编程。
1 Node-RED是什么?
Node-Red 是 IBM Emerging Technologies 团队开发的一个可视化的数据流程编辑工具。它允许开发人员通过浏览器进行数据流程的编辑,也可以进行数据处理流程编写。 通过多种节点的组合,进行硬件设备(Raspberry Pi,Arduino等),网络服务接口(Websocket, http),及在线服务(163邮箱)数据流串接,实现数据流编程。、通过简单的拖拽,配置,图形化的方式完成应用程序的开发。基于Apache2.0 License,完全开源。
2 应用场景
最典型的应用,就是在物联网边缘计算领域。你可以把它部署在一个边缘网关网关中,通过配置,做数据自动转发,存储,报警的等一系列动作。
3 安装方法
可以从npm源用安装安装,也可以从源码进行编译安装。只要支持node环境与npm就可以运行Node-Red。(关于Node环境的安装配置,如果不会,请自行搜一下)
- 直接用npm安装(以下为Linux为例):
sudo npm install -g --unsafe-perm node-red
node-red
打开浏览器:输入 http://localhost:1880
- 通过源码安装(也是以Linux为例)
git clone https://github.com/node-red/node-red.git
cd node-red.git
npm install
npm run build
npm start
打开浏览器:输入 http://localhost:1880
通过上面的步骤,就可以启动Node-RED,并且看到界面了。
- 左侧:Nodes节点列表。默认内置了输入,输出,功能,社交,存储,高级,Raspberry PI类型。
- 中间:Flow: 中间部分是用户设计的Flow。用户可以在这个拖拽节点,连线等设计。
- 右侧:Message/Help信息输出。调试模式状态查看窗口。
4 配置
安装完成并启动以后,都是默认的配置选项。 那如果想改变端口,或者安全设置等等。也是支持的。我们只需要改变配置文件即可。安装完成后,配置文件位于:
- Linux中:默认配置文件位于$home/.node-red目录下。
- Windows中:C:\Users\你的用户名\.node-red
Settings.js是最重要的配置了。看这个就够了。我总结了下面的表格:
至于权限,日志等等高级设置。先不展开。目前到这里就够用了。
5 使用
在正式使用前,有三个重要的概念需要理解:
- 节点:它是整个数据流的基础。每个节点包括了外观,属性与数据的处理逻辑。我们在界面最左侧,看到的就是各种类型的节点。
- Flow就是一个具体的Node-Red应用。由多个node构成,多个node进行数据采集处理,输出的整个逻辑,每个node之间,传送message,组成了整个应用。
- 消息:它是各个节点之间数据通信的载体。
这样的话,我们就拖动左侧的节点到flow面板中,进行串接。今天的例子,就是触发启动,打印一个函数转换得到node,进入下一个node,打印出来一个hello。 那今天的任务就算完成了。
接下来我们将深入分析node的实现机制,和更多高级用法。
相关推荐
- Vue 技术栈(全家桶)(vue technology)
-
Vue技术栈(全家桶)尚硅谷前端研究院第1章:Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
-
前言《vue基础》系列是再次回炉vue记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)在开发时,是不是遇到过这样的场景,响应...
- vue3 组件初始化流程(vue组件初始化顺序)
-
学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)...
- vue3优雅的设置element-plus的table自动滚动到底部
-
场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去...
- Vue3为什么推荐使用ref而不是reactive
-
为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...
- 9、echarts 在 vue 中怎么引用?(必会)
-
首先我们初始化一个vue项目,执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts,npminstallecharts-S//或...
- 无所不能,将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
-
此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
-
前言本文整理了...
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
-
今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...
- 不来看看这些 VUE 的生命周期钩子函数?| 原力计划
-
作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块...
- Vue3.5正式上线,父传子props用法更丝滑简洁
-
前言Vue3.5在2024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性...
- Vue 3 生命周期完整指南(vue生命周期及使用)
-
Vue2和Vue3中的生命周期钩子的工作方式非常相似,我们仍然可以访问相同的钩子,也希望将它们能用于相同的场景。...
- 救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘
-
前端打工人集合!是不是经常遇到这些崩溃瞬间:Vue3项目越写越卡,组件通信像走迷宫,复杂逻辑写得脑壳疼?别慌!作为在一线摸爬滚打多年的老前端,今天直接甩出10个超实用的Vue3实战技巧,手把...
- 怎么在 vue 中使用 form 清除校验状态?
-
在Vue中使用表单验证时,经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Vue 技术栈(全家桶)(vue technology)
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
- vue3 组件初始化流程(vue组件初始化顺序)
- vue3优雅的设置element-plus的table自动滚动到底部
- Vue3为什么推荐使用ref而不是reactive
- 9、echarts 在 vue 中怎么引用?(必会)
- 无所不能,将 Vue 渲染到嵌入式液晶屏
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)