WEB) 초보자를 위한 웹소켓(WebSocket) 설명회

우리가 사용하는 다양한 어플리케이션 중에는 카카오톡이나 공유 문서, 게임처럼 실시간으로 화면이 변경되며 데이터가 수정되는 모델들이 존재합니다.

이러한 웹 어플리케이션들은 어떻게 데이터와 화면을 변경하는 걸까요?

 

HTTP의 이해

서버-클라이언트 구조에서 가장 보편적으로 사용되는 프로토콜은 HTTP 프로토콜입니다.

HTTP의 특징에 대해 알아보기 위해 이전에 작성한 HTTP 관련 글을 읽어보시기 바랍니다.

HTTP) 초보자를 위한 HTTP 설명회

글에서 볼 수 있는 것처럼 HTTP에서 클라이언트가 서버의 특정 URI에 대한 요청을 보내면, 서버가 해당 URI의 처리 결과를 클라이언트에게 전달하고 연결을 끊어버리며, 이를 통해 단방향성(오직 클라이언트->서버로만 요청이 가능)과 비연결성, 무상태성이라는 특징을 확인할 수 있습니다.

 

클라이언트(브라우저)가 화면을 업데이트하기 위해서는 서버에게 새로운 요청을 보내, 새로운 정보를 얻어 다시 화면을 렌더링 하는 과정을 거쳐야 합니다.

예를 들어 수강 신청이나 공연 등의 티켓팅을 위해서는 페이지를 새로고침하다가 남들보다 빠르게 신청해야 합니다. 이는 HTTP 프로토콜의 단방향성 때문이며, 오직 클라이언트가 요청을 해야지 새로운 정보를 받을 수 있습니다.

이렇게 새로 요청을 하고, 페이지를 응답받아 다시 사용자에게 보여주는 과정을 개선시킨 것이 Ajax라는 클라이언트 기술입니다.

 

간단하게 Ajax 이해하기

아약스X 에이잭스O

핵심부터 말하자면 Ajax는 웹 페이지를 부분적으로 업데이트하기 위한 비동기 HTTP 통신 기술입니다.

 

Javascript는 원래 브라우저의 HTML 코드를 조작하기 위해 사용되던 스크립트 언어입니다.

Javascript를 사용해 페이지의 일부만 수정(DOM)할 수 있으며, 자바스크립트의 XHR(XmlHttpRequest)라는 객체를 통해 비동기적으로 데이터를 보내고 검색할 수 있습니다.

이렇게 자바스크립트와 XHR을 통해 페이지 이동 없이 페이지의 일부를 동적으로 업데이트하는 클라이언트 기술을 Ajax(Asynchronous Javascript And Xml)이라고 합니다.

 

Ajax를 통해 일부만 수정하는 식으로 요청을 보다 쉽고 가볍게 만들 수 있으나, Ajax로 ❗️실시간성❗️을 구현할 때 클라이언트는 일정 주기로 서버에 요청을 보내고 데이터를 받아오는 폴링 방식을 사용하기 때문에 서버에 가해지는 부하가 엄청나게 커집니다.

카카오톡으로 예를 들자면 1000명이 참여한 오픈 채팅방에서 모든 클라이언트가 1초에 3번씩 요청을 보낸다고 가정하면 서버에서는 1초에 3000개의 [ 연결 생성 -> 요청 처리 -> 연결 제거]의 과정을 거칩니다.

 

이러한 한계 때문에 HTML5에서 WebSocket이라는 새로운 프로토콜이 도입됩니다.

 

반응형

WebSocket 특징

WebSocket은 보안 여부에 따라 ws 또는 wss로 표현됩니다.

각이 많고 강해보이는 공대 공학적 디자인

Ajax의 한계는 클라이언트가 요청을 하기 전까지는 서버가 클라이언트에게 데이터를 전송할 수 없다는 단방향성➡️에 기인합니다.

클라이언트와 서버의 요청-응답 계층으로 제한된 기존 HTTP 방식과 달리 웹소켓은 커넥션을 유지하며 양방향 통신을 통해 요청이 없어도 서버에서 클라이언트에게 데이터를 전송할 수 있게 해 서버의 부하를 늘리지 않으면서 실시간성을 구현할 수 있게 합니다.

웹소켓 프로토콜은 HTTP 프로토콜과 마찬가지로 TCP 프로토콜을 사용해 호환성을 높였는데, 웹소켓 프로토콜을 통해 연결되는 과정은 다음과 같습니다.

1. 클라이언트는 웹소켓으로 서버와 연결하기 위해 Upgrade 헤더를 포함한 HTTP 요청
2. 이후 서버가 Upgrade 헤더를 확인하고, 웹소켓 프로토콜을 사용해 연결을 유지

HTTP에서 요청-응답 이후 연결이 닫힌 것과 달리 웹소켓 프로토콜에서는 Upgrade를 통한 핸드셰이크 과정 이후 클라이언트 또는 서버가 연결을 닫을 때까지 연결을 유지합니다.

 

웹소켓 프로토콜은 실시간성이 필요한 상황에서 커넥션 수립에 드는 오버헤드의 감소나 양방향으로 통신이 가능하다는 측면에서 장점을 갖지만, 구현이 복잡하고 HTTP와 반대로 Stateful 한 연결이 이루어지기 때문에 접속 트래픽이 많은 경우 커넥션 유지에 메모리가 많이 필요하게 됩니다.

또한 HTML5에 도입된 기술인 만큼 이전 버전의 브라우저에서 지원하지 않을 수 있습니다.

(⚠️사실 웹소켓이 표준화된 지는 10년이 넘습니다..)

 

브라우저 웹소켓 지원 여부 통계

Web Sockets | Can I use... Support tables for HTML5, CSS3, etc

 

2022년 10월 기준 약 2.3퍼센트의 사용자가 웹소켓을 지원하지 않는 브라우저를 사용하고 있습니다.(이마 탁)

 

브라우저 호환 문제를 해결하기 위해 Socket.io라는 라이브러리를 사용하는 것을 생각할 수 있는데, WebSocket을 기반으로 구현된 Socket.io는 기본적으로 웹소켓 프로토콜로 통신, 웹소켓을 사용할 수 없을 때 자동 재연결, 대기 시간 최적화, 다른 통신 방법을 사용해 다양한 브라우저와 네트워크 조건에 대해 호환될 수 있도록 합니다.