웹과 아두이노

학습목표

1. 웹과 HTTP 프로토콜

1.1 웹이란?

1.2 HTML이란?

1.3 HTTP란?

1.3.1 HTTP Request

1.3.2 HTTP Response

2. 아두이노와 웹

2.1 아날로그 입력 값 출력하기

2.1.1 시작하기

  1. 아두이노 IDE의 [파일]-[예제]-[WizFi310]-[WebServer] 선택

  2. WiFi 네트워크 설정

  3. 하드웨어 구성

  4. WizArduino MEGA WiFi 보드를 mini-USB (5pin)으로 PC와 연결 후, 업로드

  5. 시리얼 모니터 창에서 웹서버 주소 확인하기

  6. 웹 브라우저의 주소창에 시리얼모니터에서 확인한 아두이노 보드로 만든 서버의 IP주소를 입력한다.

2.1.2 작동원리

2.1.3 코드 분석

WiFiServer server(80);      // 80포트의 웹서버를 위한 변수 선언

void setup() {
    ...
    server.begin();         // 웹서버 시작
}

void loop() {
  // 웹서버로 클라이언트 요청이 들어오면, 이 클라이언트의 요청을 처리할 웹서버 대리인 (client) 반환
  WiFiClient client = server.available();
  
  if (client) {
    Serial.println("New client");
    boolean currentLineIsBlank = true; // 변수 초기화
  
    while (client.connected()) {
        if (client.available()) {
        char c = client.read();
        Serial.write(c);
    
    // 빈 줄을 읽었다면, HTTP request의 끝을 나타내므로, HTTP response를 보냄    
    if (c == '\n' && currentLineIsBlank) {
            Serial.println("Sending response");

            // send a standard http response header
            // use \r\n instead of many println statements to speedup data send
            client.print(
            "HTTP/1.1 200 OK\r\n"
            "Content-Type: text/html\r\n"
            "Connection: close\r\n"  // the connection will be closed after completion of the response
            "Refresh: 20\r\n"        // refresh the page automatically every 20 sec
            "\r\n");
            client.print("<!DOCTYPE HTML>\r\n");
            client.print("<html>\r\n");
            client.print("<h1>Hello World!</h1>\r\n");
            client.print("Requests received: ");
            client.print(++reqCount);
            client.print("<br>\r\n");
            client.print("Analog input A0: ");
            client.print(analogRead(0));
            client.print("<br>\r\n");
            client.print("</html>\r\n");
            break;
        }
        if (c == '\n') {
            // you're starting a new line
            currentLineIsBlank = true;
        }
        else if (c != '\r') {
            // you've gotten a character on the current line
            currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(10);

    // close the connection:
    client.stop();
    server.closeAllClientSocket();
    Serial.println("Client disconnected");
  }
}

2.2 LED 제어하기

  1. 하드웨어 구성

  2. 2.1 아날로그 입력 값 출력하기 예제를 수정

    void setup()
{
    ...
    pinMode(9,OUTPUT);    //  LED 연결을 위한 추가
}
    void loop()
{
  // listen for incoming clients
  WiFiClient client = server.available();

  if (client) {
    Serial.println("New client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;

    String currentLine = ""; // http 요청 빈 라인 검사용 변수

     while (client.connected()) {
        if (client.available()) {
          char c = client.read();       // 데이터가 있으면 읽어서 저장
          Serial.write(c);
          // if you've gotten to the end of the line (received a newline
          // character) and the line is blank, the http request has ended,
          // so you can send a reply
          if (c == '\n' && currentLineIsBlank) {
              Serial.println("Sending response");

              // send a standard http response header
              // use \r\n instead of many println statements to speedup data send
              client.print(
              "HTTP/1.1 200 OK\r\n"
              "Content-Type: text/html\r\n"
              "Connection: close\r\n"  // the connection will be closed after completion of the response

              "\r\n");
              client.print("<!DOCTYPE HTML>\r\n");
              client.print("<html>\r\n");
              client.println( );
              client.print("Click <a href=\"/H\"> here </a> turn the LED on pin 9 on <br>");
              client.print("Click <a href=\"/L\"> here </a> turn the LED on pin 9 off <br>");
              client.println( );

              client.print("</html>\r\n");
              break;
          }
          if (c == '\n') {
              // you're starting a new line
              currentLineIsBlank = true;
              currentLine = "";
          }
          else if (c != '\r') {
              // you've gotten a character on the current line
              currentLineIsBlank = false;
              currentLine += c ;        // currentLine에 읽어들인 문자를 추가 

          }

          // currentLine의 끝이 GET /H로 끝나는지 검사
          if (currentLine.endsWith("GET /H")) { 
            digitalWrite(9, HIGH); 
          }
          if (currentLine.endsWith("GET /L")) {
            digitalWrite(9, LOW); 
          }
      }
    }
    // give the web browser time to receive the data
    delay(10);

    // close the connection:
    client.stop();
    server.closeAllClientSocket();
    Serial.println("Client disconnected");
  }
}

  3. 시리얼 모니터 창에서 웹서버 주소 확인하기

  4. 웹 브라우저의 주소창에 시리얼모니터에서 확인한 아두이노 보드로 만든 서버의 IP주소를 입력한다.

  5. 링크를 클릭하여 LED 불이 켜지고 꺼지는 것을 확인

3. 연습과제