브라우저와 서버는 기본적으로 무상태성과 비 연결성을 가진다.
그러나 경우에 따라 실시간으로 업데이트가 이루어져야 할 경우, 서로의 통신이 주기적으로 이루어져야 할 떄가 있다. (ex, 실시간 채팅)
그런 경우, 주기적인 통신의 방법으로 크게 4가지가 존재한다.
클라이언트가 주기적으로 서버에게 데이터요청을 하고, 서버는 이에 대해 응답하는 방식이다.
예를들어, 실시간 업데이트를 생각해보면 주기적으로 Ajax 요청을 날려서 서버에게 업데이트의 내용을 받아내는 방식이다.
Ajax 요청의 주기가 너무 짧으면, 서버가 그만큼 한 브라우저에 응답하는 양도 많아지므로 서버에 부담이 커진다.
반대로 요청의 주기가 너무 길면, 브라우저에 보이고 있는 데이터의 신선도가 떨어지기 떄문에 효용적이지 못하다.
추가적으로, 보낼 데이터가 없음에도 불구하고 연결이 계속 유지되기 때문에 서버의 리소스가 낭비된다.
HTML 5의 표준안이다
TCP/IP 스택 위에 구축되는 전송계층으로, http handshake과정 이후 연결이 완료되면 HTTP를 웹소켓 프로토콜로 스위칭한다.
그 이후 만들어지는 ws(일반) wss(SSL) 소켓이 형성되고, 이 소켓을 통해 통신한다
웹소켓 요청이 이루어질때 만들어지는 초기 http request는 다음과 같다
// 만약 new WebSocket("wss://javascript.info/chat"); 코드를 통해 요청을 만들어 전송할 경우,
GET /chat
Host: javascript.info
Origin: https://javascript.info
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13
위의 내용처럼, 서버에게 Upgrade라는 요청으로 웹소켓, 그리고 자신의 웹소켓 아이디인 key를 만들어 전달하는 것을 볼 수 있다.
// 매 100ms마다 소켓객체의 버퍼를 확인하여 비워져 있을 때에만 소켓을 전송하게 된다.
setInterval(() => {
if (socket.bufferedAmount == 0) {
socket.send(moreData());
}
}, 100);