이 블로그는 Web 환경을 이용한 원격 제어 기술에 필요한 지식을 공유 하기 위한 블로그 입니다.
실제 개발과 프로그램 예를 위하여 Raspberry Pi와 Raspberry Pi Pico, ATmega128 보드, Arduino Mega 보드(ATmega2560), WiFi 모듈을 사용 합니다.

node-RED-web-server

Node-RED Web Server
Raspberry Pi와 Node-RED Web Server

  • Node-Red Web Server - HTTP-IN Node와 HTTP Response Node

      • Node-RED Web server는 http-in node와 http-response node를 기본 node로 사용한다.

      http-in node: Client로 부터의 요청(requests)를 수락(accepts)한다.

      http-response: Client의 요청에 응답한다.

    • http-in node와 http-response node
      • http-in node 설정하기

        • http-in node를 설정하가 위한 창 예

        • 팔레트에서 http-in node를 선택하여 작업공간(플로우)으로 Drag 한다.
        • 플로우에서 http-in node를 더블 클릭하면 http-in node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
          • 메소드: HTTP method는 서버에 요청(requests)을 보내는 방법으로 GET과 POST 메소드가 가장 많이 사용하는 메소드 이다.
          • URL: URL(Uniform Resource Locator)는 Web address 또는 네트워크에서 자원의 위치를 알려주기 위한 규약이다. 이 예에서는 Web server의 주소를 설정하기 위하여 사용한다. 이 란에 myserver를 입력하면 전체 주소는 URL/myserver 가 된다. 여기서 URL은 사용하는 Raspberry Pi의 인터넷 주소 이다.
          • 이름: 플로우에서 이 Node를 구분하기 위한 이름을 입력한다.

            • http-in node 수정이 완료되면 "완료" 버튼을 클릭한다.

      • http-response 설정하기
        • 팔레트에서 http-response node를 선택하여 작업공간(플로우)으로 Drag 한다.
        • 플로우에서 http-response를 더블 클릭하면 http-response node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
          • 이름: 플로우에서 이 Node를 구분하기 위한 이름을 입력한다.
          • 헤더: HTML에 대한 이해를 필요로 하기 때문에 여기서는 설명을 생략한다. 현재는 아무것도 입력하지 않아도 된다.

            • http-response node 수정이 완료되면 "완료" 버튼을 클릭한다.

    • template node를 사용한 Web server 예
      • 팔레트에서 template node를 선택하여 작업공간(플로우)으로 Drag 한다.
      • 플로우에서 template를 더블 클릭하면 template node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
        • 이름: 플로우에서 이 Node를 구분하기 위한 이름(예: template HTML)을 입력한다.
        • 템플릿: http-response node에 전달할 Web page(실험을 위하여 아래 HTML 문서를 템플릿 창에 복사 사용 하여도 됨)를 입력한다.
          • 
<!DOCTYPE html>
<html>
<head>
<title>Node-RED web</title>
</head>
<body>

<h1>My first web</h1>
<p>My Node-RED web page.</p>

