1. 개요
1) Web Client가 로컬 호스트일 경우
2) Web Client가 로컬 호스트가 아닐 경우
192.168.2.197의 1880포트를 사용하는 Node-RED 웹 서버가 열리면, Web browser(크롬)로 그 웹 서버의 경로 중 /powerdeng에 접속을 요청한다. 그러면 서버에서 "안녕하세요 powerdeng입니다."라는 메시지를 응답으로 보내주도록 서버를 Node-RED로 만드는 예제를 진행하려고 한다.
마지막으로 그 결과를 Web Client가 로컬 호스트일 경우와 아닌 경우로 나누어, 각각 PC와 핸드폰에서 접속하여 비교한다.
※ 로컬 호스트: 컴퓨터 네트워크에서 사용하는 루프백 주소로, 자신의 컴퓨터를 의미한다.
※ Web browser: Web server에 접속할 수 있는 대표적인 Web client
2. 진행과정
1) Node-RED 환경 설정
아래의 링크를 참고하여 Node-RED 개발 환경을 설정한다.
https://powerdeng.tistory.com/235
2) 노드 추가
그림1처럼 왼쪽 네트워크 탭에서 http in과 http response 노드를, 기능 탭에서 function 노드를 끌어다 플로우1에 배치한다.
3) http in 노드 설정
http in 노드를 더블클릭하면 그림2처럼 노드를 수정하는 창이 뜬다.
그 창의 URL에 /powerdeng으로 수정 후 오른쪽 상단의 완료 버튼을 누른다.
4) function 노드 설정
function 노드를 더블클릭하면 그림3처럼 노드를 수정하는 창이 뜬다.
그림3처럼 아래의 코드를 추가하고 오른쪽 상단의 완료 버튼을 누른다.
msg.payload = "안녕하세요. powerdeng입니다.";
5) 노드 연결
http in, function, http response 노드 순으로 배치 후 그림4처럼 연결한다.
6) 배포
그림5처럼 오른쪽 상단에 배포하기 버튼을 눌러 배포한다.
3. 결과 확인
1) IP 주소 확인
cmd창에 ipconfig 명령어를 입력하여 IP 주소를 확인한다.
여기서는 내 PC에 연결된 서버의 주소가 192.168.2.197였다.
2) Web browser에 주소 입력
아래의 주소를 Web browser(크롬)에 입력한다.
http://192.168.2.197:1880/powerdeng
※ 서버의 IP 주소 뒤에 콜론을 찍고 사용하는 포트 번호를 반드시 명시해야 되는데, 모든 웹 서버가 공통적으로 사용하는 기본 포트인 80번을 사용할 때는 생략이 가능하다. 하지만 Node-RED는 1880포트를 사용하므로 위처럼 콜론 뒤에 따로 포트 번호를 명시했다.
3) 확인
① Web Client가 로컬 호스트일 경우(PC)
② Web Client가 로컬 호스트가 아닌 경우(스마트폰)
<참고 자료>
https://www.youtube.com/watch?v=Td_XC9PRjyI&list=PLj5NnUk28LOfIDpsdzEagYpvSRhEA_S3S&index=2
'개발환경 > Node-RED' 카테고리의 다른 글
(예제) Node-RED의 root directory를 지정하여 이미지 파일을 불러오기 (0) | 2024.03.20 |
---|---|
Node-RED와 개발 환경 설정 (0) | 2024.03.19 |