아두이노 코딩-61: 아두이노 사물인터넷 NodeMCU Web Server 코딩에 의한 LED ON OFF 특집

클라이언트/서버란 리소스 또는 서비스 제공자가 분리되어 있는 분산응용구조를 뜻한다. 예를 들어 아두이노 웹서버란 웹을 바탕으로 하는 서비스 관점에서 아두이노가 서버로서 서비스 코드를 실행하게 되면 네트워크를 통해 클라이언트 즉 스마트 폰이나 PC들이 아두이노에 request를 보내어 연결이 되면 아두이노가 실행하는 서비스 코드를 받아 보게 되는 것이다.

※아두이노 코딩이지만 만에 하나 그 내용이 어렵다고 느낄 수도 있으므로 지금까지 연재해온 내용 순서에 따라 읽은 후 배선 및 코딩을 실행하면 그다지 어렵지 않으며 이번 블로그 이전에 포스팅한 두 블로그 내용부터 시작하면 이해에 별 지장이 없을 듯하다.

아두이노 코딩-60: 아두이노 사물인터넷 NodeMCU WiFi 보드 Firmware 설치 및 WiFi 공유기 Scan 예제
https://steemit.com/kr/@codingart/60-nodemcu-wifi-firmware-wifi-scan

와이파이에 의한 아두이노 사물인터넷 IOT 코딩에의 초대
https://steemit.com/kr/@codingart/iot-1

아두이노 보드를 사용하여 웹 서버로 사용하기 위한 방법은 첫째 이더넷 쉴드 보드를 사용하여 유선 인터넷 망에 연결시키는 방법과 두 번째로 무선 와이파이를 통해 공유기에 의해 인터넷 망에 연결하는 방법이 있다.

아두이노 보드에 무선 와이파이를 설치하는 방법에도 크게는 와이파이 쉴드를 설치하거나 그렇지 않으면 ESP-01 칩을 직접 배선하든지 아니면 ESP-12 또는 ESP-12E가 설치된 아두이노 호환 ESP8266 NodeMCU나 weMos 보드를 활용하는 방안이다.

ESP8266WiFi NodeMCU 보드를 웹서버로 활용하기 위한 예제로서 아두이노 편집기 파일 탭의 예제 탭의 WiFiWebServer가 있으나 이 코드는 클라이언트 입력 방식에 다소의 문제가 있어 본 블로그에 제시된 코드로 대치하기로 한다. 코드의 골격은 거의 비슷하나 초보자에게는 확실하게 프로그램이 동작하는 것이 중요하기 때문에 본 블로그의 코드를 성공 시킨 후에 예제 탭의 WiFi WebServer 프로그램을 실행시킨다면 필자가 의미하는 바를 즉각 이해할 수 있을 것이다.

여기에 포스팅 되는 내용은 NodeMCU 보드에 한정되며 사용자가 혹 WeMos 보드를 사용한다면 붙박이 LED 의 번호가 다르므로 코드상 약간의 수정이 필요하다는 점을 참조하기 바란다.

자신의 스마트 폰에서 데이터 네트워크 및 핫스팟을 켜 공유기(AP:Acess Point)로 사용하기로 하자. 이번 예제가 데이터 통신 예제이므로 반드시 데이터 통신 기능도 켜진 상태라야 한다.

아울러 바로 앞에서 기술했던 Scan 프로그램을 돌리면 이용 가능한 핫스팟이나 공유기(AP)를 파악할 수 있다. 자신의 스마트 폰의 핫스팟이 켜졌는지 반드시 확인 후 불러온 프로그램 초반에 사용자 명과 비밀 번호를 입력하도록 한다.

단 주의할 점은 핫스팟은 클라이언트 웹 화면이 준비된 상태에서 핫스팟을 켜도록 하고 시리얼 모니터를 통해서 아두이노 NodeMCU의 가상ip를 확인하도록 해야 한다.

상기의 입력 데이터 사례는 가칭 사용자명 AndroidHotspot1234에 스마트 폰 개통 시에 별도의 보안 조치가 없었다면 비밀 번호가 00000000 으로 잡혀 있는 것이 보통이다. 각자 확인해 보도록 한다.

WiFIServer server(80); 명령에 의해 아두이노 ESP8266 NodeMCU의 포트를 80으로 설정하며 다른 번호를 사용하면 안된다. NodeMCU 보드의 baud rate는 9600 이 아니라 115200 이 표준으로 설정된다.

WiFi가 연결이 되면 시리얼 창에 “WiFi connected”라는 메세지가 출력된다. 이로부터 server 프로그램이 시작되며 가상 ip 출력이 이루어진다. NodeMCU 보드 별로 192.168.⚫⚫⚫형태로 가상 ip가 주어지며 일단 192.168.⚫⚫⚫ 형태이면 모조리 가상 ip로 보면 된다. 이 ip를 시리얼 창에서 읽어 스마트폰 웹브라우저에서 웹서버 프로그램에 request를 보내기 위해 url 주소창에 입력하고 엔터 키를 눌러야 한다.

