본문 바로가기

개발환경/Node-RED

(예제)웹 서버의 특정 경로에 접속하는 경우 메시지 출력하기

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

 

Node-RED와 개발 환경 설정

Node-RED란? 시각화 도구 중 하나로 이벤트 기반 애플리케이션을 위한 로우 코드 프로그램 환경이다. 시각화 도구답게 메시지가 애플리케이션을 통과하는 방식을 시각적으로 보여주는 장점을 지

powerdeng.tistory.com

 

2) 노드 추가

그림1

그림1처럼 왼쪽 네트워크 탭에서 http in과 http response 노드를, 기능 탭에서 function 노드를 끌어다 플로우1에 배치한다.

 

3) http in 노드 설정

그림2

http in 노드를 더블클릭하면 그림2처럼 노드를 수정하는 창이 뜬다.

그 창의 URL에 /powerdeng으로 수정 후 오른쪽 상단의 완료 버튼을 누른다.

 

4) function 노드 설정

그림3

function 노드를 더블클릭하면 그림3처럼 노드를 수정하는 창이 뜬다.

그림3처럼 아래의 코드를 추가하고 오른쪽 상단의 완료 버튼을 누른다.

msg.payload = "안녕하세요. powerdeng입니다.";

 

5) 노드 연결

그림4

http in, function, http response 노드 순으로 배치 후 그림4처럼 연결한다.

 

6) 배포

그림5

그림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