</body>
</html>

          template node 수정이 완료되면 "완료" 버튼을 클릭한다.

      • http-in와 template node를 연결 한다.
      • template node와 http-response node를 연결 한다.

        • http-in, template, http-response node를 사용하여 작성된 Web server 예

      • "배포하기"를 클릭(실행)한다.
      • Web browser(PC 등에서 크롬 브라우저 사용)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi에 접속(Port 번호: 1880)한다.

        • http://Raspberry_Pi_IP_ADDRESS:1880/myserver

        예: 192.168.0.18:1880/myserver

      • Web browser에 template node에서 입력한 홈페이지가 정상으로 출력되는지 확인한다.

        • Web browser에 홈페이지가 정상으로 출력된 경우 예


    • file-in node를 사용한 Web server 예

      • 이 예는 파일에 저장된 HTML 페이지를 Web browser에 출력한다.

      • Web page(first-html.html)를 작성하여 저장한다. 위 "template node를 사용한 Web server 예"의 HTML 문서를 복사하여 first-html.html에 저장하여 사용한다. 이 예에서는 first-html.html파일을 /home/pi/node-red/HTML/ 폴더에 저장하였다.
      • 팔레트에서 file-in node를 선택하여 작업공간(플로우)으로 Drag 한다.
      • 플로우에서 file-in node를 더블 클릭하면 file-in node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
        • 파일명: Web page(HTML File)가 저장되어 있는 폴더와 파일 주소(예: /home/pi/node-red/HTML/first-html.html)을 입력한다. 이 예는 Raspberry Pi의 /home/pi/node-red/HTML/ 폴더에 first-html.html이 저장된 경우이다.
        • 출력형식: 문자열
        • Encoding: utf8
        • 이름: file-in HTML(이름은 플로우에서 file-in node를 다른 Node와 구분하기 위한 것이기 때문에 다른 이름을 사용하여도 된다.)

          • file-in node 수정이 완료되면 "완료" 버튼을 클릭한다.

      • http-in와 file-in node node를 연결 한다.
      • file-in node와 http-response node를 연결 한다.
      • "배포하기"를 클릭(실행)한다.
      • Web browser(PC 등에서 크롬 브라우저 사용)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi에 접속(Port 번호: 1880)한다.

        • http://Raspberry_Pi_IP_ADDRESS:1880/myserver

        예: 192.168.0.18:1880/myserver

      • Web browser에 file-in node에서 입력한 홈페이지가 정상으로 출력되는지 확인한다.

  • http-in node와 http-response node의 객체
    • http-in node 객체(Object)
      • http-in node는 payload, req(requests), res(response) 개체를 출력한다.
        • payload: 전송 할 실제 데이터를 저장하는 Object 이다.

          • 주: 데이터를 전송할 때, 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 된다. 이 때, 보내고자 하는 데이터 자체를 의미하는 것이 페이로드(payload)이다

        • req object: Client의 요청(request) 정보(속성: Property)를 갖고있는 Object 이다.
        • res object: Client의 요청(request)에 응답하기 위하여 HTTP-IN Node가 생성한 객체이다.
      • http-in node를 이해하기
        • 윗 "Node-Red Web Server"에서 작성한 플로우에 아래와 같이 "debug" node를 추가한다.
        • 팔레트에서 debug node를 선택하여 작업공간(플로우)으로 Drag 한다.
        • 플로우에서 debug node를 더블 클릭하면 debug node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
          • 대상: 대상 드롭 상자에서 "msg 오브젝트 전체"를 선택한다.
          • 출력대상: "디버그 창"을 체크한다.
          • 이름: "debug msg"를 입력한다. 이름은 다른 Node와 구분하기 위한 것이기 때문에 다른 이름을 사용하여도 된다.

            • "debug의 노드 수정" 창의 "완료" 버튼을 클릭한다.

        • http-in node와 debug node를 연결 한다.

          • 위에서 작성한 Web server에 debug node를 연결한 Web server 플로우 예

        • "배포하기"를 클릭(실행)한다.
        • Web browser(PC 등에서 크롬 브라우저 사용)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi의 Server로 전송하는 데이터(이 예에서는 Test=Qerry test)를 포함하여 접속(Port 번호: 1880)한다.

          • http://Raspberry_Pi_IP_ADDRESS:1880/myserver?Test=Qerry test

          예: 192.168.0.18:1880/myserver?Test=Qerry test

        • Web browser에 template node에서 입력한 홈페이지가 정상으로 출력되는지 확인한다.
        • Node-RED 페이지의 "디버그" 창을 선택한다.

            • http-in node의 msg 객체는 payload, req, res 객체를 포함하고 있다. "디버그" 창에서 payload, req, res 객체를 전개(객체 이름 좌측의 삼각형을 클릭하면 객체 내용이 전개된다.)하여 내용을 확인한다.

            http-in node의 msg 객체(payload, req, res 객체를 포함)를 보여주는 debug 창 예

          • payload object: 전송 할 실제 데이터를 저장하는 Object 이다. 초기 상태는 empty 상태인 경우가 대부분이다.
          • req object: Client의 요청(request) 정보(속성: Property)를 갖고있는 Object 이다. URL, query, parms(매개변수 정보) 등 중요한 정보를 갖고 있다.
          • res object: Client의 요청(request)에 응답하기 위하여 HTTP-IN Node가 생성한 객체이다. 주로 응답 처리에 필요한 함수들을 포함하고 있다.

      • GET Method를 이용한 서버에서 지정한 이름으로 파라메터(Named parameter) 전달하기

        • GET Method를 이용하여 서버에 파라메터(parameter) 전달하고, 전달된 파라메터에 따라 서버가 다른 응답을하는 예이다. 전달된 파라메터가 :page1 인 경우 page1.html 파일이 전송(응답)되고 :page2 인 경우 page2.html 파일이 전송된다.

        GET Method를 이용한 파라메터(parameter) 전달 실험을 위한 플로우 예

        • http-in node 설정
          • 팔레트에서 http-in node를 선택하여 작업공간(플로우)으로 Drag 한다.
          • 플로우에서 http-in node를 더블 클릭하면 http-in node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
            • 메소드: 메소드 드롭 박스에서 GET 메소드를 선택한다.
            • URL: "test/:name"를 입력한다. 그러면 이 Web page에 연결하기 위한 전체 주소는 URL/test 가 되고 전달되는 파라메터는 req.params.name(req Object -> params Object -> name에 전달된 파라메터가 저장됨)으로 참조할 수 있게 된다. 여기서 URL은 사용하는 Raspberry Pi의 인터넷 주소 이다.
            • 이름: 플로우에서 이 Node를 구분하기 위한 이름을 입력한다.

              • http-in node 수정이 완료되면 "완료" 버튼을 클릭한다.

          • 팔레트에서 switch node를 선택하여 작업공간(플로우)으로 Drag 한다.
          • 플로우에서 switch node를 더블 클릭하면 switch node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.

              • 전달된 파라메터(req.params.name)에 따라 다른 Web page가 출력(응답)되도록 하기 위한 설정이다.

            • 이름: 플로우에서 이 Node를 구분하기 위한 이름을 입력한다.
            • 프로퍼티: 프로퍼티 드롭 박스에서 "expression"을 선택하고, 프로퍼티 란에 "req.params.name"을 입력한다.
            • Switching 조건 입력 창: 조건 입력 창의 첫번째 줄의 드롭 박스에서 "=="을 선택하고, 옆에 계속되는 드롭 박스에서 "string"을 선택하고 ":page1"을 입력한다.
            • 조건 입력 창아래 "+추가" 버튼을 사용하여 조건 열을 추가한다.
            • 추가된 조건 열의 드롭 박스에서 "=="을 선택하고, 옆에 계속되는 드롭 박스에서 "string"을 선택하고 ":page2"을 입력한다.

              • switch node 수정이 완료되면 "완료" 버튼을 클릭한다.

              switch node 설정 창 예

          • 아래와 같이 Web page를 작성하여 page1.html로 저장한다. 이 예에서는 page1.html파일을 /home/pi/node-red/HTML/ 폴더에 저장하였다. 
            • 
