详解Node-RED中的三个文件（js，html，json）

详解Node-RED中的三个文件（js，html，json）

Node-RED是一种基于流的编程工具，其基于流的程序设计是由J. Paul Morrison在20世纪70年代发明的，它将应用程序的行为描述为网络黑匣子(Node-RED中称为“节点”)。其中每个节点都有一个定义明确的目的；它被赋予一些数据，完成对数据的处理之后传递数据。网络负责节点之间的数据流。

它是一种非常适合于可视化表示的模型，并使其更容易为更广泛的用户所访问。如果有人可以将一个问题分解成离散的步骤，他们可以查看一个流并了解它正在做什么，而不必理解每个节点中的代码行。

Node-RED是由基于Node.js的运行环境组成，您可以将Web浏览器指向该运行时来访问流编辑器。在浏览器中，您可以通过将节点从调色板拖到工作区中并将它们连接在一起，以开始创建应用程序。只需单击一次，即可将应用程序部署回运行它的运行环境。

可以通过安装社区创建的新节点轻松地扩展节点的调色板，您创建的流可以轻松地作为JSON文件共享。

Node-RED中的三个文件

在Node-RED中当流被部署时，节点被创建，它们可能在流运行时发送和接收一些消息，并且在部署下一个流时被删除。

其中的节点由两个文件组成：JavaScript文件和html文件

• JavaScript文件定义了节点的功能
• html文件定义了节点的属性和外观（编辑对话框和帮助文本）

通常来讲，在节点的目录下还需一个package.json文件用于将所有文件打包成NPM模块，用以在Node-RED中安装、运行。

1.JavaScript文件

JavaScript文件定义节点运行时的行为。

• 节点构造函数
• 接收讯息
• 发送消息
  • 多输出
  • 多条消息
• 关闭节点
  • 超时行为
• 测井事件
  • 处理错误
• 设置状态
• 自定义节点设置

1.1 节点构造函数

节点由可用于创建节点新实例的构造函数定义。该函数注册在运行环境中，以便在流中部署相应类型的节点时调用该函数。

函数被传递给一个对象，该对象包含在流编辑器中设置的属性。

它必须做的第一件事是调用RED.nodes.createNode函数初始化所有节点共享的功能。之后，特定于节点的代码就会存活。

function SampleNode(config) {
    RED.nodes.createNode(this,config);
    // 此处添加特定于节点的代码
}
RED.nodes.registerType("sample",SampleNode);

1.2 接收讯息

节点在input事件从流中的上游节点接收消息。

this.on('input', function(msg, send, done) {
    // 处理'msg'
    // 一经完成，调用'done'.
    // 此调用被包装在一个存在于'done'的检查中
    This call is wrapped in a check that 'done' exists
    if (done) {
        done();
    }
});

1.3 发送消息

如果节点位于流的开头，并响应外部事件生成消息，则应使用send函数在Node对象上：

var msg = { payload:"hi" }
this.send(msg);

如果节点希望从内部发送input事件侦听器，为了响应收到消息，它应该使用send传递给侦听器函数的函数：

let node = this;
this.on('input', function(msg, send, done) {
    // 为了实现最大的向后兼容性，请检查发送是否存在。
    send = send || function() { node.send.apply(node,arguments) }
    msg.payload = "hi";
    send(msg);
    if (done) {
        done();
    }
});

如果msg为NULL，不发送任何消息。

如果节点发送消息是为了响应接收到的消息，那么它应该重用接收到的消息，而不是创建一个新的消息对象。这将确保为流的其余部分保留消息上的现有属性。

多输出

如果节点有多个输出，则可以将消息数组传递给send，并将每个输出发送到相应的输出。

this.send([ msg1 , msg2 ]);

多条消息

通过在此数组中传递消息数组，可以向特定输出发送多个消息：

this.send([ [msgA1 , msgA2 , msgA3] , msg2 ]);

关闭节点

每当部署新流时，都会删除现有节点。如果它们中的任何一个在发生这种情况时需要清理状态，例如断开与远程系统的连接，则应该在close事件。

this.on('close', function() {
    // 清理任何工作
});

如果节点需要执行任何异步工作来完成清理工作，则注册的侦听器应该接受一个参数，该参数是所有工作完成时要调用的函数。

this.on('close', function(done) {
    doSomethingWithACallback(function() {
        done();
    });
});

1.4 测井事件

如果节点需要将某些内容记录到控制台，它可以使用以下函数之一：

this.log("Something happened");
this.warn("Something happened you should know about");
this.error("Oh no, something bad happened");

// Since Node-RED 0.17
this.trace("Log some internal detail not needed for normal operation");
this.debug("Log something more details for debugging the node's behaviour");

这个warn和error消息也被发送到Flow编辑器调试选项卡。

1.5 设置状态

