[아두이노#415] (Websocket#11) 웹소켓과 MQTT를 연동하는 사물인터넷 예제만들기!(녹칸다/포로리야공대가자)
프로그래밍/ESP8266 & Websocket 2022. 1. 12. 22:54
(Websocket#11) 웹소켓과 MQTT를 연동하는 사물인터넷 예제만들기!
녹칸다의 웹소켓(websocket)을 이용해서 ESP8266을 웹서버로 구동시키는 시리즈이다!
기존 ESP8266으로 구현할 수 있는 웹서버를 동적으로 구현할 수 있는 예제이다!
웹서버와 웹클라이언트 방식에서 클라이언트가 서버에게 요청한다음 응답을 받는 구조를 가진다!
그러나 서버가 주도적으로 클라이언트에게 데이터를 전송할 수 없다!
웹소켓을 이용한 웹서버는 기존 웹서버와 동일한 방식으로 동작하나 클라이언트가 받게될 응답데이터에 자바스크립트로 구현된 웹소켓 코드가 내장되어있다!
웹서버는 내부적으로 별도의 포트를 이용해서 클라이언트에 설치된 웹소켓과 소켓통신을 함으로써 양방향 통신이 가능해진다!
(웹서버와 웹소켓 2개의 통신이 동시에 이루어진다)
이번편에서는 웹소켓 예제와 MQTT예제를 함께 구동할 수 있는 기본 예제를 만들어 보도록 한다!
10편까지 ESP8266과 웹소켓을 이용한 웹서버 예제는 사물인터넷(IoT)를 활용했다고 보기에는 한계점이 있었다!
보드 1대와 다수의 웹브라우저가 연결이 되었기 때문이다!
사물인터넷은 수없이 많은 보드를 인터넷에 연결하고 그것들을 모니터링하거나 제어한다는 개념이 들어가야 완성체라고 볼 수 있다!
그런 의미에서 이번편은 웹소켓서버가 돌아가는 보드를 제외하고 3대의 ESP8266보드를 더 활용해서 MQTT통신으로 하나의 보드로 데이터를 수집하고 수집된 결과물을 실시간으로 스마트폰에 있는 웹브라우저에 반영하는 것을 목표로 한다!
1.사물인터넷보드(ESP8266)을 웹서버와 웹소켓서버로 동작시키던 기존 예제에 MQTT클라이언트로 동작하는 짬뽕시킨다음 웹클라이언트가 받게되는 화면에 MQTT로 전송한 값이 textbox안에 출력이 되도록하는 예제!(ESP8266보드 1대만 덩그러니 있으면 가능함!)
2.ESP8266을 하나더 추가해서 MQTT로 전송한 메시지를 게이트웨이와 연결된 웹브라우저에 출력하고 웹브라우저에서 전송한값을 MQTT로 양방향통신을 하시오!
3.사물인터넷보드 3대를 노드로 설정하고 게이트웨이에서 3개의 보드를 각자식별해서 웹브라우저화면에 구분해서 출력할 수 있도록하시오!!
4.노드3대에 각각 LED가 2개씩 연결되어있다! 서버에서 공급하는 UI에서 각 노드에 달려있는 LED를 개별적으로 제어할 수 있는 예제를 만드시오!
5.노드3대가 각각 가상의 온습도센서값을 게이트웨이쪽으로 2초에 한번씩 전송한다! 이때 게이트웨이는 수집된 데이터를 웹소켓클라이언트로 전송해서 웹클라이언트가 가지고있는 그래프에 그 결과를 line그래프로 출력하는 예제를 만드시오!(회로도는 4와 동일)
관련라이브러리(pubsubclient/2.8.0)
https://pubsubclient.knolleary.net/
관련라이브러리(websocket)
https://github.com/Links2004/arduinoWebSockets
관련라이브러리(arduinoJSON/6.15.2)
https://arduinojson.org/?utm_source=meta&utm_medium=library.properties