ledPin 핀 2번은 NodeMCU 핀 다이그램을 참조하면 GPIO 2에 해당한다. 한편 보드에 인쇄되어 있는 D0, D1, D2,∙∙∙방식으로 보면 D4에 해당한다.

아두이노 우노에서는 13번이 붙박이 LED이었던 것처럼 ledPin 번호 2는 아두이노 호환 NodeMCU 보드의 붙박이 LED 이다.

이 붙박이 LED는 편집기에서 프로그램 업 로딩 시에 빠른 속도로 점멸하다가 완료되면 OFF 상태가 된다.
그 이후에는 보드에 설치된 프로그램에서 제어 목적으로 이용이 가능하므로 별도의 LED 추가 배선 없이도 원격에서 와이파이로 LED ON OFF IOT 제어 실험이 가능하다.
아두이노 툴 탭에서 반드시 NodeMCU 1.0과 포트 번호를 지정하고 확인한 후 웹서버 예제 코드를 컴파일하여 업로딩하도록 한다.

웹서버 코드의 구동 방식은 일단 NodeMCU에서 웹서버 코드가 실행이 되면 주변에서 핫스팟이나 공유기를 스캔한다. 코드에서 사용자 ID와 비밀번호가 일치하는 공유기를 찾으면 NodeMCU 보드의 가상 ip 즉 WiFi.localIP()를 출력해 준다.

이 가상 ip의 역할이 대단히 중요한데 스마트폰 웹브라우저의 주소창에서 이 가상 ip를 입력하고 엔터키를 누르면 NodeMCU의 웹서버 코드가 request 신호를 수신하여 확인과 아울러 서비스 코드를 실행시킨다.

loop()에서 지속적으로 클라ㅣ언트 연결을 시도한다. 즉 WiFiclient 의 클라스 명령 client를 선언하고 server.available() 명령에 의해 서버 입력 버퍼에 request 수신 여부를 체크하자.

!clint 즉 client 가 참(True)이 아니면 즉 request를 수신하지 못했으면 계속 대기한다.

그러다가 request를 수신하여 clint 가 참(True)이되면 다음 명령 코드 client.available() 즉 클라이언크 입력버퍼를 점검 실행한다. 이 과정에서 ‘\r’ 즉 return 문자가 확인되면 입력버퍼로 보내진 데이터를 문자 변수 request에 저장하고 client.flush() 명령을 실행하여 클라이언트 입력 버퍼를 지운다.

NodeMCU 붙박이 LED 즉 2번 핀 또는 GPIO 2 번 핀은 데이터 핀 D4에 해당하는데 그 LED 배선구조는 보드에서 항상 3.3V가 가해진 상태에서 하단 부분에 LOW 상태 또는 HIGH 상태를 digitalWrite() 명령에 의해 설정하게 되어 있다.

즉 붙박이 LED를 ON시키기 위해서는 클라이언트 웹화면에서 ON 버튼을 누르고
digitalWrite(ledPin, LOW); 명령 실행과 함께 실행 결과를 클라이언트에 ON회신 출력을 위해 value = HIGH; 로 설정해야 하는 것이다.

코딩 초보자 입장에서 LED를 ON 시켜야 함에도 불구하고 digitalWrite() 명령에서 왜 LOW를 출력해야 하는 이유를 반드시 이해할 필요가 있다.

스마트폰 웹브라우저부터 request가 접수되면 loop()문에서 request.indexOf(“/LED=ON⦁⦁⦁”)에 의해 request 내용을 체크하여 –1 이면 수신 데이터가 없으므로 if 제어문을 건너뛰어 다음 명령을 수행하게 된다. 반면에 –1 이 아니라면 즉 if 제어문을 실행한다. 즉 digitalWrite(ledPin, LOW); 명령 실행과 함께 웹 브라우저 출력에서는 ON을 출력해야 하므로 value = HIGH; 로 설정해야 하는 것이다.

반면에 LED=OFF request가 들어오면 loop()문에서 request.indexOf(“/LED=OFF⦁⦁⦁”)가 –1 이 아니라면 if문을 실행한다. 즉 digitalWrite(ledPin, HIGH); 명령 실행과 LED는 OFF되고 함께 웹 브라우저 출력에서는 OFF를 출력해야 하므로 value = LOW; 로 설정해야 하는 것이다.

request를 보내는 부분은 HTML 명령으로 이루어져 있으며 특히 앵커 태그 (a ∙∙/a) 속에 포함된 버튼 태그 (button)과 (/button)에 의해 작동한다. 이 부분이 앞서의 request.indexOf(“/⦁⦁⦁”)과 함께 IOT 프로그램에 있어서 핵심적인 역할을 하고 있음을 지적해두자.

