천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: , ,

웹 소켓

http 와는 다르게 브라우저와 웹 서버가 실시간으로 통신을 주고 받음

기존 api 는 데이터를 요청하면 그에맞는 데이터를 보내주는 식이였지만, 웹 소켓은 한번 연결해두면 그 연결이 지속되어 주기적으로 서버에 새로운 데이터가 쌓일때마다 요청을 보내, 클라이언트는 데이터를 보여주고, 클라이언트에서 새로운 데이터를 보내면 서버에서 바로 저장해주고 하는식으로 진행한다.

이전에 사용한 기술

  1. Polling

    일정시간마다 요청을 보내, 데이터가 있으면 받아오고, 아니면 없다고 리턴함

    데이터가 생길때보다 아닌경우가 많기에 불필요한 호출이 너무많음 실시간이라기에는 주기적으로 데이터를 받아오는 것 정도

  2. Long Polling

    Polling보다 서버에서 좀 더 길게 대기해서 이벤트를 받음, 대기하는 중에 데이터가 발생하면 클라이언트로 보낸다. 이벤트가 생길때까지 서버는 계속 대기하고 있는다.

    많은 양의 데이터가 쏟아지면 Polling과 다를것이 없어짐

  3. Streaming

    클라이언트가 요청을 보내면 그 이후에는 웹 서버가 무기한 열려있어 언제든 서버 → 클라이언트로 response를 보낼 수 있다.

    실시간으로 데이터를 받을 수 있을거같지만, 중간에 중재자가 연결을 끊어버릴 수도 있고, 라운드로빈 스타일로 작업을 처리하기 때문에 오래걸리면 다시 처리할 수 있어 실시간성을 보장하기가 힘들다 또한 클라이언트 → 서버로는 데이터를 보내기가 힘들기 때문에 WebSocket을 대체할 수 없다

동작 방법

Untitled (18)

  1. 처음에 클라이언트가 서버의 웹소켓을 연결하기 위해서 요청을 보낸다.
  2. 서버는 그에 맞는 응답(수락코드 : 101 Switching Protocols)을 해준다.
  3. 데이터가 들어있는 메세지를 클라이언트에서 보내면 서버에서는 DB에 저장 + 그에 맞는 갱신된 데이터를 보낸다.

1, 2의 과정이 클라이언트-서버의 초기 연결을 설정하기 위한 프로토콜 교환 단계(핸드쉐이킹)이다.

Client 헤더에서 여러가지 값을 포함하여 넘기는데

  • Upgrade : 프로토콜을 전환하기 위한 헤더, 웹소켓 연결을 위해서는 websocket 값을 가지고 나머지 값은 다른 값이라고 인식하여 접속을 중지 시켜버린다.
  • Connection : 접속 요청이후 네트워크 접속을 유지에 대한 정보, 웹소켓 연결시에는 Upgrade 값을 가지고 다른값일 경우 바로 접속을 중지시킨다.
  • Sec-WebSocket-Key : 유효한 요청인지 확인하기 위한 키값
  • Sec-WebSocket-Protocol : 사용하고자 하는 프로토콜 지정
  • Sec-WebSocket-Version : 클라이언트가 사용하고자 하는 웹소켓의 버전

3의 과정은 본격적으로 데이터를 전송하는 단계로 서버-클라이언트가 메세지 의 개념으로 데이터를 주고 받는다.

  • Type : 메세지는 텍스트와 바이너리 유형이 있디. 바이너리 타입은 이미지나 영상같은 큰 사이즈의 데이터를 보낼 수 있다.
  • Payload : 실제 주고받는 데이터가 포함되어 있음

주기적으로 서버-클라이언트는 서로가 살아있는지 확인하기 위해 heartbeat 패킷을 보내고, ping을 체크한다.

참고