Web Socket 그리고 Socket.io

 

이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다.  

https://wonillism.tistory.com/246

socket.io 기본 채팅 서비스 만들기 (1)

https://wonillism.tistory.com/247

socket.io 기본 채팅 서비스 만들기 (2)

 

 

작성한지 오래 되기도 했고, 잘 기억도 안나서 socket.io의 공식문서를 보면서 어떤 방식으로 작동되는지 알아보자.  

 

WebSocket 이전의 기술

• Polling - 클라이언트에서 일정 주기로 서버에 요청을 보내는 기술이다. 실시간 네트워킹에서 언제 통신이 발생할지 예측할 수 없으므로 서버에게 계속해서 요청을 보내며 응답을 받는 구조이다. 따라서 불필요한 요청과 연결이 생성된다.
• Long Poling - Polling의 단점을 해소하기 위해 요청을 보낸 뒤 서버에서 조금 더 대기하면서 이벤트가 발생할 때 응답하는 방식이다. 응답을 받으면 연결이 끊어지며 재요청한다. 많은 양의 메시지가 쏟아지는 경우 Polling이상의 문제가 발생한다.
• Streaming - 서버에 요청을 보내고 끊기지 않은 연결상태에서 끊임없이 데이터를 수신한다. 클라이언트에서 서버로의 데이터 송신이 어렵다. 

 

WebSocket

WebSocket은 HTML5의 기술이기 때문에 오래된 버전의 웹브라우저는 웹 소켓을 지원하지 않는다. 이를 해결하기 위해 나온 기술 중 하나가 Socket.io이다.

 

만약 간단하기 직접 구현하고 싶으면 이 글을 참고해도 좋을 것 같다.

 

HTTP와 WebSocket을 간략하게 정리하면 다음과 같다.

HTTP

• http://...
• Client - Server
  • request <-> response
  • request가 이루어져야만 response를 하는 방식
  • response가 이루어지고 난 후 request 및 response 데이터는 소멸

WebSocket

• ws://...
• Client - Server, Server - Server
• Client - Server
  • request <-> accept/ non accept
  • Server가 요청 받으면 Client와 Server가 연결되는 방식
    • 연결된 동안은 데이터를 계속해서 유지
    • 연결된 동안은 Client에서 요청이 없어도 Server에서 데이터 전송 가능

 

WebSocket 동작 과정

WebSocket은 http(80), https(443)과 동일한 소켓을 사용하여 통신한다.

WebSocket도 http, https와 같이 ws, wss프로토콜이 존재한다.

 

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

• 빨간 색 박스에 해당하는 Opening Handshake
• 노란 색 박스에 해당하는Data transfer
• 보라 색 박스에 해당하는Closing Handshake

 

Hand Shaking

WebSocket은 연속적인 데이터 전송의 신뢰성을 보장하기 위해 Handshake 과정을 진행한다.

기존의 다른 TCP 기반의 프로토콜은 TCP Layer에서의 Handshake를 통해 연결을 수립하는 반면에, WebSocket은 HTTP 요청 기반으로 Handshake 과정을 거쳐서 연결을 수립한다.

 

좀 더 자세한 내용은 이 분이 글을 매우 잘적어 주셨다.

https://doozi0316.tistory.com/entry/HTTPHTTPS%EB%9E%80-TCP-UDP-HandShake-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC

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

 

Opening Handshake와 Closing Handshake는 일반적인 HTTP, TCP 통신의 과정 중 하나이다. 접속 요청은 HTTP로 한 뒤, WebSocket 프로토콜로 변경된다 (ws://...)

 

WebSocket 프로토콜로 변경되기 위한 HTTP 요청 헤더는 아래처럼 구성되어 있다.

 

요청(Request) 헤더

GET /chat HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://localhost:9000

GET /chat HTTP/1.1
웹소켓의 통신 요청에서,
HTTP 버전은 1.1 이상이어야하고 GET 메서드를 사용해야햔다.

 

Upgrade
프로토콜을 전환하기 위해 사용하는 헤더.
웹소켓 요청시에는 반드시 websocket 이라는 값을 가지며,
이 값이 없거나 다른 값이면 cross-protocol attack 이라고 간주하여 웹 소켓 접속을 중지시킨다.

 

Connection
현재의 전송이 완료된 후 네트워크 접속을 유지할 것인가에 대한 정보.
웹 소켓 요청 시에는 반드시 Upgrade 라는 값을 가진다.
Upgrade 와 마찬가지로 이 값이 없거나 다른 값이면 웹소켓 접속을 중지시킨다.

 

Sec-WebSocket-Key
유효한 요청인지 확인하기 위해 사용하는 키 값

 

Sec-WebSocket-Protocol
사용하고자 하는 하나 이상의 웹 소켓 프로토콜 지정.
필요한 경우에만 사용

 

Sec-WebSocket-Version
클라이언트가 사용하고자 하는 웹소켓 프로토콜 버전.

 

Origin
CORS 정책으로 만들어진 헤더.
Cross-Site Websocket Hijacking과 같은 공격을 피하기 위함.

 

응답(Response) 헤더

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

HTTP/1.1 101 Switching Protocols
101은 HTTP에서 WS로 프로토콜 전환이 승인 되었다는 응답코드이다.

 

Sec-WebSocket-Accept
요청 헤더의 Sec-WebSocket-Key에 유니크 아이디를 더해서 SHA-1로 해싱한 후 base64로 인코딩한 결과이다.
웹 소켓 연결이 개시되었음을 알린다.

 

 

Data Transfer

Opening Handshake에서 승인이 나고나면, 웹 소켓 프로토콜로 Data Transfer 과정이 진행된다.

여기서 데이터는 메시지라는 단위로 전달된다.

 

프레임

데이터 링크계층(이더넷) 통신에서 가장 작은 단위의 데이터이고, 작은 헤더 + payload로 구성되어 있다.

(패킷은 전 네트워크 통신 과정에서 가장 작은 단위의 데이터를 뜻함)

 

메세지

여러 프레임이 모여서 구성되는 하나의 논리적인 메세지 단위

 

Socket.io

양방향 통신을 하기 위해 WebSocket 기술을 활용하는 NodeJS 라이브러리이다.

웹소켓, 폴링, 스트리밍 등 다양한 방법을 하나의 API로 추상화한 것이고, Javascript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있다.

 

 

 

 

https://doozi0316.tistory.com/entry/WebSocket%EC%9D%B4%EB%9E%80-%EA%B0%9C%EB%85%90%EA%B3%BC-%EB%8F%99%EC%9E%91-%EA%B3%BC%EC%A0%95-socketio-Polling-Streaming