웹 소켓

채팅을 구현할 때나 push 알림을 구현해야 할 때 자연스럽게 소켓 방식을 사용한다고 이해하고 있었는데, 여기서 소켓이라는 개념이 정확히 어떤 느낌인지 네트워크 전공수업을 들을 때에도 명확하게 이해하기가 어려웠다. 생각이 난 김에 공부하고, 이를 내 언어로 정리해 보았다.

 

웹 소켓은 오늘날 웹 환경에서 두 컴퓨터 간 통신을 하는 방식 중 양방향 통신을 구현할 수 있는 표준 기술이다. 그간 통신 방식을 훑어보면서 웹 소켓 방식에 대해 이해해보자.

 

단순 터미널 텍스트 통신

• 가장 원시적인 방법이자 통신의 시작
• IP와 포트를 지정하여 특정 컴퓨터 간 터미널에서 텍스트를 주고받았던 방식
• 윈도우 기준 아래처럼 파워쉘에서 그냥 상대 ip 주소와 포트 번호를 지정하여 udp 또는 tcp로 텍스트를 통신하는 개념이라고 이해하면 될 듯 하다.
  

HTTP

출처 : https://swimjiy.github.io/2020-04-04-web-http

• HyperText Transfer Protocol
• ip 주소, 포트 번호를 바탕으로 정해진 양식(URL, http method)으로 단순 텍스트가 아닌, html을 요청할 수 있는 프로토콜
• 유저가 URL을 요청할 때에만 서버가 응답을 보낼 수 있는 poll only 방식이라 사용성에 한계 존재
• 요청이 없으면 화면을 갱신할 수 없는 사용성 한계를 편법으로(?) 극복하기 위해 ActiveX 등의 방법들을 동원

 

Ajax

출처 : undefined

• 프로토콜은 아니지만, 사용자의 요청에 따라 매번 html을 갱신해야 했던 HTTP의 한계를 극복하게 해준 기술
• 전통 http는 클라이언트가 서버에 바로 특정 html을 달라고 요청을 보내는 방식이지만, ajax는 클라이언트가 내부적으로 xmlHttpRequest이라는 객체를 이용하여 클라이언트가 request를 서버에 던지는 방식.
• Json이나 xml 형태로 필요한 데이터를 서버로부터 수신하여 XHR 객체가 DOM을 갱신함. 이는 html을 매번 갱신하지 않고 DOM을 비동기적으로 수정하는 방식이라 페이지를 리로드하지 않고도 갱신할 수 있었음
• xmlHttpRequest는 통신마다 요청 헤더가 필요하기 때문에, 설령 1바이트의 데이터만 송신하고 싶어도 헤더를 구성하는 바이트만 수 킬로바이트이기 때문에 이를 통신해야 함
• 이도 결국 클라이언트가 반드시 요청을 해야만 갱신할 수 있었기에 HTTP의 한계인 polling only 방식의 한계를 벗어나지 못함

 

Socket

출처 : https://iborymagic.tistory.com/92

• HTTP의 polling 한계를 극복하기 위해 HTML5에서는 순수 웹 환경에서 서버가 자발적으로 클라이언트의 요청 없이 데이터를 보내는 push 방식이 가능한 기술 스펙인 "웹 소켓"을 제공.
• 이를 통해 비로소 웹 상에서 클라이언트와 서버가 실시간 양방향 통신이 가능하게 함
• 웹 소켓을 이용하면 클라이언트와 서버는 한 번의 HTTP 접속으로 양방향 메세지를 자유롭게 주고받을 수 있는 stateful protocol임
• 웹 소켓은 HTML5부터 지원하는 표준 기술로, 이전 HTML 버전에서는 이를 활용할 수 없음 (이 떄문에 socket.io라는 node.js 기반 라이브러리에서는 이전 버전에서도 유사한 효과를 누릴 수 있도록 http 프로토콜을 이용하여 구현해 둠)
• socket.io와 같은 websocket API를 이용하여 어플리케이션에 적용할 수 있음.
• 웹 소켓은 최초 연결 확립을 위한 http 통신을 제외하곤 기본적으로 http대신 ws라는 별도의 프로토콜을 이용하여 양방향 통신을 함.
• ajax와 달리 stateful protocol이기 때문에 송신 header도 상당히 작아서 송신 시의 오버헤드가 낮음