웹 소켓 (Web Socket)이란?

서준·2024년 4월 20일

이번에 실무를 경험하게 되면서 실시간으로 CCTV 영상을 화면에 구현하기 위해 웹소켓을 사용하였습니다.웹 소켓의 역할만 두루뭉실하게 알고 있었던 상황인지라 근본적으로 깊게 알아볼 필요가 있다 생각해 포스팅하게 되었습니다.

웹 소켓(Web Socket)

WebSocket은 웹 앱과 서버 간의 지속적인 연결을 제공하는 프로토콜입니다. 이를 통해 서버와 클라이언트 간에 양방향 통신이 가능해집니다. HTTP와는 달리, WebSocket 연결은 한 번 열린 후 계속 유지되므로, 서버나 클라이언트에서 언제든지 데이터를 전송할 수 있다는 것이 특징입니다. 그렇기에 실시간으로 진행되는 통신에서 적극적으로 사용하고 있습니다.

웹 소켓(Web Socket) 의 등장 배경

초기의 인터넷 통신 방식은 주로 HTTP 를 이용한 클라이언트(요청) - 서버(응답) 모델을 통해 진행되었습니다.
즉, 클라이언트가 서버에 요청(Request)을 보내고, 서버가 이에 응답(Response)하는 통신 방식을 따릅니다.

현재 가장 많이 쓰는 기술중 하나이며 대부분의 작업에서는 큰 문제가 없어 보입니다.
하지만, 실시간으로 데이터를 주고받는 데에는 한계점이 발생하게 됩니다.

요청과 응답이 있다는 것은 클라이언트가 서버에게 요청하지 않는 이상 서버는 클라이언트에게 먼저 데이터를 보낼 수 없게 되기 때문에 클라이언트는 항상 새로운 데이터가 있는지 확인을 하기 위해서는 서버에 지속적으로 요청을 보낼 수밖에 없습니다.

그렇게 되면 트래픽을 불필요하게 증가시키고, 이로 인해 서버의 비용이 증가될 뿐더러 요청과 응답사이의 지연시간이 있기 때문에 실시간 통신의 효율성을 저하시킬 수 있습니다.

이러한 상황을 방지하고 해결하기 위해 사용하는 것이 웹 소켓입니다.

웹 소켓(Web Socket)이란?

웹 소켓은 HTML5에 등장 실시간 웹 애플리케이션을 위해 설계된 통신 프로토콜이며, TCP(Transmission Control Protocol)를 기반으로 합니다.
TCP를 기반으로 한 웹 소켓은 신뢰성 있는 데이터 전송을 보장하며, 메시지 경계를 존중하고, 순서가 보장된 양방향 통신을 제공할 수 있습니다.

HTTP와 다르게 클라이언트와 서버 간에 최초 연결이 이루어지면, 이 연결을 통해 양방향 통신을 지속적으로 할 수 있습니다.
즉 전화통화나 채팅같이 양쪽 모두에서 정보를 주고받을 수 있다는 의미입니다.

이때 데이터는 패킷(packet) 형태로 전달되며, 전송은 연결 중단과 추가 HTTP 요청 없이 양방향으로 이뤄집니다.

그렇다면 이제 웹소켓을 연결하는 방식에 대해 알아보겠습니다.

연결 자체는 매우 간단합니다. 클라이언트 환경에서는 별도의 패키지 설치 없이 브라우저 자체에서 web Socet Api를 지원하므로 new 웹소켓만 호출하여 사용하면 됩니다.
이때 ws 라는 특수 프로토콜을 사용합니다

const socket = new WebSocket("wss://example/chat");

소켓이 정상적으로 생성되면 아래 4개의 이벤트를 사용할 수 있게 됩니다.

open – 연결이 성공적으로 되었을 때 발생
message – 데이터를 수신하였을 때 발생
error – 연결 상 에러가 생겼을 때 발생
close – 연결이 종료되었을 때 발생

let socket = new WebSocket("wss://example/chat");

socket.onopen = function(e) {
  alert("[open] 커넥션이 만들어졌습니다.");
  socket.send("안녕!");
};

socket.onmessage = function(event) {
  alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`);
  } else {
    // 예시: 프로세스가 죽거나 네트워크에 장애가 있는 경우
    // event.code가 1006이 됩니다.
    alert('[close] 커넥션이 죽었습니다.');
  }
};

socket.onerror = function(error) {
  alert(`[error]`);
};

웹 소켓(Web Socket) handshake

방금 위에서 본 코드와 같이 WebSocket(url)을 호출해 소켓을 생성하면 즉시 연결이 시작됩니다.
new WebSocket('wss://example/chat') 을 호출해 최초 요청을 전송했다고 가정하고 이때의 요청 헤더를 살펴보겠습니다.

GET /chat
Host: example
Origin: https://example
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13

Origin : 클라이언트 Origin을 나타냅니다.
Connection : 클라이언트 측에서 프로토콜을 바꾸고 싶다는 신호를 보냈다는 것을 나타냅니다. (https ➡️ wss)
Upgrade : 클라이언트 측에서 요청한 프로토콜은 'websocket’이라는 것을 의미합니다. (https ➡️ wss)
Sec-WebSocket-Key : 보안을 위해 브라우저에서 생성한 키로, 서버가 웹소켓 프로토콜을 지원하는지를 확인하는 데 사용됩니다
Sec-WebSocket-Version : 웹소켓 프로토콜 버전을 나타냅니다.

다음으로 서버가 해당 요청을 받으면 웹 소켓 연결을 수락하는 응답을 보냅니다.
해당 응답에는 '101 Switching Protocols' 상태 코드와 함께 응답합니다.

101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: hsBYongNyong24s99EO10UlZ22C2g=

이 과정을 통해서 클라이언트와 서버 간 실시간 통신이 가능한 통로가 열리게 되는 것입니다.

이렇게 웹 소켓 연결이 성립되면, 클라이언트와 서버 간에 실시간 양방향 통신이 가능해집니다.

웹 소켓(Web Socket)의 한계점?

양방향 통신을 하는것에 있어 큰 장점을 가지고 있는 웹소켓은 어떤 단점이 있을까요?

브라우저 지원 : 웹 소켓은 HTML5 사양의 일부이므로 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없습니다.
서버 비용: 웹소켓은 한번 연결되면 별도의 에러나, 지시가 없는한 지속적인 연결을 유지하므로, 많은 수의 웹소켓 연결을 동시에 관리하는 경우 서버의 부하가 증가할 수 있습니다.
상세한 에러처리: 만약 연결이 끊어졌을 시 웹소켓은 연결이 끊어진 이유에 대해 정확히 알 수 없습니다. 따라서 그에 대한 에러 처리 또한 쉽지 않습니다.

이로서, 실시간 양방향 통신을 쉽게 구현할 수 있도록 해주는 웹 소켓(Web Socket)에 대한 정의, 등장 배경, 동작방식, 한계점에 대해서 알아봤습니다. 다음 포스팅에선 실제로 React와 함께 웹소켓을 어떻게 사용했는지를 기록하고자 합니다.

REFERENCE:https://ko.javascript.info/websocket#ref-906
https://developer.mozilla.org/ko/docs/Web/API/WebSocket
https://yong-nyong.tistory.com/90#article-2-3--%EC%9B%B9-%EC%86%8C%EC%BC%93(web-socket)%EC%9D%98-%ED%95%9C%EA%B3%84%EC%A0%90
https://velog.io/@sugenius77/%EC%9B%B9-%EC%86%8C%EC%BC%93Web-Socket