Wemos D1 아두이노 와이파이 보드 사용법

아래 링크들을 참고하여 공부하고 작성했습니다.
https://turtleshell.kr/58
https://kwanulee.github.io/iot/docs/internet/web_arduino.html
https://opentutorials.org/module/3621/21675

이번에는 와이파이에 연결된 Wemos D1 보드를 웹 서버처럼 사용하여
HTTP를 통해 웹브라우저의 버튼을 누르는 것으로 보드에 연결된 LED를 조작하는 기능을 수행해보겠습니다.
후술될 내용에서 브라우저는 저희가 접속한 인터넷 브라우저고 서버는 Wemos D1 보드입니다.

브라우저는 서버와 접속되면 Request , Header, Empty line, Body 항목들을 요청합니다.(Request)
요구받은 서버는 Status line, header, Empty line, Body로 구성된 답을 줍니다.(Response)

우리는 Wemos D1을 서버로 사용하므로 브라우저로 페이지에 접속했을 때를 위해
아두이노 IDE를 통해 서버 Response를 작성해 주어야 합니다.

우선 Status Line은 반드시 첫줄에 와야 합니다. 3가지 필드로 구성되어 있는데
HTTP/1.1 200 OK
위 한 줄을 해석하면
HTTP/1.1 : 응답 프로토콜과 버전
200 : 응답 코드
OK: 응답 메시지를 의미합니다.

그다음 header를 적어줍니다.
Content-type:text/html
헤더가 끝나고 이어지는 content가 어떤 타입인지 알게 해야 하고 우리는 텍스트로 이루어진 html을 사용합니다.
Connection:close
전송이 끝나면 연결을 끊습니다.
Refresh: 20
매 20초마다 새로고침합니다.

여기까지 Status line과 header를 구성했으므로 뒤에 빈줄을 삽입함으로 구분합니다.
이제부터 Body를 작성하면 되고 이부분은 평소 HTML로 웹사이트를 만들던것과 같이 작성하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#include <ESP8266WiFi.h>
 
const char* ssid     = "와이파이이름"; 
const char* password = "와이파이비밀번호";
 
WiFiServer server(80);  //http의 기본 포트는 80입니다.
 
void setup() {
  Serial.begin(115200); // 시리얼 통신 속도는 115200
  delay(1000);
  Serial.println();
 
  WiFi.mode(WIFI_STA); 
  /*
  와이파이의 모드 (STA는 station(라우터) 어댑터를 무선 네트워크에연결
  AP모드는 acces point, 어댑터와 내부적으로 연결할 때 쓰임) 이번 구현은 STA가 적합합니다)
  */
  Serial.println();
  Serial.print(ssid);
  Serial.println("에 접속중");
 
  WiFi.begin(ssid, password);  //아까 입력한 와이파이 정보로 접속
 
  while (WiFi.status() != WL_CONNECTED) { //와이파이가 연결안되면 .을 0.1초간격으로 찍어 로딩처럼 표시
    delay(100);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("연결되었습니다.");
 
  server.begin(); //연결되었다고 시리얼로 표시후 서버를 켭니다.
  Serial.println(WiFi.localIP());
}
 
void loop() {
  WiFiClient client = server.available();
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("Connection: close");
  client.println("Refresh: 20"); 
  client.println();
  client.println("<!DOCTYPE html>");
  client.println("<h1>Hello World!</h1>"); 
  client.println("<br>");
  delay(10);
}
cs

Response는 위에 서술한대로 작성했고
빈줄을 삽입한 뒤 아주간단한 html코드로 큰글자로 Hello world를 출력하도록 했습니다.
주석 참고 바랍니다.

Serial.println(WiFi.localIP()); 를 통해 시리얼 모니터에 띄운 주소를 브라우저 주소창에 입력하여 접속합니다.
목표한대로 잘 구현된 모습을 확인할 수 있습니다.
기본적인 구현법을 익혔으니 이제 HTML 코드를 사용하여 센서값을 출력하거나
버튼으로 LED를 조작하거나 하는 기능을 구현할 수 있습니다.