Web Socket, 웹 소켓

웹 소켓이란?

 - 웹 표준 프로토콜 중 하나이다.

 - 웹 페이지의 한계에서 벗어나 실시간으로 상호작용 하는 웹 서비스를 만드는 표준 기술 이다.

 - Chrome, Safari, Firefox, Opera등의 브라우저에서 사용할 수 있다.

 - 80번 포트를 통해 웹 서버에 연결한다.

웹 소켓의 특징

양방향 통신(Full-Duplex)

 - 데이터 송수신을 동시에 처리한다.

 - 서버와 브라우저 간 연결을 유지한 상태로 데이터를 교환할 수 있다.

 - 패킷(packet) 형태로 데이터를 송수신하며, 양방향 통신이다.

 - connection의 중단과 추가 요청 없이 양방향으로 이루어진다.

 - 통상적인 HTTP통신은 Client가 요청을 보내는 경우에만 Server가 응답하는 단방향 통신이며, 웹 소켓은 양방향 통신으로 속도가 빠르다.

실시간 네트워킹에 유리하다.

 - 온라인 게임, 트레이딩 시스템과 같이 데이터 교환이 지속적으로 이루어져야 하는 실시간 통신에 적합한 기술이다.

 - 연속된 데이터를 빠르게 노출시킨다.

 

웹 소켓 프로토콜

 - HTTP와 같은 OSI 7계층에 위치하는 프로토콜이며, 4계층의 TCP에 의존한다.

 - url 스킴에 ws, wss를 사용한다.

 - HTTP를 이용하여 연결되며, 연결이후 80/443포트를 이용한다.

 - 핸드쉐이크를 통해 연결된다.

Web socket handshake

 

웹 소켓 핸드쉐이크는 먼저 클라이언트가 HTTP로 웹 소켓 연결 요청을 하며 시작이 된다.

HTTP버전은 1.1 이상이어야 하며, 반드시 GET방식으로 요청해야 된다.

클라이언트는 다음과 같은 내용을 헤더에 넣어서 HTTP요청을 보낸다.

GET /chat HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Origin: http://example.com:8080

여기서 Upgrade: websocket, Connection: Upgrade 헤더를 통해 웹소켓 요청임을 알린다.

그리고 Sec-WebSocket-Key를 통해 핸드쉐이크 응답을 검증할 키값을 보낸다.

클라이언트는 이외에도 여러 메시지나 서브 프로토콜을 보낼 수 잇다.

 

이에 대한 서버의 응답도 HTTP를 이용한다. 정상적인 응답의 상태 코드는 101(Switching Protocols)이다.

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

Sec-WebSocket-Key헤더를 통해 받은 값의 특정 값을 붙인 후 SHA-1(암호화 알고리즘)으로 Hashing한 후 base64로 인코딩 한 값을 Sec-WebSocket-Accept헤더에 보낸다. 클라이언트는 이 헤더를 통해 정상적인 핸드쉐이크인지 검증한다.

클라이언트가 정상적으로 응답을 받으면 핸드쉐이크는 종료되고 이후부터 웹소켓 프로토콜을 통해 데이터 통신을 한다.

핸드쉐이크 과정에서 서버는 잘못된 값을 가지거나 형식이 잘못된 헤더를 가진 요청을 클라이언트로 부터 받은 경우, "400 Bad Request"응답으로 Socket을 종료하여야 한다.

 

Upbit Open api의 웹소켓을 이용하여 실시간 데이터를 받아와 보았다.

아래는 업비트의 데이터를 가져오는 소스코드(typescript 사용)

const ws: w3cwebsocket = new w3cwebsocket("wss://api.upbit.com/websocket/v1");
ws.binaryType = "arraybuffer";

ws.onopen = () => {
  if(marketList.data){
    const sendData = JSON.stringify([{ticket:"test"},{type:"ticker", codes:marketList.data}]);
    ws.send(sendData);
  }
}

ws.onmessage = (e: any) => {
  const enc =  new TextDecoder("utf-8");
  const data = JSON.parse(enc.decode(e.data));
  console.log(data);
}

ws.onerror = (e: any) => {
  console.log(e);
  ws.close();
}

 

아래의 사진은 코인 데이터를 가져와서 콘솔창에 출력시킨 모습이다.

끊임없이 데이터가 들어오는 모습이 인상적이다.

 

웹소켓을 이용한 코인 데이터 가져오기

 

 

참고 : https://woowacourse.github.io/javable/post/2020-09-20-websocket/

웹소켓에 대해 알아보자

https://ko.javascript.info/websocket

웹소켓

https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_servers

웹소켓 서버 작성하기 - Web API | MDN