Node-RED 노드 만들기 2. 커스텀 노드 만들기

이번 포스트에선 노드를 만들기 위한 js, html 파일 작성에 관련된 내용을 다룬다.

 

Documentation : Node-RED

 

html 파일

html파일에는 노드의 UI, 노드의 인터페이스, 노드의 동작 이 기술된다.

 

html 파일의 기본 포멧은 다음과 같다.

<script type="text/html" data-template-name="test-node">
    <div class="form-row">
        <label for="node-input-name">name</label>
        <input type="text" id="node-input-name">
    </div>

    <div class="form-row">
        <label for="node-input-prop">prop</label>
        <input type="text" id="node-input-prop">
    </div>
</script>
<style>

</style>

<script type="text/javascript">
    RED.nodes.registerType('test-node',{
        color:"pink",
        category: "test",
        inputs:1,
        outputs:1,
        defaults: {
            name: {value: ""},
            prop: {value: ""}
        },
        oneditprepare: function() {

        },
    });
</script>

 

마크업 

맨 위에있는 <script type=text/html> 태그에는 노드의 editor UI를 html 파일로 작성하게 된다.

<script> 태그의 data-template-name 속성으로 노드의 이름을 넣어줘야 한다 ("test-node")

 

위 예시 노드의 editor UI

태그의 id로 node-input-{변수이름} 을 설정할 경우 이 노드에서 사용할 변수와 값이 연결(?) 되게 된다.

 

 

스크립트

<script type= text/javascript> 태그에는 노드의 동작과 등록을 책임진다.

 

 

노드의 등록은 RED.nodes.registerType(노드 이름, 노드 객체)로 가능하다.

 

노드 객체로 정의할 수 있는 내용은 아래 링크에 자세히 나와있다.

HTML File : Node-RED

 

여기서는 특히 중요한 몇몇 필드에 대해 다룬다.

 

1. defaults 필드

이 필드는 노드에서 사용될 변수를 선언한다.

위 예제에서는 name, prop 필드를 사용하며, 이 변수들은 마크업 태그의 id와 (node-input-name, node-input-prop) 연결된다.

즉 돔에서 해당 id를 가진 필드가 바뀌게 되면, 해당 변수들의 값또한 바뀌게 된다.

 

2. oneditprepare()

노드가 생성되기 전 실행되는 함수로써, 이 부분에 작성한 코드들은 노드의 edit 창이 실행되기 전 실행된다.

 

 

js 파일

 

js파일의 기본 포멧은 다음과 같다.

 

module.exports = function(RED) {
    "use strict";
    
    function NewNode(config) {
        RED.nodes.createNode(this,config);
        
        this.on('input', (msg, send, done) => {
            msg.config = config
            this.send(msg)
            if (done){
                done();
            }
        })    
    }

    RED.nodes.registerType("new-node",NewNode);
}

 

NewNode

js의 함수는 일급 객체로써 사용된다.

여기서 NewNode(config) 함수는 이 노드의 인스턴스라 생각해도 된다.

 

config 

노드를 생성할때 사용한 config 파라미터에는, 노드와 관련된 정보들이 넘어오게 된다.

html 파일의 defaults 필드로 선언한 값들과, 노드의 정보(id, 이름, 좌표)등이 넘어오게 된다.

 

this.on("input", (msg, send, done) => {})

노드로 input(다른 노드로부터의 input 또는 자기 자신의 inject)이 들어오게 되면 이 핸들러가 동작하게 된다.

핸들러로 설정한 함수는 세개의 파라미터를 가지며 각각 다음과 같은 의미를 가진다.

msg : flow를 통해 넘어온 메시지

send : 이 노드의 다음 노드로 메시지를 보내기 위한 함수

done : 작업이 종료될때 호출할 함수 (만약 에러가 있다면 에러처리등을 수행할 수 있음) 

 

이렇게 만들어진 노드는 RED.nodes.registerType()을 통해 Node-RED에 등록된다.