[220317] websocket (웹소켓) 개념 정리

기존 지식 정리

1. HTTP (HyperText Transfer Protocol)란?

인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙)

 

HTTP 요청 (request)
웹 페이지를 열고 폼에 내용을 입력하면 웹 서버와 웹 브라우저가 데이터를 교환한다.
웹 브라우저는 데이터 헤더를 붙여 오픈할 웹페이지의 주소를 웹 서버에 요구한다.

 

HTTP 응답 (response)
웹 페이지의 요청을 받은 웹 서버는 서버 정보 or 처리 결과를 나타내는 오류 코드와 메시지의 헤더를 웹 페이지 콘텐츠에 붙여 응답한다.

 

 

 

2. AJAX(Asynchronous Javascript And XML)란?

브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위.

페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트.

간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다.

 

 

3. 웹소켓

Transport protocol의 일종으로 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조다.

단순한 API로 구성되어있으며, 웹소켓을 이용하면 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있다.

 

 

---

웹소켓이 http와 ajax와 다른점

최초에만 이루어지는 핸드셰이크 과정

프론트와 백엔드가 서로 Connection을 맺기로 했다면, 사전답사처럼 서로간에 최초요청과 응답이 한번씩 오고 간다.

이 사전답사 행위를 handshake라고 한다.

(한국어로도 악수! 사딸라 오케이 땡큐!)

여기까지는 http와 별 다를바가 없다.

 

다른점 1)  1요청 1응답 파괴

하지만 웹소켓인 이렇게 Connection을 맺고난 후에는 클라이언트가 한번 이상의 요청을 보낼 수 있게 된다.

이게 바로 1 요청에 1 응답이 원칙이었던 http와 ajax와 다른 점이다.

 

다른점 2) 일방적인 관계 파괴

서버는 응답 말고도 클라이언트에게 요청도 보낼 수 있게 된다.

반대로 클라이언트는 요청 말고도 응답을 받을 수 있게 된다.

 

다른점 3) http통신과 ws(웹소켓)통신을 동시에 한다.

 

정리

1) 실시간 데이터 교환이 가능하게 되며, 채팅, 로그인 실시간 확인, 경매사이트를 구현할 수 있다.

2) 지속적인 응답을 받기위하여 의미없는 요청을 남발하지 않아도 되어 자원을 아낄 수 있다.

3) 단, 웹소켓 방식을 지원해주지 않는 프로토콜에서는 동작을 하지 않는다.

4) 원래는 http통신과 ws통신이 서로 다르다 = 프로세스가 다르게 작동 = port가 서로 다름

5) 이제는 4)를 쉽게하기위해 2개의 포트를 한 포트로 공유할 수 있게 만들어놓은 방법이 나옴.