• webSocket 기본 개념

• 사용 패키지, ws

• 기본적인 사용방법

code flow

1. ws package 설치( npm i ws)

2. backEnd( /server.js)에 ws 환경 세팅

   기본적으로 express는 webSocket을 지원하지 않는 express에 ws를 함께( incase, 당연히 나눠 구성할 수도 있음**)** 사용할 수 있도록 재구성하기

3. frontEnd( /app.js)에 연결을 요청할 수 있는 환경 세팅

   WebSocket - Web APIs | MDN

   • const socket = new WebSocket(ws://${window.location.host});

4. 연결 및 메시지 주고받기 ( F:B=1:1)

   1. Back( 1-1. 웹소켓 연결) → Front( 1-2. 웹소캣 연결 대기& 확인)

   2. Back( 2-1. 메시지 송신) → Front( 1-2. 2-2. 메시지 수신 대기& 확인)

   3. Front( 3-1 이번엔 브라우저에서 메시지 송신) → Back( 메시지 수신)

5. 연결 및 메시지 주고받기 ( F:B=1:n)

   1. Back에서 받는 소캣을 배열 형태로 바꾸기

6. 닉네임 생성, 닉네임별 메시지 구분하여 주고받기

   1. 닉네임 form과 관련 이벤트 리스너 작성

   2. Front에서 소캣에 던지는 메시지*를 오브젝트{type, payload} 형태로 구성

   여기서 메시지는 클라이언트 메시지 아니고.. -_- 소캣에서 전달하는 데이터*.. 명칭정의에러 주의;(

   3. 소캣 통신 중립성을 위해 데이터*는 전달 전에 string으로 변환 송신, 받을 때는 object로 변환 수신

   4. B는 수신한 데이터를 익명/닉네임 메시지를 구분하여 각 클라이언트에게 전달