HTTP
http는 요청-응답 기반의 프로토콜
- 연결: 3way-handshaking
- 종료: 4way-handshaking
keep-alive
: 설정한 시간 동안 계속해서 네트워크가 연결
실시간으로 데이터를 받고 싶을 땐?
http polling
서버로 일정 주기 요청
데이터가 사용가능하거나 타임아웃인 경우에 응답
서버가 처리해야 하는 요청이 너무 많음
http streaming
서버에 요청을 보내고 끊기지 않은 연결상태에서 끊임없이 데이터를 수신
클라이언트에서 서버로의 데이터 송신이 어려움
중간에 연결 끊기면 실시간 보장 못 함
WEBSOCKET
서버와 클라이언트 간에 Socket Connection을 유지해서 양방향 통신
이벤트 유도 프로토콜
- Http 포트번호 80(ws) 또는 443(wss) 위에서 동작
- 업그레이드 헤더를 사용해 http에서 websocket으로 변경
연결 과정
- 요청
HTTP 1.1로 요청
웹 소켓 프로토콜로 업그레이드 요청
소켓 버전과 소켓 비밀키 정보 등을 포함
- 응답
HTTP status 101 응답
일정 시간이 지나면 HTTP연결은 자동으로 끊어진다.
데이터 전송 frame
- 헤더 + payload로 구성
- UTF-8 인코딩
800byte에서 수 kbyte의 헤더 크기를 가지고 있는 HTTP와 달리 WebSocket은 수 byte 수준으로 압축이 가능
고려할 점
- 이벤트 유실(유저의 네트워크 환경) : 브로드캐스팅
- 연결이 끊기면 다시 알아서 연결 안 됨 서버 다운/연결 끊길 경우 대비한 로직
- 데이터 파싱: WebSocket은 주고 받는 데이터의 해독은 온전히 어플리케이션에 맡김, sub-protocols을 사용
최적화
-
페이지네이션
-
레이지로딩
-
image/jpeg => image/webp
:webp는 JPG, PNG와 같이 이미지 포맷 형식 중 하나, 최고의 이미지 압축률 -
gzip같은 방식으로 이미지 압축해서 전송
: Accept-Encoding은 클라이언트 단에서 받아들일 수 있는 압축 방식, gzip은 콘텐츠 압축에 있어 원본 데이터 약 70%를 압축 -
Native reversed loop로 변경
-
setTimeout으로 부하가 큰 로직을 큐로 넘기기
-
연결 빈도 수 제한
메모리는 웹소켓을 통한 SEND 커맨드 같이 서버가 서비스 관련 메시지를 보낼 때 보다 SUBSCRIBE/UNSUBSCRIBE(이하 SUB/UNSUB)시 더 많이 사용됨
SUB/UNSUB가 자주 일어나게 되면 처리 속도가 밀림
최대 SUB/UNSUB 빈도 수를 2800TPS로 설정
적절함의 기준은 GC가 발생했을 때 요청 처리 속도가 현저하게 느려지지 않는 수준 -
Vanila JS 리팩토링
컴포넌트가 재활용성이 필요한 페이지나 동적 처리가 많은 스크립트 코드를 제외하곤, 기본적인 랜딩 페이지나 기본 동작 스크립트, 라이브러리들은 모두 리액트를 걷어내고 바닐라(Vanilla) 자바스크립트로 변경하여 위와 같은 성과를 얻을 수 있었다고 함
참고 문헌
https://velog.io/@wldus9503/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-Network3.-WebSocket-%EC%9B%B9-%EC%86%8C%EC%BC%93%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C
https://velog.io/@oyeon/%EC%9B%B9-%EC%86%8C%EC%BC%93WebSocket
https://www.peterkimzz.com/websocket-vs-socket-io/
https://helloinyong.tistory.com/295
