[아두이노#405] (Websocket#1) 웹소켓으로 ESP8266을 웹서버로 작동시키는 방법!(튜토리얼)(녹칸다/포로리야공대가자)

https://youtu.be/EsTUTC12Eq4

(Websocket#1) 웹소켓으로 ESP8266을 웹서버로 작동시키는 방법!(튜토리얼)
녹칸다의 웹소켓(websocket)을 이용해서 ESP8266을 웹서버로 구동시키는 시리즈이다!
기존 ESP8266으로 구현할 수 있는 웹서버를 동적으로 구현할 수 있는 예제이다!
웹서버와 웹클라이언트 방식에서 클라이언트가 서버에게 요청한다음 응답을 받는 구조를 가진다!
그러나 서버가 주도적으로 클라이언트에게 데이터를 전송할 수 없다!
웹소켓을 이용한 웹서버는 기존 웹서버와 동일한 방식으로 동작하나 클라이언트가 받게될 응답데이터에 자바스크립트로 구현된 웹소켓 코드가 내장되어있다!
웹서버는 내부적으로 별도의 포트를 이용해서 클라이언트에 설치된 웹소켓과 소켓통신을 함으로써 양방향 통신이 가능해진다!
(웹서버와 웹소켓 2개의 통신이 동시에 이루어진다)
이번편에서는 웹소켓을 이용한 웹서버 구현의 튜토리얼편으로 아래와 같은 목차로 진행해보도록 한다!
1.이번 시리즈에 필요한 자바스크립트의 기본이 되는 지식 알아보기!(콤포넌트연동, 변수선언, 함수, 구조체, JSON 정도~)
2.라이브러리에 포함된 기본예제가 어떻게 구동되는지 살펴보자!
3.서버와 클라이언트가 웹소켓으로 text데이터를 주고받는 예제 만들어보기!
4.클라이언트가 여러개가 있을때 하나의 클라이언트의 변경사항이 나머지 클라이언트들에게도 반영이 되려면?
5.간단하게 클라이언트들끼리 채팅을 할 수 있는 화면을 구성해보시오!
6.LED를 4개를 ESP8266에 연결하고 웹브라우저에서 개별적으로 제어할 수 있는 인터페이스를 구현하시오!
7.버튼 2개를 ESP8266에 연결하고 버튼이 눌려지면 서버와 연결된 웹브라우저에 결과가 출력되도록 하시오!

 

(실제로한거)

0.자바스크립트의 기본적인 테스트를 해보는 파일

javascript_test.html

0.00MB

1.서버는 클라이언트에게 1초에한번 text메시지를 전송하고 클라이언트는 버튼을 누르면 서버에게 메시지를 전송한다!

405-1(서버와클라이언트가text를주고받는예제).txt

0.00MB

2.클라이언트에 체크박스가 있는데 하나의 클라이언트가 체크박스 상태를 변경하면 나머지클라이언트들도 동적으로 체크박스의 상태가 바뀌도록 하시오!

405-2(여러개의클라이언트를동시에업데이트하는방법).txt

0.00MB

3.(2)예제를 참고해서 클라이언트들끼리 간단하게 채팅을 할 수 있는 예제를 만들어보시오!

405-3(웹브라우저여러개를이용해서채팅창만들기).txt

0.00MB

4.사물인터넷보드에 LED를 4개 연결하고 웹브라우저에서 제어할 수 있도록 해보시오! 여러개 클라이언트가 접속했을때 변경된 결과가 다른 클라이언트에게도 반영되도록하고 최초로 접속하는 클라이언트는 현재 서버에 세팅되어있는 LED의 상태를 가져와서 출력하시오!

405-4(LED4개를연결해서여러개클라이언트로제어하는예제).txt

0.01MB

관련라이브러리(websocket)
https://github.com/Links2004/arduinoWebSockets
관련라이브러리(arduinoJSON/6.15.2)
https://arduinojson.org/?utm_source=meta&utm_medium=library.properties
자바스크립트참고주소
https://developer.mozilla.org/ko/