웹소켓이란?

WebSocket

이 글에서는 브라우저 기반 애플리케이션에 효율적인 양방향 통신을 구현하기 위한 기술인 웹소켓에 대한 개념을 짚어 보도록 합니다.

오랫동안 큰 진전이 없었던 통신 관련 기술이지만 웹소켓의 등장으로 더욱 빠르고 간단한 웹 애플리케이션 개발이 가능해졌습니다.

웹소켓이란?

웹소켓(WebSochet)은 서버와 클라이언트 간의 효율적인 양방향 통신을 실현하기 위한 구조입니다.

최근에는 Gmail 처럼 데이터의 실시간 특성을 중시한 웹 애플리케이션이 많이 등장하여 많은 주목을 받고 있습니다.

자바스크립트의 처리 성능이 크게 개선된 현재, 웹 애플리케이션의 성능면에서 병목 현상이 나타나는 것은 네트워크 통신 부분으로 웹소켓은 실시간 웹을 구현하기 위한 핵심 기술로 기대받고 있습니다.

웹소켓은 매우 단순한 API로 구성되어 있습니다. 

웹소켓을 이용하면 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있습니다.

XMLHttpRequest와 Server-Sent Event를 조합해서 양방향 통신을 구현하는 경우와 비교해 통신 효율이 좋고, 설계나 구현도 간단해지는 장점이 있습니다.

XMLHttpRequest

클라이언트에서 서버 방향으로의 비동기 통신은 XHR(XMLHttpRequest)의 등장으로 실현됐습니다.

정확하게는 그 이전부터 iframe이나 img 등을 써서 억지로 비동기 통신을 구현하는 방법은 있었지만 XMLHttpRequest 가 표준 통신 방법으로 지위를 확립함으로써 웹 애플리케이션의 비동기 통신 관련 기술이 비약적으로 발전했습니다.

하지만 XHR에는 크로스 오리진 통신이 불가능하다는 큰 문제가 있습니다.

오리진(origin)이란 스키마, 호스트명, 포트 번호의 조합으로 표현되는 식별자를 말합니다.

웹 스토리지에 보존되는 데이터는 동일 오리진으로 동작하는 프로그램에서만 공유됩니다. 다른 오리진에서 동작하는 프로그램에서는 웹 스토리지를 참조할 수 없습니다.

이처럼 동일 오리진의 경우에만 접근을 허가하는 것을 동일 출처 정책(Same Origin Policy)이라고 합니다. 또한 반대로 어떻게 해서 다른 오리진 간의 접근을 안전하게 할 것인가에 초점을 둔 크로스 오리진 자원 공유(CORS, Cross-Origin Resource Sharing)이라는 용어도 있습니다.

오리진은 HTML5 관련 기술의 보안에 대해 이야기할 때 자주 등장하는 용어입니다.

크로스 오리진 통신을 구현하기 위해 JSONP등의 우회책이 고완됐고, 현재도 폭넓게 이용되고 있습니다.

XHR은 기존의 무상태 통신 기술의 연장선상에서 고안된 기술입니다.

웹소켓 통신과 비교하면 XHR에서는 통신할 때마다 꼭 요청 헤더가 부여되기 때문에 불과 1바이트의 정보를 송신하고 싶어도 수 킬로바이트에 달하는 쓸데없는 정보를 보내야 합니다.

예를 들어, 채팅 입력을 한 문자마다 서버에 송신하고 싶은 경우처럼 실시간을 추구한 애플리케이션에서는 이 점이 성능 차이로 이어질 가능성이 크다고 할 수 있습니다.

Server-Sent Events

서버에서 클라이언트 방향으로 통신(푸시 통신) 기술로서는 오랫동안 표준이라고 불릴 만한 요소 기술이 존재하지 않았기 때문에 해킹에 해킹을 더한 다소 억지스러운 방법이 널리 이용됐습니다.

현재 W3C에서는 서버에서의 푸시 통신을 깔끔하게 실현하기 위해 Server-Sent Events 의 사양 검토가 진행되고 있습니다.

Server-Sent Events의 특징은 사양을 따르는 포맷으로 서버 사이드에서 일반적인 HTTP 응답을 반환하는 것만으로 푸시 통지가 실현되기 때문에 기존의 HTTP 서버에 관한 노하우를 그대로 살려 설계나 구현을 할 수 있다는 것입니다.

또한 프로토콜이 매우 간단하고 사양도 안정되어 있어서 비교적 안심하고 이용할 수 있습니다.

단지 푸시 통신은 이미 시장에서 큰 수요가 있음에도 불구하고, Server-Sent Events나 웹소켓을 이용할 수 없는 구형 브라우저가 아직 존재하고 있습니다.

Jaehee's WebClub

[발췌] 퍼펙트 자바스크립트(p501)