[아두이노#416] (Websocket#12) 카카오지도API에 수집한 센서데이터 출력해보기!(녹칸다/포로리야공대가자)

https://youtu.be/cgtSH5KhfT0

 

 

(Websocket#12) 카카오지도API에 수집한 센서데이터 출력해보기!
녹칸다의 웹소켓(websocket)을 이용해서 ESP8266을 웹서버로 구동시키는 시리즈이다!
기존 ESP8266으로 구현할 수 있는 웹서버를 동적으로 구현할 수 있는 예제이다!
웹서버와 웹클라이언트 방식에서 클라이언트가 서버에게 요청한다음 응답을 받는 구조를 가진다!
그러나 서버가 주도적으로 클라이언트에게 데이터를 전송할 수 없다!
웹소켓을 이용한 웹서버는 기존 웹서버와 동일한 방식으로 동작하나 클라이언트가 받게될 응답데이터에 자바스크립트로 구현된 웹소켓 코드가 내장되어있다!
웹서버는 내부적으로 별도의 포트를 이용해서 클라이언트에 설치된 웹소켓과 소켓통신을 함으로써 양방향 통신이 가능해진다!
(웹서버와 웹소켓 2개의 통신이 동시에 이루어진다)
이번편은 연속으로 진행하는 웹소켓시리즈의 마지막편이다!
녹칸다가 이번 시리즈중에 웹소켓예제를 활용하면 자바스크립트로 할 수 있는 것은 모조리 다 할 수 있다고 한적이 있을 것이다!
ESP8266보드로부터 스마트폰이 웹페이지를 제공받았다면 가장 흥미로운 결과를 보여줄 수 있는게 무엇인가 고민하다가 카카오 지도 API와 연계해보기로 했다!
카카오 지도 API는 자바스크립트로 구동되기 때문에 웹서버에서 웹페이지를 response할때 지도를 구동하는 코드를 첨부해서 전송하면 된다!

(시나리오는 아래와 같다)
녹칸다는 제주도에 살고 있다! 제주도의 특정한 지역에 온도와 습도를 측정할 수 있는 관측소가 있다! 측정값을 2초에한번 MQTT로 데이터를 publish한다! 이 정보를 subscribe하는 ESP8266보드는 웹소켓을 이용한 웹서버로 작동되고 웹브라우저로 접속하면 카카오지도에 각 관측소에 실시간으로 측정되고 있는 값을 info window로 출력한다!
(시간적 여유가 있으면 지도API에서 제어 명령을 내리려면 어떻게 해야할지 알아보도록 하자!)

 

1.카카오지도를 웹서버가 웹클라이언트쪽으로 보내주는 html문서에 첩자로 포함시켜서 전송하는 예제!(ESP8266보드 1대로 작동)

 

416-1(ESP8266보드로카카오지도띄우기).txt

0.01MB

2.웹소켓서버쪽에서 가상의 센서 3종이 있다고 치고, 가상의 센서값을 클라이언트쪽으로 전송해서 마커위에 말풍에다가 센서값을 출력하는 예제!(ESP8266보드 1대로 작동)

416-2(서버자체의값으로지도에있는값을업데이트하기).txt

0.01MB

3.ESP8266보드 3대를 더 준비해서 MQTT로 게이트웨이쪽으로 센서값을 전송할때 (2)예제와 동일한 결과가 되도록 하시오!

416-3(MQTT로수집한데이터를카카오지도에출력하기).txt

0.01MB

416-3-2(노드1번).txt

0.00MB

416-3-3(노드2번).txt

0.00MB

416-3-4(노드3번).txt

0.00MB

4.지도의 인포윈도우화면에 노드쪽 LED를 제어할 수 있는 버튼을 배치하고 버튼을 눌렀을때 게이트웨이쪽에서 노드쪽으로 MQTT제어 메시지를 전송할 수 있도록 하시오!(회로도와 노드쪽 코드는 예제 3과 동일)

416-4(카카오지도에버튼을만들어서LED제어하기).txt

0.01MB

5.(4)예제에 더해서 chart.js로 그래프 출력하는 예제도 함께 붙혀넣으시오!(회로도와 노드쪽 코드는 예제 3과 동일)

416-5(지도와실시간그래프를함께출력하는예제).txt

0.01MB

관련라이브러리(pubsubclient/2.8.0)
https://pubsubclient.knolleary.net/
관련라이브러리(websocket)
https://github.com/Links2004/arduinoWebSockets