在运行时，节点能够与编辑器UI共享状态信息。这是通过status职能`:

this.status({fill:"red",shape:"ring",text:"disconnected"});

1.6 自定义节点设置

节点可能希望在用户的配置选项中公开settings.js档案。

任何设置的名称必须遵循以下要求：

• 名称必须以相应的节点类型作为前缀。
• 设置必须使用骆驼-案例-见下面的更多信息。
• 节点不能要求用户设置它–它应该有一个合理的默认设置。

例如，如果节点类型sample-node想公开一个名为colour，设置名称应为sampleNodeColour.

在运行时中，节点可以将设置引用为RED.setting.sampleNodeColour.

1.7 向编辑器公开设置

在某些情况下，节点可能希望将设置的值公开给编辑器。如果是这样的话，节点必须将该设置注册为其调用的一部分。registerType:

RED.nodes.registerType("sample",SampleNode, {
    settings: {
        sampleNodeColour: {
            value: "red",
            exportable: true
        }
    }
});

• value字段指定设置应采用的默认值。
• exportable告诉运行库使编辑器可以使用该设置。
  与运行时一样，节点可以将设置引用为RED.settings.sampleNodeColour在编辑里面。

如果节点试图注册不符合命名要求的设置，则会记录错误。

2.html文件

节点.html文件定义节点在编辑器中的显示方式。它包含三个不同的部分，每个部分都包裹在自己的内部。<script>标签：

在编辑器中注册的主节点定义。这定义了诸如调色板类别、可编辑属性(defaults)和使用什么图标。它位于常规javascript脚本标记中。

定义节点编辑对话框内容的编辑模板。它是在一个类型的脚本中定义的。text/html带着data-template-name设置为节点类型。

在Info侧栏选项卡中显示的帮助文本。它是在一个类型的脚本中定义的。text/html带着data-help-name设置为节点类型。

2.1定义节点

节点必须使用RED.nodes.registerType功能。

该函数包含两个参数：节点的类型及其定义：

<script type="text/javascript">
    RED.nodes.registerType('node-type',{
        // 节点定义
    });
</script>

2.2 节点类型

整个编辑器都使用节点类型来标识节点。它必须与调用RED.nodes.registerType在相应的.js档案。

该类型还用作调色板中节点的标签。如果类型以“in”或“out”结尾，则去掉标签。例如，“MQTT in”和“MQTT Out”节点都被标记为“MQTT”，输入和输出端口的显示提供“in”或“out”上下文。

2.3 节点定义

节点定义包含编辑器所需的有关节点的所有信息。它是一个具有以下属性的对象：

• category:(字符串)节点出现的调色板类别
• defaults:(对象)可编辑属性为节点。
• credentials:(对象)凭证性质为节点。
• inputs:(数字)节点有多少输入0或1.
• outputs:(数字)节点有多少输出。可以0或者更多。
• color:(字符串)背景颜色利用。
• paletteLabel：(字符串|函数)标签在调色板上使用。
• label：(字符串|函数)标签若要在工作区中使用，请执行以下操作。
• labelStyle：(字符串|函数)风格适用于标签。
• inputLabels:(String|函数)可选标签若要将悬停添加到节点的输入端口，请执行以下操作。
• outputLabels(String|函数)可选标签若要将悬停添加到节点的输出端口，请执行以下操作。
• icon:(字符串)图标利用。
• align:(字符串)对齐图标和标签。
• button:(对象)添加扣子到节点的边缘。
• oneditprepare：(函数)在构建编辑对话框时调用。看见自定义编辑行为.
• oneditsave：(函数)在编辑对话框被选中时调用。看见自定义编辑行为.
• oneditcancel：(函数)在取消编辑对话框时调用。看见自定义编辑行为.
• oneditdelete：(函数)当按下配置节点编辑对话框中的DELETE按钮时调用。看见自定义编辑行为.
• oneditresize：(函数)在调整编辑对话框的大小时调用。看见自定义编辑行为.
• onpaletteadd：(函数)当节点类型添加到调色板时调用。
• onpaletteremove：(函数)当节点类型从调色板中移除时调用。

2.4 编辑对话框

节点的编辑模板描述其编辑对话框的内容。

<script type="text/html" data-template-name="node-type">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-tips"><b>Tip:</b> This is here to help.</div>
</script>

2.5 帮助文本

当节点被选中时，它的帮助文本将显示在info选项卡中。这应该为节点的工作提供一个有意义的描述。它应该确定它在传出消息上设置了哪些属性，以及可以在传入消息上设置哪些属性。

第一章的内容<p>当在调色板中的节点上悬停时，标记被用作工具提示。

<script type="text/html" data-help-name="node-type">
   <p>Some useful help text to introduce the node.</p>
   <h3>Outputs</h3>
       <dl class="message-properties">
       <dt>payload
           <span class="property-type">string | buffer</span>
       </dt>
   <h3>Details</h3>
   <p>Some more information about the node.</p>
</script>

3.Package.json文件

节点可以打包为模块并发布到NPM存储库。这使得它们与它们可能具有的任何依赖项一起安装起来非常容易。

除了通常的条目外，Package.json文件还必须包含一个node-red条目，该条目列出了包含要加载的运行时节点的.js文件。

如果单个文件中有多个节点，则只需列出一次文件。

如果任何节点具有对其他NPM模块的依赖关系，则它们必须包含在dependencies属性中。

为了帮助在NPM存储库中发现节点，文件应该在其keywords属性中包含node-red。这将确保在按关键字搜索时显示包。

{
    "name"         : "node-red-contrib-samplenode",
    "version"      : "0.0.1",
    "description"  : "A sample node for node-red",
    "dependencies": {
    },
    "keywords": [ "node-red" ],
    "node-red"     : {
        "nodes": {
            "sample": "sample/sample.js"
        }
    }
}