AJAX의 한계
AJAX(Asynchronous JavaScript And XML)란? HTTP를 이용해서 클라이언트가 서버에게 필요한 부분의 데이터를 비동기적으로 받을 수 있는 기술이다. AJAX가 나오기 전에는 브라우저가 새로운 요청을 할 때마다 서버에서 전체 웹 페이지를 보내줬는데, AJAX가 나오면서 페이지의 일부만 업데이트할 수 있게 되었다.
JS에서 비동기적으로 데이터를 요청하고 받아올 수 있는 방법
- AJAX의XMLHttpRequest객체
- Fetch API 사용
- axios
AJAX의 한계점
HTTP 기반의 기술로 클라이언트의 요청이 있는 경우에만 서버에서 응답을 줄 수 있다.(=단방향 통신)
실시간으로 데이터가 업데이트 되어야 하는 경우(ex. 채팅방)에는 클라이언트의 요청이 없더라도 서버에서 응답을 내려줄 수 있어야 하는데, AJAX는 단방향 통신이기 때문에 불가능하다.
실시간 통신을 하기 위한 방법(단방향 통신을 이용해 양방향 통신인 것처럼 보이게 해주는 방법)
-
polling: 클라이언트가 서버에 일정 주기로 요청을 보내는 방법이다.
-
long-polling: 클라이언트가 서버로 요청을 보내면 서버 측에서 클라이언트 쪽으로 보낼 데이터가 있을 때까지 연결을 유지한다. 클라이언트 측에서는 서버로부터 응답을 받으면 곧바로 서버에게 다시 요청을 보낸다.
polling은 실시간이라고 보기 애매하고, polling, long-polling 둘 다 클라이언트의 요청이 많아질 경우 서버에 부담이 커지게 된다는 단점이 있다.
Websocket 등장
웹소켓은 HTTP의 단점을 보완하기 위해 나온 프로토콜이다. 단방향 통신만 가능한 HTTP와는 달리 클라이언트의 요청이 없더라도 서버에서 데이터를 보낼 수 있는 양방향 통신이 가능하다.
동작 과정
websocket은 http(80), https(443)과 같은 포트 번호를 사용한다.
1. handshake: 서버와 클라이언트가 연결을 맺기 위한 과정인데 이때 HTTP 프로토콜을 이용한다.
handshake 요청 헤더
GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13handshake 응답 헤더
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
2. protocol switching: handshake 과정이 끝나면 HTTP에서 websocket으로 프로토콜을 변경한다. http인 경우 ws으로, https인 경우 wss로 변경된다.
3. 데이터 교환: 서버와 클라이언트는 데이터 프레임 형식으로 데이터를 주고받는다.
4. 연결 종료: 연결을 종료하려는 쪽에서 close 프레임을 보내고 그에 대한 응답을 받으면 연결이 종료된다.
