[아두이노#407] (Websocket#3) 온습도, Co2, 미세먼지 센서값으로 실시간 그래프 그려보기!(녹칸다/포로리야공대가자)
프로그래밍/ESP8266 & Websocket 2021. 12. 29. 23:44
(Websocket#3) 온습도, Co2, 미세먼지 센서값으로 실시간 그래프 그려보기!
녹칸다의 웹소켓(websocket)을 이용해서 ESP8266을 웹서버로 구동시키는 시리즈이다!
기존 ESP8266으로 구현할 수 있는 웹서버를 동적으로 구현할 수 있는 예제이다!
웹서버와 웹클라이언트 방식에서 클라이언트가 서버에게 요청한다음 응답을 받는 구조를 가진다!
그러나 서버가 주도적으로 클라이언트에게 데이터를 전송할 수 없다!
웹소켓을 이용한 웹서버는 기존 웹서버와 동일한 방식으로 동작하나 클라이언트가 받게될 응답데이터에 자바스크립트로 구현된 웹소켓 코드가 내장되어있다!
웹서버는 내부적으로 별도의 포트를 이용해서 클라이언트에 설치된 웹소켓과 소켓통신을 함으로써 양방향 통신이 가능해진다!
(웹서버와 웹소켓 2개의 통신이 동시에 이루어진다)
이번편에서는 가장 흔히 사용하는 온습도센서(DHT-11), 이산화탄소센서(MH-Z19B), 미세먼지센서(PMS7003)을 활용해서 웹소켓을 이용한 예제를 구현해보도록 한다!
아래와 같은 목차로 진행해보도록 하자!
1.온습도센서를 ESP8266에 연결하고 웹브라우저에 값을 출력하기!
2.(1)의 결과를 꺾은선 그래프로 출력하기!
3.ESP8266에 부저를 추가하고 온도값이 기준값 이상이면 비프음을 발생하고 웹브라우저에 현재상황을 출력하시오!
4.이산화탄소센서를 ESP8266에 연결하고 측정값을 그래프로 출력하시오!
5.미세먼지센서를 ESP8266에 연결하고 측정값을 그래프로 출력하시오!
(실제로한거)
0.자바스크립트 실습해보기!
1.온습도센서의 결과를 간단하게 출력해보시오!
2.(1)예제에 chart.js로 꺾은선 그래프를 이용해서 온습도 그래프를 출력하시오!
3.녹칸다가 이전에 했던 온습도센서 예제의 시안을 이용해서 웹소켓 예제에 적합하도록 수정하시오!
4.이전에 했던 이산화탄소센서 예제를 웹소켓 예제로 구성하시오!
5.미세먼지센서 예제를 만드시오!
6.(3)에서 만들어놓은 온습도센서예제에서 클라이언트쪽에서 설정한 온도값을 넘게되면 서버에 달려있는 부저의 비프음이 출력되도록하시오!
관련라이브러리(DHT11/1.3.8)
https://github.com/adafruit/DHT-sensor-library
관련라이브러리(MHZ19B/1.1.1)
https://github.com/strange-v/MHZ19
관련라이브러리(PMS7003/1.1.0)
https://github.com/fu-hsi/pms
관련라이브러리(websocket)
https://github.com/Links2004/arduinoWebSockets