<!DOCTYPE html>
<html>
<head>
<title>Node-RED web</title>
</head>
<body>
 <h3>Message path</h3>
 <h4>Using named parameters</h4>
   <p>Selected web page: Page 1</p>
</body>
</html>
</body>
</html>
          • page2.html 파일을 작성(page1.html에서 Page 1을 로 Page 2로 변경)하여 page2.html에 저장한다.
          • 팔레트에서 file-in node를 선택하여 작업공간(플로우)으로 Drag 한다.
          • 플로우에서 file-in node를 더블 클릭하면 file-in node를 설정하가 위한 창이 열린다. 이 창에서 아래 항목을 편집한다.
            • 파일명: page1.html 파일의 주소(예: /home/pi/node-red/HTML/page1.html)를 입력한다.
            • 출력형식: 문자열
            • Encoding: utf8
            • 이름: file-in Page1(이름은 플로우에서 file-in node를 다른 Node와 구분하기 위한 것이기 때문에 다른 이름을 사용하여도 된다.)

              • file-in node 수정이 완료되면 "완료" 버튼을 클릭한다.

          • 팔레트에서 file-in node를 한번 더 선택하여 작업공간(플로우)으로 Drag 하고 위 file-in node와 같이(파일 이름만 page2.html로 설정) 설정(예: /home/pi/node-red/HTML/page2.html)한다.
          • 위 그림 "GET Method를 이용한 파라메터(parameter) 전달 실험을 위한 플로우 예"와 같이 node를 연결한다.
          • "배포하기"를 클릭(실행)한다.
          • Web browser(PC 등에서 크롬 브라우저 사용)에서 다음과 같이 Node-RED가 설치된 Raspberry Pi의 Server로 전송하는 파라메터(이 예에서는 :page1)를 포함하여 접속(Port 번호: 1880)한다.

            • http://Raspberry_Pi_IP_ADDRESS:1880/test/:page1

            예: 192.168.0.18:1880//test/:page1

          • Web browser에 page1.html Web page가 정상으로 출력되는지 확인한다.
          • 파라메터를 변경하여(이 예에서는 :page2) 접속한다.

            • http://Raspberry_Pi_IP_ADDRESS:1880/test/:page2

            예: 192.168.0.18:1880//test/:page2

          • Web browser에 page2.html Web page가 정상으로 출력되는지 확인한다.

            • Web browser에 page1.html Web page가 출력(응답)된 예

        • debug node를 이용하여 전달된 파라메터 확인하기
          • Node-RED 페이지의 우측에서 "디버그" 창을 선택한다.
            • http-in node의 msg 객체는 payload, req, res 객체를 포함하고 있다. "디버그" 창에서 req 객체를 전개(객체 이름 좌측의 삼각형을 클릭하면 객체 내용이 전개된다.) 한다.
            • params 객체를 전개하면 아래와 같이 name:에 문자열 ":page1"이 전달된 것을 확인할 수 있다.

              • http-in node에 전달된 파리메터(req.params.name)를 보여주는 debug 창 예

      • GET Method를 이용한 쿼리(Query) 파라메터(parameter) 전달
        • 쿼리 파라메터는 ? 문자와 키 값(key value)을 사용하여 URL에 전달된다.
        • 각 쿼리 파라메터는 & 문자를 사용하여 구분된다.
        • 쿼리(Query) 파라메터(parameter)를 URL에 포함(GET Method)하여 전달하는 예
          • 아래 같이 플로우를 작성하고 http-in node의 메소드를 "GET"으로, URL를 "test"로 설정한다.

            • 쿼리(Query) 파라메터(parameter) 전달 실험을 위하여 debug node를 연결한 server 플로우

          • template node의 템플릿에 아래 HTML Page을 입력한다. 
            • 
