웹 실시간 통신 방법(웹소켓, polling,long polling, streaming)

 

먼저 웹 실시간 통신방법에 대해서 알기 위해서는 http에 대해서 알아야한다.

브라우저에서는 HTTP Protocol을 사용해서 데이터를 주고 받기 때문이다.

 

HTTP란? 쉽게 말해서 클라이언트와 서버가 주고 받는 통신이라고 생각하면 된다.

 

이러한 http는 

⇒ 클라이언트가 보낸 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어버리는 비연결성의 성질을 가지고 있음.

⇒ 따라서 HTTP는 request, response 형태의 단방향 통신이며 한번 통신을 할때마다 많은 양의 데이터를 header에 담아서 보내게 됨 .

 

이렇게 http는 단방향성이기 때문에 실시간 통신을 하는것처럼 보이기 위해서 서버에게 계속적으로 요청을 보내야하고 요청을 보낼때마다 불필요하게 많은 양의 데이터를 보내야한다는 단점이 있다.

그래서 이러한 단점을 보완하기 위해서 양방향 통신방식인 웹소켓 방식을 사용하게 된다.

 

 

WebSocket이란? 

 

 

• 양방향 통신
• 요청-응답 방식이 아닌 open-close방식임.
• 웹소켓을 이용해 서버와 연결을 하면 브라우저-서버가 통신이 열리고 원하는 순간까지 계속 열림. 브라우저, 서버 둘다 메세지를 보내고 받을 수 있음.

처음 웹소켓을 연결할때 http를 사용하지만 그 후 통신은 websocket 프로토콜로 이루어진다.

 

WebSocket 작동방식

웹 소켓 동작 과정은 크게 세가지로 나눌 수 있다.

1. 빨간 색 박스에 해당하는 Opening Handshake
2. 노란 색 박스에 해당하는 Data transfer
3. 보라 색 박스에 해당하는 Closing Handshake

Handshake

직역하면 ‘악수’라는 뜻!

우리가 사람들과 만나면 악수하듯이, 브라우저와 서버의 연결을 시작하게 해주는 단계를 Handshake단계라고 한다.

 

Opening Handshake - 통신 연결

 

이전 설명에서 처음 웹소켓을 연결할때 http를 사용하지만 그 후 통신은 websocket 프로토콜로 이루어졌다고 했다. 

그래서 최초로 접속할 때에에는 HTTP Header를 사용하게 된다. 

 

WebSocket을 사용하겠다는 HTTP 요청을 하고 OK 승인을 받으면

통신 규약을 HTTP에서 websocket으로 upgrade시키게 된다. 

 

 

HTTP Upgrade request

connection - Client 측에서 서버로 이제부터 웹소켓을 사용하기위해서 protocol을 Upgrade(바꾸자!)하고 싶다는 신호를 보냄.

upgrade - websocket으로 바꾸고 싶어!

 

HTTP 101 response

Client에서 이렇게 요청하면, 이에 대한 응답으로 handshake 응답을 받는데 이 때, 서버가 Protocol 전환을 승인하면 응답코드 101이 들어오게 됨.

⇒ 이렇게 데이터 통신이 시작됨.

 

Data transfer - 데이터 전송

 

이제부터 데이터를 주고 받을 수 있고, ‘프레임’이라는 데이터 단위로 전달됨.

데이터는 서버, 클라이언트 양측에서 모두 보낼 수 있고, 프레임 종류는 다양함.

• 텍스트 프레임 - 텍스트 담긴 프레임유형
• 바이너리 프레임 - 바이너리 데이터가 담긴 프레임유형
• 핑/퐁 프레임 - 커넥션 유지되는지 확인하기 위한 프레임유형

 

Closing Handshake - 통신 종료

 

데이터 송수신이 완료되면, 통신을 종료하기 위한 frame을 전송할 수 있다. 종료하고 싶은 쪽에서 연결을 종료한다는 frame을 보내면, 상대쪽 응답에서 close frame을 전송해서 연결 종료

 

 

 

웹소켓 말고도 다른 통신 방법도 존재한다. 

 

실시간 통신 방법

---

1. Polling

클라이언트와 서버가 실시간 통신을 하는 것처럼 느끼기 위해 클라이언트가 일정 간격 동안 계속해서 요청을 보내는 방식

→ HTTP통신에서 서버는 클라이언트에게 요청을 받기전에는 먼저 응답을 줄 수 없기때문에 계속해서 서버에게 요청을 보낸다.

 

• 시간 간격을 줄여서 실시간처럼 통신하는것처럼 보이게 한다고 하더라도 HTTP는 단발성 통신이기 때문에 부가적인 데이터가 header에 담겨져있고 이를 매 요청과 응답마다 중복해서 보내기 때문에 서버에 부하가 가게 된다.
• 주기에 맞춰서 요청을 날리는것이기때문에 실시간성이 보장되지않는다. (내가 메세지를 보내고 바로 답이 와도 요청 주기가 1분이라면 1분동안 응답을 받을 수 없다.)

 

2. Long Polling

polling과 같이 무한히 서버에게 요청을 보내는 것은 동일하다. 하지만 Long polling은 클라이언트에서 요청을 보내고 이벤트가 발생할때까지 기다린다.

요청을 보냈을때 서버가 응답을 바로 보내지 않고 특정 이벤트나 타임아웃이 발생했을때 응답을 전달하는 방식이다.

• 변경된 데이터가 있을때만 응답이 이루어지기때문에 polling방식보다 서버의 부하도 적고 실시간성도 높다.
• 하지만 데이터가 자주 바뀔시에는 여전히 많은 데이터가 담긴 헤더를 매번 보내야하기때문에 http프로토콜의 한계는 여전히 가지고 있다.

 

3. streaming

이벤트가 발생했을때 응답을 내려주되, 응답을 완료시키지 않고 계속 연결을 유지하는 방식이다.

• 응답마다 다시 요청을 하지 않아도 되므로 효율적
• 연결시간이 길수록 유효성 관리 부담 발생
• HTTP통신을 하기때문에 여전히 불필요하게 큰 헤더를 매번 보내야함
• client에서 더 이상의 요청을 할 수 없게 된다.

 

 

참고 사이트

---

웹에서의 실시간 통신

Web Socket 이란?

[node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법

Frontend를 위한, Socket과 WebSocket

[node.js] Socket.io 모듈을 이용한 채팅 프로그램 만들기

[SOCKET] 📚 Socket.IO 사용 해보기

소켓 통신방식과 http 통신방식의 차이

웹에서의 실시간 통신

HTTP/HTTPS란? TCP, UDP, HandShake 개념 정리

WebSocket이란? 개념과 동작 과정 (+socket.io, Polling, Streaming...)

Web Socket 이란?

소켓과 웹소켓

HTTP 통신과 Socket 통신의 차이점

HTTP 통신과 TCP 통신 그리고 웹 소켓에 대한 기본 개념 정리

08. 기술면접 - 네트워크 - Socket.io 와 Websocket 의 차이

[Network]소켓과 웹소켓의 차이점

소켓 프로그래밍. (Socket Programming)

[네트워크 프로그래밍] Http 프로그래밍과 Socket 프로그래밍 차이

웹에서의 실시간 통신