CS

[WebSocket] 웹소켓(WebSocket)이란?

sujin7837 2022. 6. 28. 00:15
반응형

웹소켓의 등장 배경

웹소켓이 등장하기 이전에 HTTP를  통해 서버로부터 데이터를 가져오기 위해서는 URL을 통한 요청이 유일한 방법이었습니다. 그렇기 때문에 아이디 중복 확인과 같은 유효성 검사는 서버로 데이터를 보내는 중간 과정에서 새로운 페이지 요청이 필요했습니다.

 

이후 Ajax 통신이 등장하게 되었습니다. Ajax는 클라이언트에서 XMLHttpRequest 객체를 이용하여 서버에 요청을 보내면 서버가 응답하는 방식입니다. 이는 페이지 요청이 아닌 '데이터 요청'이라 부분적으로 정보를 갱신할 수 있습니다.

  1. 사용자의 이벤트로부터 JavaScript는 사용자가 작성한 값이 쓰인 DOM을 읽습니다.
  2. XMLHttpRequest 객체를 통해 웹서버에 해당 값을 전송합니다.
  3. 웹서버는 요청을 처리하고 XML, Text, JSON 등을 이용하여 XMLHttpRequest 객체에 전송합니다.
  4. JavaScript를 통해 해당 응답 정보를 DOM에 작성합니다.

Ajax를 사용하면 새로운 HTML을 서버로부터 받을 필요 없이 동일한 페이지에서 일부만 수정할 수 있게 됩니다. 이로써 사용자 입장에서는 페이지 이동이 발생하지 않고 페이지 내부 변화만 일어나므로 그만큼의 자원과 시간을 아낄 수 있게 됩니다.

 

그러나 Ajax도 결국 HTTP를 사용하기 때문에 요청을 보내야 응답이 오므로, 변경된 데이터를 가져오기 위해서 버튼을 누르거나 일정 시간 주기로 요청을 보낸다면 번거로울 뿐더러 자원 낭비도 발생합니다. 이러한 문제를 해결하기 위해 등장한 것이 '웹소켓' 입니다.

 

웹소켓(WebSocket)이란?

웹소켓은 Transport Protocol의 일종으로 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조입니다. 웹소켓은 단순한 API로 구성되어 있으며, 웹소켓을 이용하면 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있습니다. 따라서 클라이언트의 요청이 없더라도 서버로부터 응답을 받을 수 있게 되었습니다. 브라우저는 서버가 직접 보내는 데이터를 받아들일 수 있고, 사용자가 다른 웹사이트로 이동하지 않더라도 최신 데이터가 적용된 웹을 볼 수 있게 해줍니다. 즉, 웹페이지 '새로고침'이나 다른 주소로 이동할 때 덧붙인 부가 정보를 통해서만 새로운 데이터를 제공하는 웹서비스 환경의 제한이 사라지게 된 것입니다.

 

웹소켓을 이용하면 채팅이나 게임, 실시간 주식 차트와 같이 '실시간'으로 요구되는 응용 프로그램의 개발을 한층 효과적으로 구현할 수 있게 됩니다.

 

웹소켓의 작동 원리

  1. 서버와 클라이언트 간의 웹소켓 연결이 HTTP 프로토콜을 통해 이루어집니다.
  2. 연결이 정상적으로 이루어지면 서버와 클라이언트 간에 TCP/IP 기반으로 웹소켓 연결이 이루어집니다.
  3. 일정 시간이 지나면 HTTP 연결은 자동으로 끊어집니다.

기본적으로 웹소켓 API는 아주 간단한 기능만을 제공하므로, SockJS, Socket.io같은 오픈 소스 라이브러리를 많이 사용하고 있습니다. 메시지 포맷 또한 STOMP와 같은 프로토콜을 함께 이용합니다.

 

웹소켓의 문제점

  1. 프로그램 구현이 복잡해질 수 있습니다.웹소켓은 HTTP와 달리 Stateful protocol이므로 서버와 클라이언트 간의 연결을 항상 유지해야 합니다. 만약 비정상적으로 끊겼을 때 적절하게 대응해야 하므로 기존의 HTTP 사용 시와 비교했을 때 코딩이 훨씬 복잡해지는 요인이 됩니다.
  2. 서버와 클라이언트 간의 Socket 연결을 유지하는 것 자체가 비용이 듭니다. 특히나 트래픽 양이 많은 서버의 경우에는 CPU에 큰 부담이 될 수 있습니다.
  3. 오래된 버전의 웹 브라우저에서는 지원하지 않습니다.

 

웹소켓의 사용 예시

  1. 페이스북과 같은 SNS 앱
  2. LOL과 같은 멀티플레이어 게임
  3. 위치 기반 앱
  4. 증권 거래 정보 사이트 및 앱
  5. 화상 채팅 앱
  6. 구글 Doc과 같이 여러 명이 동시 접속해서 수정할 수 있는 툴

 

 

 

출처 : https://choseongho93.tistory.com/266

반응형

'CS' 카테고리의 다른 글

[WebRTC] WebRTC란?  (0) 2022.06.27