Node-RED 노드 만들기 1. 간단한 노드 만들기

이 포스팅에서는 docker 기반 nodered에서 간단한 노드를 직접 만들어 사용하는것을 목표로 한다.

 

Creating Nodes : Node-RED

 

커스텀 노드를 만드는데 사용되는 파일은 크게 3가지다.
js파일, html파일, package파일

노드를 만드는 순서는 크게 다음과 같다.

 

1. 노드를 만들 디렉토리 설정

2. 노드의 js, html파일을 생성

3. nodered에 노드 등록

 

 

디렉토리 생성

노드를 저장할 디렉토리를 생성한다.

 

1. docker 기준 컨테이너 내의 /data디렉토리로 이동한다.
2. 노드들을 저장할 디렉토리를 하나 만들어 준다. 
3. 이후 해당 디렉토리에서 npm init을 진행한다.

npm init 결과

4. npm init이 끝나게 되면 package.json이라는 파일이 나오게 된다.

 

노드 파일 생성

js 파일

js 파일은 다음과 같은 형태로 만들어진다.

module.exports = function(RED) {
    function NewNode(config) {
        RED.nodes.createNode(this,config);
        var node = this; 
        node.on('input', function(msg) {
            msg.new_field = "new_field"
            msg.properties = config
            node.send(msg);
        });
    }
    RED.nodes.registerType("new-node",NewNode);
}

주의깊게 봐야할 부분은 node.on 부분과, RED.nodes.registerType("new-node",NewNode); 부분이다.

node.on('input')은 노드로 입력이 들어올때 취할 행동을 정의하게 된다.
해당 예제에서는 input이 들어오게 되면 해당 msg에 새로운 필드 두개(new_field, properties)를 추가하여 node.send()를 통해 output으로 보내주게 된다.

아래 노드를 등록할때 사용된 RED.nodes.registerType("new-node",NewNode) 의 경우 나중에 html 파일에서도 사용되니 잘 알아두어야 한다.

html 파일

html파일은 다음과 같은 형태로 만들어진다.

<script type="text/javascript">
    RED.nodes.registerType('new-node',{
        category: 'New Category',
        color: '#ff00ff',
        defaults: {
            foo: {value: ""}
        },
        inputs:1,
        outputs:1,
        label: function() {
            return "new-node";
        }
    });
</script>

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

<script type="text/html" data-help-name="new-node">
    <p>A help message</p>
</script>

html 파일은 <script> 태그로 이루어진다.
노드의 상태 및 동작 방식을 구현하는 script 부분과,
노드의 외형을 기술하는 마크업 부분으로 이루어지게 된다.

스크립트에서는 노드의 등록을 책임지게 된다.
여기서는 js 파일에 사용된 등록 타입을 똑같이 사용해주어야 하며 카테고리 및 해당 노드에서 사용될 변수들을 선언할 수 있다.
defaults필드를 보게되면 foo라는 변수가 있게된다. 이 변수는 edit창에서 수정할 수 있는 변수로써, 마크업 파트에서 이 변수를 쓰기위해 몇가지 작업을 해주게 된다.

마크업 파트에서는 노드의 외형적인 정의를 해준다.

<script>태그의 data-template-name이라는 속성에는 꼭 노드의 이름이 들어가야 한다!

노드에서 사용될 foo라는 변수를 사용하기 위해선 <input> 태그의 id를 "node-input-foo"라고 선언해 주어야 사용이 가능해진다.  다른 변수의 경우에도 또다른 input태그의 id를 "node-input-{변수명}" 으로 선언해 사용이 가능하다.

추가적으로 html파일에서 선언된 변수는 js파일의 노드 함수 function NewNode(config)의 config 파라미터로 전달되게 되어 사용이 가능해진다. 

js파일에서 사용한 msg.properties = config가 해당 foo 변수가 들어있는 config 객체를 통째로 msg의 필드로 넣어버리는 구문이다.

config 파라미터로 전달된 foo값

NodeRED 등록

노드에 대한 js, html파일이 생성되게 되면 해당 파일을 nodered에 등록해야 한다.

등록 과정은 다음과 같다. 

 

1. 생성한 디렉토리 내의 package.json 파일에 다음과 같은 구문을 추가해준다.

   "node-red": {
        "nodes": {
            "new-node" : "new-node.js"
        }
    }

여기서 new-node는 새로 만들게될 노드의 이름이며, new-node.js는 새로 만들게 될 노드의 파일이다.

 

추가한 결과

{
    "name": "some_name",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "node-red": {
        "nodes": {
            "some-node": "some-node/some-node.js",
        }
    }
}

 

(2,3번은 한번만 실행해주면 된다.)

2. 컨테이너 내 /usr/src/node-red로 이동한다.
3. npm install /data/{만든디렉토리} 를 진행한다.
4. docker 컨테이너 재시작.

결과

새로운 노드가 생성이 되었으며, 해당 노드를 사용하여 플로우를 만들면 다음과 같은 결과를 얻는다.

msg 전체를 출력한 flow로써, 추가한 new_field와, config로 들어간 foo 변수값을 확인할 수 있다.