웹소켓 (WebSocket) 이란?

개요

웹소켓 통신이란 무엇인지 알아보자.

웹소켓 요약

웹 소켓은 사용자의 브라우저와 서버 간 양방향 인터렉티브 통신 세션을 열 수 있게 해주는 기술이다. 클라이언트는 실시간으로 서버에 메세지를 보낼 수 있고, 폴링방식 없이도 서버로 부터 이벤트에 기반한 (event-driven) 응답을 받을 수 있다.

웹소켓 연결은 유닉스 스타일의 소켓 표준과 비슷하지만, 둘은 연관성이 없다.

역사

웹소켓은 TCP 기반 소켓 API 를 대체할 목적으로 HTML5 사양에서 TCPConnection 으로 처음 참조되었다.

웹소켓과 HTTP 비교

웹 소켓 통신은 웹에서 가장 범용적으로 쓰이는 HTTP 와 주로 비교된다. HTTP 로도 풀링을 통해 소켓 통신과 비슷한 구현을 할 수 있지만, 그 성능이 현저히 떨어진다.

차이점

• HTTP 는 단방향 통신이며, 웹 소켓은 양방향 통신이다.
  • 웹소켓은 전이중 통신을 사용한다고도 말할 수 있다.
  • HTTP 로도 풀링 방식을 이용하면 반이중 통신을 구현할 수 있긴 하다.
• 웹 소켓은 실시간 통신을 목적으로 만들어졌다.
• 웹 소켓은 HTTP 업그레이드 헤더를 사용하여 HTTP 프로토콜에서 웹소켓 프로토콜로 변경한다.
• 웹 소켓은 TCP 위에서 메세지 스트리밍을 가능하게 한다.
• 웹 소켓은 Stateful Protocol 이며, HTTP 는 Stateless Protocol 이다.

공통점

• OSI 7 계층인 응용계층에 위치한다.
• OSI 4 계층인 TCP 에 의존한다.
• 웹소켓과 HTTP 모두 포트 번호 80과 443 위에서 동작한다.
  • 이로 인해 HTTP 통신이 정상적으로 작동한다면, 웹소켓을 위해 방화벽 설정을 따로 변경할 필요 없다.

웹소켓 프로토콜 핸드셰이크 예제 살펴보기

클라이언트 요청

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

통신 헤더 Connection 키의 값으로 Upgrade 헤더를 보낸다.

서버 응답

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

자바스크립트 구현 예제 살펴보기

// Creates new WebSocket object with a wss URI as the parameter
const socket = new WebSocket("wss://game.example.com/ws/updates");

// Fired when a connection with a WebSocket is opened
socket.onopen = function () {
  setInterval(function () {
    if (socket.bufferedAmount == 0) socket.send(getUpdateData());
  }, 50);
};

// Fired when data is received through a WebSocket
socket.onmessage = function (event) {
  handleUpdateData(event.data);
};

// Fired when a connection with a WebSocket is closed
socket.onclose = function (event) {
  onSocketClose(event);
};

// Fired when a connection with a WebSocket has been closed because of an error
socket.onerror = function (event) {
  onSocketError(event);
};

JS 에서 자체적으로 제공하는 WebSocket 오브젝트 API 를 이용하여 쉽게 구성할 수 있다.

보통은 Socket.io 라는 라이브러리를 통해 웹소켓을 이용한다.

레퍼런스

• https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93
• https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
• https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API