※바로 앞 문장의 HTML 태그 설명에 있어 스팀잇 입력에서 깍지 기호가 금지되어 있으므로 괄호 즉 (, ) 를 사용하였음.

아두이노 NodeMCU WiFi 접속을 위한 표준 준 프로토콜은 HTTP이다. HTTP는 접속은 가능하지만 요즈음 많이 사용하는 HTTPS 와는 달리 보안 기능까지 제공하지는 않는다. 즉 가상op를 알면 함께 접속이 가능하며 LED ON OFF 제어장치으 경우 여러 대의 스마트 폰들을 사용하여 하나의 LED 제어가 가능하다는 점이다. 원래 HTTP 가 보안 기능을 제공하지는 않지만 웹서버 코드 실행에 보안이 필요하다면 웹서버 코드에 접속된 클라이언트로 하여금 비밀번호를 입력케 하여 확인이 된 경우에만 실행이 가능하도록 코드를 수정하면 된다.

아두이노 NodeMCu 웹서버 코딩의 특징이라면 클라이언트에 제공해야 할 HTML 코드를 클라이언트추력 명령 즉 client.print(⚫⚫⚫)를 통해서 HTML 코드 즉 ⚫⚫⚫를 보낼 수 있다는 점이다. 대개 라즈베리 파이와 같은 또 다른 취미용 보드의 WiFi 웹서버 코드 사례에서는 HTML 코드부분을 분리해서 웹측에 설치해 두고 운영해야 하는 어떻게 보면 불편한 점이 있다. 참고하기 바란다.

컴파일 및 업로딩이 완료되면 즉시 핫스팟을 켜고 시리얼 모니터 창을 열면 핫스팟을 찾기 위한 약간의 검색 시간이 필요하다. 핫스팟이 연결되면 NodeMCU의 가상 ip가 출력된다.
미리 핫스팟을 켰을 경우 ip주소 확인이 안되므로 ip를 외우든지 아니면 핫스팟을 껐다가 다시 켜야 할 것이다.

다음 순서로서 스마트 폰 인터넷 화면을 열고 IP를 입력하고 엔터 키를 치는 순간 다음과 같이 ON OFF 버튼을 포함한 웹화면이 나타난다. on 옆의 한자는 중국 제품 특유의 버그인데 그다지 문제가 되지는 않는다.

Turn On 버튼을 누르면 url 주소창에 LED=ON이 추가됨과 동시에 NodeMCU의 2번 LED가 청색으로 바뀌었음을 확인하도록 한다. Turn Off 버튼을 누르면 url 주소창에 LED=OFF가 추가됨과 동시에 NodeMCU의 2번 LED가 꺼짐을 확인하도록 한다. ON OFF를 반복하게 되면 시리얼 모니터 창에서도 request가 출력되는 즉각적인 반응이 나타난다.

특기해야 할 점은 클라이언트에서 request를 보내지 않은 경우에도 request 가 수신된 것으로 출력되는데 자세히 관찰해 보면 favicon 이 있을 것이다.

favicon 은 클라이언트에서 내부적으로 서버에 보내는 request로서 서버 컴퓨터의 최상위 디렉토리 즉 \C: 에 보관하고 있는 url 용 비트맵 로고를 return 해 달라는 request인데 아두이노와 같은 마이크로 콘트롤러에는 아시다시피 \C: 디렉토리 자체가 없기 때문에 비트맵 로고를 보내 줄 수가 없다. 그렇다고 사용자도 보낸지도 모르는 request 가 왔을 때에 무조건 특정 제어 코드가 실행되면 위험한 상태가 발생할 수도 있으므로 웹서버 코딩에서는 이러한 request 의 수신을 항상 체크하여 억제할 수 있도록 코드를 작성해야 한다. 이 부분 코딩에 관해서는 별도로 다루어 보도록 할 계획이다.

그밖에 이 웹서버 예제는 하나의 클라이언트와 연결이 된 상태에서도 다른 클라이언트와의 연결이 가능하다는 점을 지적한다.

이상으로 외부 클라이언트 기기에서 아두이노 NodeMCU 보드의 붙박이 LED의 스위치를 스마트폰에서 와이파이를 통해 ON OFF 하는 제어 프로그램을 제시하였다. 이 프로그램을 바탕으로 창의적인 사물 인터넷 시스템(IOT: Internet Of Things)을 구현하는 일은 독자들의 몫이 될 것이다.

//Webserver_nodemcu_01

코드 내용 중에 HTML 태그 명령에 사용하는 까지 기호가 많이 있어 불가피하게 외부블로그에 올려 두었으니 아래 블로그에서 코드를 복제하기 바람.

사물인터넷 NodeMCU Web Server 코딩에 의한 LED ON OFF 특집
http://blog.daum.net/ejleep1/594