<!DOCTYPE html>
<html>
<head>
<title>Node-RED web</title>
</head>
<body>
  <h3></h3>Query parameters testing</h3>
  <p>first name: {{req.query.first}}</p>
  <p>last name: {{req.query.last}}</p>
</body>
</html>
          • Web browser에서 아래 같이 URL과 쿼리을 전송한다.

            • http://Raspberry_Pi_IP_ADDRESS:1880/test/?first=KilDong&last=Hong

            예: http://192.168.0.18:1880/test/?first=KilDong&last=Hong

            윗 HTML Page의 실행 결과 Web browser에 쿼리가 출력(응답)된 예

          • req.query 객체를 전개하면 아래와 같이 쿼리 전달된 것을 확인할 수 있다.

            • http-in node에 전달된 쿼리 파리메터(req.query.first 와 req.query.last)를 보여주는 debug 창 예

          • 쿼리로 Array를 전달하는 예: 아래 예와 같이 URL과 쿼리을 전송한다.

            • http://Raspberry_Pi_IP_ADDRESS:1880/test/?id=1&id=2

            예: 192.168.0.18:1880//test/?id=1&id=2

            http-in node에 전달된 쿼리 파리메터를 보여주는 debug 창 예

          • 윗 예와 같이 동일한 이름의 Key를 사용(?id=1&id=2)하면 Array로 저장되어 req.query.id[0]와 같이 참조할 수 있다.

    • http-response node 객체(Object)
      • http-response node의 메시지 객체(payload Object, req Object, res Object를 갖고있다.)는 http-in 노드에서 시작된 객제이다.
      • 이 노드 또는 이전 노드에서 응답 코드 및 기타 메시지 헤더를 입력(또는 설정)할 수 있다.
      • http-in 노드로 부터 생성된 메시지 객체에 아래 정보를 추가로 입력할 수 있다.
        • payload: Client에 전송할 정보(데이터). HTML File 등
        • statuscode: Client에 전송할 상태 코드.
        • headers: HTML 문서의 Header section에 포함되는 정보.
        • cookies: 웹 서버가 브라우저에게 지시하여 사용자의 로컬 컴퓨터에 파일 또는 메모리에 저장하는 작은 기록 정보.

  • Raspberry Pi와 Node-RED Dashboard 관련 페이지 보기




    • 홈
    피드 구독하기: 글 (Atom)