채팅, 게임, 주식 차트 등의 실시간 통신이 필요한 서비스를 구현하려면 HTTP프로토콜이 아닌 웹소켓 프로토콜을 사용하는 것이 좋다. http는 요청한대로 응답을 보내주는 단순한 프로코톨로 문서 전달에 굉장히 효율적이어서 오늘날 가장 많이 사용된다. 하지만 문서 전달 이상의 것 ex. 게임, 채팅 등 실시간 통신이 필요한 것들이 생기게 되었고 http를 사용해서는 계속 메세지를 받기만 하는 상황을 구현하기가 힘들게 되었다. ( 1res => 1req ) 또 http 프로토콜은 매 요청, 응답마다 연결을 수립하고 끊기 때문에 비효율적이었다. ==> 웹소켓 탄생
웹소켓 프로토콜이란?
실시간 양방향 통신을 지원하며 한번 연결이 수립되면 클라이언트와 서버 모두 자유롭게 데이터를 보낼 수 있다. 채팅과 같은 연속적인 통신도 계속 연결 재개, 끊음을 반복하지않음으로써 가능하게 되었다. 쉽게말하면 말그대로 소켓을 연결하여 실시간 데이터를 Server <-> 다수의 Clients (요청를 보내지않은 Clients도 포함) 주고받게 된 것이다.
HTTP 프로토콜 -> http 사용 or https (보안 강화된)
웹소켓 프로토콜 -> ws 사용 or wss (보안 강화된)
웹소켓은 http를 이용하여 연결을 수립하며 연결이 된 이후에도 연결할 때 사용했던 포트인 80과 443포트를 이용한다. 연결 수립은 Handshake, 핸드쉐이크를 통해 이루어지며 핸드쉐이크시 HTTP를 이용한다.
핸드 쉐이크는 한번의 http 요청과 http 응답으로 구성되어 있다. 핸드쉐이크가 끝나면 http프로토콜을 웹소켓 프로토콜로 변환하여 통신하는 구조이다. 핸드 쉐이크는 클라이언트가 먼저 HTTP로 웹소켓 연결 요청을 하면서 시작한다.
웹소켓 연결 by HTTP | |
웹소켓 연결 요청, REQUEST | 웹소켓 응답 RESPONSE |
"Connection:Upgrade" & "Upgrade:websocket" 헤더를 통해 웹소켓 요청임을 표시 "Sec-WebSocket-Key" 헤더를 통해 핸드쉐이크 응답을 검증할 키 값을 보냄 * Client & Sever 간의 KEY 생성 |
"Sec-WebSocket-Accept" : SHA-1로 해싱, base64로 인코딩한 값을 보냄 응답코드 101 (==Switching Protocols) : 정상 |
웹소켓 States | 1. Connecting - 연결 중 2. Open - 열림 3. Closing - 닫는 중 4. Closed - 닫힘 (setInterval -> clearInterval) * clearInterval 안하면 메모리 누수 |
이 외에도 WebSocket 연결 시 보조로 이용할 프로토콜 정보 등, 추가적인 정보를 헤더에 담아 보낼 수 있다. 핸드쉐이크가 끝나면 웹소켓 프로토콜을 통해 텍스트를 주고받을 수 있게 된다. * express(HTTP)와 웹 소켓 (WS)은 같은 포트를 공유할 수 있다. * 웹 소켓은 이벤트 기반으로 작동 (addEventListener) = 실시간이므로 항상 대기 * 서버에서 설정뿐만 아니라 클라이언트에도 웹 소켓 적용해 줘야한다. |
참고 블로그 :
https://woowacourse.github.io/javable/post/2020-09-20-websocket/
'study' 카테고리의 다른 글
[타입스크립트 vs 자바스크립트] TypeScript 사용법 / 컴파일 (0) | 2021.08.07 |
---|---|
[ Google API 최신 ] http://localhost로 구글 로그인 로그아웃 API 사용하기 JavaScript node.js (0) | 2021.06.16 |
API란? REST / REST API / RESTful 이란? (0) | 2021.05.26 |
WEB / HyperText / HTTP-get,post / HTML / CSS vs SSS 정리 (1) | 2021.05.25 |
JavaScritp : proto, prototype 프로토, 프로토타입이란? (0) | 2021.04.29 |