Node-RED源码解析之editor-client模块代码分析

最新推荐文章于 2023-07-21 10:54:09 发布
最新推荐文章于 2023-07-21 10:54:09 发布
阅读量3.6k 收藏
点赞数 1
分类专栏： Node-RED系列教程 物联网 文章标签： 前端 javascript 物联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_35631540/article/details/129040000
版权
Node-RED系列教程 同时被 2 个专栏收录
88 篇文章 522 订阅 ¥59.90 ¥99.00
订阅专栏
物联网
179 篇文章 127 订阅
订阅专栏

前言

上篇文章 我们讲解了Node-RED中的editor-api模块。它主要是用于提供给前端接口。
本篇我们一起看一下Node-RED中的editor-client模块。
该模块是前端代码，它决定了我们看到的界面。
如果你要修改Node-RED的界面，那么你需要仔细研究它。
下面让我们一起来看看吧。

editor-client

在packages/node_modeles/editor-client目录中。
主要是四个核心目录

  • locales 界面上国际化的翻译，如果你要修改某个文本，应该在这里找一下。
  • public 该目录存放的由编译生成的文件。一般不会修改。
  • src 流编辑器的核心文件，存放了编辑器所有的业务代码，组件，资源。
  • templates 程序入口，一个mst文件。
    在这里插入图片描述
    editor-client下的第一级目录就是这样子的。

在locales目录下，存放了各个语言版本的翻译。
zh-CN为中文简体
zh-TW 为中文繁体
en-US 英语

先我们着重看一下src目录

src目录

从下往下，目录分别是

  • ace 存放ace代码编辑器的资源
  • images 所有的图片资源
  • js 编辑器代码 至关重要
  • sass 编辑器样式文件
  • tours 预设流，用于展示的demo，或版本特性
