10. Using The HTTP Send The Temperature Data To Node Red - EnglishNo/ESP32 GitHub Wiki

• 컴퓨터 네트워크에서 장치들이 서로 인식하고 통신을 하기 위해서 사용하는 번호이다.
• 네트워크에 연결된 장치가 라우터이든 일반 서버이든, 모든 기계는 이 특수한 번호를 가지고 있어야 한다.
• 이 번호를 이용해 발신자를 대신하여 메시지가 전송되고 수신자를 향하여 예정된 목적지로 전달된다.
• IP와 IP 주소는 다른 개념이라고 한다.
• 종류로는 IPv4, IPv6 등이 있으며, IPv4는 오늘날 일반적으로 사용하는 IP 주소이다. (범위는 32비트) 이를테면 127.0.0.1은 로컬 호스트로 자기 자신을 가리킨다고 한다. IPv6는 모든 단말에 주소를 부여하기에 32비트로는 부족해짐에 따라 주소 길이를 128비트로 늘린 주소이다. IPv6은 보통 두 자리 16진수 여덟 개를 쓰고 각각을 : 기호로 구분한다.

(자세한 내용 - https://ko.wikipedia.org/wiki/IP_주소)

• 분산 하이퍼미디어 환경에서 빠르고 간편하게 데이터를 전송하는 프로토콜이다. 즉, 하이퍼텍스트(Hypertext) 문서를 교환하기 위하여 사용되는 통신규약이다.
• HTTP는 80번 포트를 사용하도록 정의되어 있으며, 따라서 HTTP 서버는 80번 포트에서 대기하고, 클라이언트는 TCP를 사용해 연결을 설정한다.

(자세한 내용 - https://terms.naver.com/entry.naver?docId=2271985&cid=51207&categoryId=51207

https://terms.naver.com/entry.naver?docId=1180001&cid=40942&categoryId=32851)

-관련 용어들 정리-

• 프로토콜: 통신 시스템이 데이터를 교환하기 위해 사용하는 통신 규칙.
• 포트: 모뎀과 컴퓨터 사이에 데이터를 주고받을 수 있는 통로.
• 모뎀: 아날로그 신호의 통신회선인 전화선을 이용하여 디지털 통신 장비와 통신할 때 디지털 신호를 아날로그 신호로 변환시켜 주는 것.
• 클라이언트: 클라이언트/서버(client/server) 구성에서 사용자 측.
• TCP: IP 프로토콜 위에서 연결형 서비스를 지원하는 전송계층 프로토콜

1. Node-Red 페이지에 들어가고 "http-in" 보드를 플로우에 둔다.

   

2. "http-in" 보드 안의 URL에서 Node-Red에 데이터를 전송할 HTTP 브라우저 이름을 다음과 같은 양식으로 작성한다.

   

3. 플로우에서 디버그 창에서 결과를 출력할 수 있는 기능을 가진 "debug" 보드를 둔다.

   

4. 웹 브라우저에 들어가 주소 입력 창에서 "http://(cmb창에서 찾은 IP 주소):1880/("http-in" 보드의 URL에서 입력한 문장과 같은 문장)?(디버그 창에서 출력하고 싶은 내용)"식으로 작성한다.

   

5. 다 작성하고 Enter키를 누르면 디버그창에 문장이 출력된 것을 볼 수 있다.

(dashboard 사용법 - https://github.com/EnglishNo/ESP32/wiki/8.-Node-Red-Start#-dashboard-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95-)

1. dashboard 창에서 "Layout" 창에 들어가 "+tab"버튼하고 만들어진 tap에 마우스를 대 "+group"버튼을 클릭한다.

   

2. "function" 보드를 플로우에 둔 다음 "http-in" 보드하고 연결한다.

   

3. "function" 보드를 더블 클릭해 코드를 이런 식으로 작성한다. (단 전에 작성한 브라우저 주소('?'뒤에 있는 문장(숫자 제외))와 똑같이 작성해야 한다.)

   

4. 여기까지 하면 "function" 보드하고 "debug" 보드를 연결해 다시 실행해 보면 디버그 창에 이런 식으로 출력된다는 것을 확인할 수 있다.

   

5. 그 다음에 dashboard 보드인 "text"하고 "gauge" 보드를 플로우에 두어 "function" 보드하고 연결한다.

   

6. "text", "gauge" 보드를 더블 클릭해 "Group"에서 시작할 때 만든 그룹으로 설정한다. (참고로 "Label"의 이름을 바꾸면 dashboard 작동을 확인할 때 뜨는 문장이 바뀐다.)

   

7. 그리고 "dashboard" 창에 들어가 그룹 안에 전 단계에서 넣었던 보드들이 정상적으로 넣어진 것을 확인했으면 원 안의 버튼을 클릭하면 UI가 뜨는 것을 볼 수 있다.

   

8. 그러면 한번 더 전에 입력했던 주소 브라우저에 들어가 주소 입력창을 클릭하고 엔터키를 누르면 값이 변하는 것을 볼 수 있다. ("gauge" 보드의 최댓값, 최솟값은 "gauge" 보드를 더블 클릭하고 "Range"의 "max", "mix"의 값을 수정해야 바뀐다.)

   

9. 여담으로 "http response" 보드를 플로우에 꺼내어 "function" 보드하고 연결하고 상태코드에 "200"를 작성하고 Node-Red에 데이터를 보내는 웹 브라우저를 입력하면 에러 코드 대신 입력한 값이 웹 브라우저에 출력되는 것을 볼 수 있다.

• 웹 브라우저를 통해 Node-Red에 데이터를 보내는 법을 알게 되었다.
• 전 실습에서 dashboard UI를 보는 법을 몰랐는데, 이번 실습을 통해 알게 되었다.

• "function" 보드 안에서 코드를 입력하고 웹 브라우저를 작동시켜도 값이 출력 안되고 "undefined"가 출력된 적이 있는데, 그것이 코드를 작성할 때 웹 브라우저의 '=', '?' 사이에 있는 있는 문장하고 똑같지 않아 그런 오류가 발생한 것으로 알게 되었다. 그리고 똑같이 작성하니 "temperature"이 없이 값만 출력하는 것이 성공했다.
• dashboard의 UI를 못 본 경우가 있었는데, dashboard 종류의 보드의 "Group"를 설정하니 UI를 볼 수 있게 되었다.