[web]Development of a websocket using the ws module of node.js

Web Socket ( yeongjin.gongjin@gmail.com )

- 1. 개발환경 구성

- 2. 웹소켓이란?

- 3. 개발 목표

- 4. 웹소켓 서버

- 5. 웹소켓 클라이언트 (tcp개발, http개발, ws개발)

 

H/W : ESP32(websocket client 역할)

 

1. 개발환경 구성

- VSCode에서 Node.js를 사용하기 위한 개발환경 구성

 

2. 웹소켓이란?

- WS protocol communication

- Transport protocol의 일종으로 웹버전의 TCP 또는 Socket

- 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능

- Real-time web application구현을 위해 널리 사용됨(SNS,화상채팅 등)

- 웹 소켓은 HTTP와 같은 OSI 모델의 7계층에 위치하는 프로토콜이며, 4계층의 TCP에 의존

- 한 번의 http기반 handshake가 이뤄지면 http 프로토콜을 웹 소켓 프로토콜로 변환하여 통신하는 구조

 

3. 개발 목표

- PC와 esp32를 uart를 통해 연결(catterm) catterm은 uart communication의 tx를 하고, rx를 확인하는 program

- Node.js를 통해 웹소켓 서버생성

- Catterm을 이용하여 esp32(client)의 data를 node.js(server)로 전송 

- server에서 받은 data에 대한 응답을 esp32(client)로 전송

( 이때, esp32의 at command를 통한 websocket연결, data전송 )

 

4. 웹소켓 서버

- chrome의 websocket test client을 이용하여 server가 제대로 동작하는 지 확인 가능

- server가 위와 같이 정상 동작한다는 것을 확인했으면 client 작업

 

5.웹소켓 클라이언트(tcp)

-websocket clien에 대한 at command가 없다, 그래서 at command를 통한 개발이 목표였으므로 tcp로 되는 지 확인

$ AT+CWMODE=3

$ AT+CWJAP=“AISL2 2.4G”,”aisl312227”

$ AT+CIFSR

$ AT+CIPSTART=“TCP”,”192.168.0.43”,80

$ AT+CIPSEND=data_len

 

5.웹소켓 클라이언트(http)

- esp32 document를 통해 esp32 at command 중 http와 관련된 at command 확인

- 오른쪽 그림에서 ?id=data의 query string을 통해 data보내기 가능할 것으로 예측

- 따라서, Http에 대한 at command에서 ?id=data의 형식으로 data를 query할 수 있다. ( 가정 )

-http 서버는 클라이언트 요청에 대한 응답만 가능 à 서버가 먼저 클라이언트로 데이터 전송 불가능 ( 결론 )

$ AT+CWMODE=3

$ AT+CWJAP=“AISL2 2.4G”,”aisl312227”

$ AT+HTTPCLIENT=2,0,"http://192.168.0.43:80/?id=AT","","",1

- 위의 code를 통해 at command를 통한 http연결, server에 get method를 추가하여 http data query

 

5.웹소켓클라이언트(at command사용x ws연결)

- https://github.com/gilmaimon/ArduinoWebsockets

GitHub - gilmaimon/ArduinoWebsockets: A library for writing modern websockets applications with Arduino (ESP8266 and ESP32)

- 결과

- 1. Arduino IDE를 통해 직접 websocket client 코드를 올린다

기존 AT command를 위해 esp32에 upload한 firmware가 날아가서 at command가 동작하지 않음.

websocket_document

- 2. 1번의 방법을 해결하기 위해 at command firmware을 upload하지 말고, customize를 통해

   Arduino IDE에서 at command를 사용하는 방법

How to add user-defined AT commands

github_esp-at