了解本专栏 订阅专栏 解锁全文
拿我格子衫来
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
node-red-contrib-require:需要第三方模块的红色节点
05-05
节点红色贡献 节点红色的自定义节点，需要第三方模块。 在nodejs的世界中，有许多功能强大的第三方模块可供我们使用，由于某种原因，我们暂时没有时间将它们封装为节点红色的自定义节点。 现在，您可以轻松地将它们与node-red-contrib-require 如何使用 1.用于第三方模块 首先安装模块。 在您的节点红色用户目录（通常为〜/ .node-red）中，运行： npm install < third> 然后，您可以只使用需要它的模块名称。 2.对于本地模块 您可以使用文件路径来要求该模块，例如./my-module/index.js 。 注意：该模块必须符合CommonJS规范。 执照 该项目中的代码已获得。
node-red-contrib-summarizer:用于汇总数据数组的 Node-RED 节点
05-31
node-red-contrib-summarizer 基于 。 从数据数组生成摘要的 Node-RED 节点 数据数组以以下形式传递： [ {"field1": <data>}, {"field2": <data>}, {"field3": <data>}, ... ] 在节点的配置中，您可以定义一组应用于数据表中字段的规则。 每个规则在单独的输出消息上传递其结果。 可用规则： 和 Sum规则对数组中给定字段中的数值Sum 。 它在msg.payload返回一个数字。 数数 Count规则计算该字段在数组中出现的次数。 它在msg.payload返回一个数字。 吝啬的 Mean规则计算给定字段中数组中数值的均值。 它在msg.payload返回一个数字。 团体 Group规则计算给定字段中的每个值在数组中出现的频率。 它返回一个对象，其中值是键，频率 a
node-red-contrib-opcda-client:Node-RED Opc DA读写节点
05-06
节点红色贡献opcda客户端 可以使用该节点来读取和写入OPC DA服务器。 opcda服务器 opcda读取 opcda写 输入参数 opcda服务器 名称（可选） 要在节点中显示的OPC DA服务器的名称。 地址 OPC DA服务器的地址 域（可选） 帐户域（如有必要）。 用户名（可选） 帐户的用户名（如有必要）。 密码（可选） 帐户密码（如有必要）。 识别号 OPC DA服务器的类ID。 超时（可选） 服务器连接超时。 opcda读取 服务器 要连接的OPC DA服务器。 组名（可选） 节点名称以节点红色显示。 缓存读取（最佳） 检查是否要从缓存中读取标签。 数据更改（可选） 检查标记值更改时是否要输出msg.payload。 OPC DA标签 添加要读取的OPC DA标签。 opcda写 服务器 要连接的OPC DA服务器。 名称（可选） 节点名称以节点红
Jenkins在Linux下安装
lxmuyu的专栏
03-31 192
安装 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key sudo yum install jenkins jenkins/primary_db
带着问题看源码7-NodeRed中的context模块
lxmuyu的专栏
03-22 1916
1. 此模块的意义 NodeRed context 模块是运行期做数据保存及共享的一种机制。当节点间有相同内容时，可以考虑将相同的内容放入 context 以实现共享，既减少了空间，也有利于修改。 2. NodeRed 此模块功能 context 有三类：global、flow、node，其中 global 是随着 context 模块初始化时创建，全局唯一；flow context 以 flowId 为标识，为所有具有相同 flowId 的节点做记录；node context 以 flow:id 为标识。
nodeRed-源码分析10-从node.send到‘input‘回调
lxmuyu的专栏
07-21 500
消息路由是 NodeRed 中的重要一部分，通过 Hook 方式在消息生命周期节点上进行扩展， 增强了系统可扩展性。
nodeRed 源码分析8- runtime nodes模块分析
lxmuyu的专栏
03-05 1011
功能概述 提供运行时与节点相关的接口，如节点注册、流程增删改查、节点模块处理、上下文等。 所依赖的三方库 when path fs clone util 文件域变量 @node-red/registry 为runtime提供节点注册、响应、发现及管理功能 credentials 封装credentials相关操作 context 提供上下文环境，可定义变量、保存等 Node 为所有新建立的节点提供初始化 API Function Description //
Linux下以.rc结尾的文件含义
angou6476的博客
11-13 467
运行命令 资源控制 运行控制 运行时配置 其实我更青睐于运行时配置，也就是运行时的变量等放置变量的。 参考： https://stackoverflow.com/questions/11030552/what-does-rc-mean-in-dot-files 转载于:https://www.cnblogs.com/EasonJim/p/9950682.h...
NodeRed 修改主题（详细教程）
qq_36379705的博客
11-04 2280
默认的NodeRed的编辑器主题是白色和红色,UI中的图片也是白色和红色,个人不喜欢这种风格,所以研究一下怎么给Node-Red换皮,同时初步熟悉一下NodeRed源码
带着问题看源码1-NodeRed如何提供Web服务的
lxmuyu的专栏
03-08 822
NodeRed结构 NodeRed既包含后端也包含前端。后端基于Node.js，同时包含 Express 框架。 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。 NodeRed中的Express工作流 %%配置 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#FFFFFF'}}}%% sequenceDiagram autonumber %
node-red:节点红研究
05-19
节点红 项目组成 必须先安装git。 有关详细数据，请参阅Excel文件。 列表 01-安装并运行 02-mongodb，studio 3T，Roto 3T的安装和使用 03-如何使用节点红色项目 04-安装mongodb罗盘并设置mongodb密码 05-设置节点红色密码 06-创建节点红色用户节点 07-开始节点红色mqtt通讯 08控制MQTT LED 09以各种方式制作LED
node-red-contrib-homebridge-automation：Homebridge和Node-RED集成
02-03
由Node-RED支持的Homebridge Automation 上面的Node-RED Flow，在打开化妆室时打开我的“外部办公室”灯，并在10秒后将它们都关闭。 不切实际，但很好地展示了Node-RED的强大功能。 到上面的导出流。目录介绍这是将...
node-red-contrib-clock-generator:Node-RED的时钟发生器
05-23
Node-RED的可控制时钟生成器，它以设置的周期持续时间运行于各个时钟周期中。 特征： 可通过传入消息控制 周期持续时间可调 外发消息的格式可配置 二次输出带反相信号 初始输出消息（可选） 安装 打开Node-RED，...
node-red-contrib-home-assistant-websocket:Node-RED与Home Assistant Core的集成
04-28
安装并运行Node-RED，如果您需要安装Node-RED，请参见。 v10.0或更高版本 v1.0或更高版本 安装 通过Node-RED Manage Palette安装 node-red-contrib-home-assistant-websocket 通过npm安装 $ cd ~ /.node-red $ npm...
树莓派-搭建Node-RED服务
专注嵌入式系统开发
12-05 9331
基于树莓派搭建Node-Red服务。
Node-RED教程（一）：Node-RED的介绍与安装
热门推荐
知无涯
01-31 3万+
最新最全的Node-RED，node-red教程都在这里。 本篇介绍node-red的安装。使用docker 安装node-red
c++指针的使用总结——开始菜鸟之路！
stone
08-23 323
<br />  在C++中，任何变量声明后都应该初始化，包括指针变量。如果不初始化，将产生不可预见的后果。以下程序就会。<br />#include <iostream><br />using namespace std;<br />int main()<br />{<br />   void sort(char * name[], int n);<br />   void print(char * name[], int n);<br />   char * name[] = {"BASIC","FORT
带着问题看源码5-NodeRed系统数据存储
lxmuyu的专栏
03-15 2275
文章目录1. NodeRed 系统数据有哪些2. NodeRed 中系统数据存储机制2.1. 源码分析2.2. API3. NodeRed 中系统数据存储机制有哪些参与者4. NodeRed 为什么这么设计，这种设计的优劣有哪些6. 相关知识7. 应用场景分析 NodeRed 系统相关的配置文件会以 JONS 格式存储在本地，同时也提供了插件机制实现系统数据的自定义存储，本文从 Storage 模块出发，从源码分析下如何以插件形式实现自定义存储，也对这种方式的可能的用途进行分析。 1. NodeRed
Node-Red 学习笔记1 - 在源码中新增内置节点
yueping0718的专栏
05-06 3125
在Node-red 二次开发中，若需要新增内置节点，可以采用以下2步实现。 （本文不涉及如何创建节点文件，请参考官网说明） 第1步： 在node_modules/@node-red/nodes目录下创建一个文件夹（也可以不创建，直接丢到其下已有的文件夹中）。文件夹名字自己取，我这取的名字叫custom,但要特别注意，文件名不能是lib | icons |node_modules | test | locales中的其中任意一个。（详细见localfilesystem.js里的getLocalNod..
node-red源码解析之editor-api模块代码分析
最新发布
09-22
在对Node-RED源代码中的editor-api模块进行分析前，我们需要了解Node-RED是一个基于Node.js的流程编程工具，通过编写流程来实现不同设备之间的连接和通讯。editor-api模块是Node-RED的一个子模块，负责提供与流程编辑器相关的API接口。 首先，editor-api模块的代码位于Node-RED的`red/runtime/editor-api.js`文件中。该模块主要提供了一些用于流程编辑器的API接口，包括获取和更新流程信息、节点信息、连接信息等等。 在代码中，首先定义了一个`EditorAPI`类，该类通过`RED`对象的`comms`模块来工作。`comms`模块用于处理流程编辑器的通信和发送消息。 接着，在`EditorAPI`类中定义了一系列的方法，用来对流程、节点和连接等信息进行操作。其中一些重要的方法包括： - `getFlows`：用于获取当前所有流程的信息。 - `getFlow`：根据流程ID获取特定流程的信息。 - `getFlowTab`：根据流程ID获取对应的流程tab，用于在编辑器中显示和操作流程。 - `updateFlow`：用于更新特定流程的信息。 - `getNode`：根据节点ID获取节点的信息。 - `addNode`：用于在流程中添加新的节点。 - `getConnections`：获取当前所有节点的连接信息。 通过这些方法，开发者可以方便地对流程进行增加、删除、修改等操作，并在编辑器中进行实时的反馈。 此外，还有一些与编辑器的交互相关的方法，比如`selectTab`方法用于切换当前编辑的流程tab，`resize`方法用于调整编辑器的大小等。 总的来说，editor-api模块的代码分析主要围绕着提供与流程编辑器相关的API接口展开，给开发者提供了一种方便灵活的方式来操作和管理流程及其相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

拿我格子衫来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值