WebSocket이란 무엇이며 어떻게 작동하는가?

WebSocket은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 실시간 통신 프로토콜로, 낮은 대기 시간과 높은 빈도의 데이터 업데이트가 필요한 애플리케이션에 적합합니다.

WebSocket은 어떻게 작동하나요?

WebSocket은 단일 TCP 연결을 통한 전이중 통신 프로토콜입니다. 클라이언트와 서버 간의 지속적인 연결을 설정하여 양방향 실시간 통신을 가능하게 합니다. WebSocket은 HTTP 프로토콜을 사용하여 핸드셰이크를 시작한 후 WebSocket 연결로 업그레이드되어 양측이 직접 데이터를 전송할 수 있게 합니다. 이 지속적인 연결은 통신 오버헤드를 줄이고 서버가 클라이언트에게 데이터를 능동적으로 푸시할 수 있게 하여 클라이언트가 자주 요청하지 않아도 됩니다.

WebSocket vs HTTP

오버헤드 감소: WebSocket은 전통적인 HTTP 연결에 비해 오버헤드가 적으며, 각 통신마다 연결을 반복적으로 설정하고 해제할 필요가 없어 지연 시간을 줄이고 네트워크 자원을 절약합니다.
양방향 통신: WebSocket은 클라이언트와 서버 간의 동시에 이루어지는 양방향 통신을 허용하여 실시간 애플리케이션에서 더 빠른 데이터 전송 및 응답 시간을 가능하게 합니다.
효율적인 데이터 교환: WebSocket은 바이너리 데이터 전송을 지원하여 더 효율적이고 압축된 데이터 교환이 가능하며, 이는 멀티미디어 스트리밍, 게임 및 고속 데이터 전송이 필요한 다른 애플리케이션에 유익합니다.
낮은 지연 시간: 지속적인 연결을 유지함으로써 WebSocket은 각 데이터 교환을 위한 새로운 연결을 설정하는 데 드는 지연 시간을 줄여 더 빠르고 반응성이 뛰어난 통신을 제공합니다.
서버 푸시 기능: WebSocket은 서버가 클라이언트에게 데이터를 푸시할 수 있도록 하여 클라이언트가 서버에 지속적으로 업데이트를 요청할 필요가 없게 하여 네트워크 자원의 효율적인 사용과 불필요한 데이터 전송을 줄입니다.

전반적으로 WebSocket의 네트워크 자원 효율적인 사용, 지연 시간 감소 및 실시간 양방향 통신 지원은 다양한 웹 기반 애플리케이션에서 네트워크 최적화를 위한 귀중한 도구로 만듭니다.

왜 WebSocket을 사용하나요?

WebSocket은 낮은 지연 시간과 높은 빈도의 데이터 업데이트가 필요한 실시간 애플리케이션 및 서비스에 사용됩니다. 특히 실시간 채팅, 온라인 게임, 라이브 스포츠 업데이트, 금융 거래 플랫폼, 협업 편집 도구 등과 같은 애플리케이션에 유용합니다. WebSocket은 전통적인 HTTP에 비해 클라이언트와 서버 간의 더 빠르고 효율적인 양방향 통신을 가능하게 하여 이러한 유형의 사용 사례에 특히 적합합니다.

WebSocket 서버 (Node.js + ws)

const WebSocket = require('ws');
  
const wsk = new WebSocket.Server({ port: 8080 });
  
wsk.on('connection', ws => {
  ws.on('message', message => {
    console.log('클라이언트로부터 받은 메시지: %s', message);
      
    // 클라이언트 메시지에 대한 응답  
    ws.send(`저는 서버이며, 당신이 저에게 보낸 메시지는: ${message}입니다.`);  
  });  
  
  ws.on('close', () => {  
    console.log('클라이언트가 연결을 끊었습니다.');  
  });

클라이언트 (JavaScript)

// WebSocket 연결 생성  
var socket = new WebSocket("ws://localhost:8080");  
  
// 연결이 열릴 때 수행할 작업  
socket.onopen = function(event) {  
  console.log("연결이 열렸습니다.");  
  // 초기화 메시지 전송
  socket.send("저는 클라이언트이며 연결되었습니다!");  
};  
  
// 서버 데이터 수신 시 수행할 작업  
socket.onmessage = function(event) {  
  console.log("서버로부터 수신한 데이터: " + event.data);  
};  
  
// 연결이 닫힐 때 수행할 작업 
socket.onclose = function(event) {  
  console.log("연결이 닫혔습니다.");  
};  
  
// 연결 오류 처리 방법  
socket.onerror = function(error) {  
  console.log("오류 발생: " + error);  
}

JavaScript를 사용한 프론트엔드 개발 외에도 Java, C++, Go, Python, PHP 및 Rust와 같은 프로그래밍 언어 플랫폼에서도 WebSocket을 사용할 수 있습니다.

WebSocket 요청 사례

다음은 일반적인 WebSocket 핸드셰이크 요청의 예입니다:

GET /chat HTTP/1.1         // /chat 엔드포인트에 대한 GET 요청.
Host: example.com:8000     // WebSocket 서버의 도메인 및 포트.
Upgrade: websocket         // 클라이언트가 업그레이드하려는 프로토콜.
Connection: Upgrade        // 클라이언트가 기존 연결을 사용하지 않고 새 연결을 설정하려고 함을 서버에 알림.
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==       // 서버가 디코드하고 해시하여 요청을 받았음을 증명하기 위해 클라이언트가 보낸 base64 인코딩된 랜덤 값.
Origin: http://example.com                        // 클라이언트 요청의 출처.
Sec-WebSocket-Protocol: chat, superchat           // 연결을 생성하는 애플리케이션에서 사용하는 서브 프로토콜을 지정합니다.
Sec-WebSocket-Version: 13                         // 클라이언트가 사용하고자 하는 WebSocket 프로토콜 버전.

핸드셰이크 요청에 대한 응답으로 서버는 다음과 같은 내용을 반환합니다:

HTTP/1.1 101 Switching Protocols    // 요청한 대로 프로토콜이 전환되고 있음을 나타냄.
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=     // 클라이언트가 초기 핸드셰이크에서 보낸 Sec-WebSocket-Key의 해시로, 특정 GUID와 결합되어 있습니다. 클라이언트는 이를 사용하여 서버가 핸드셰이크를 수신했는지 확인할 수 있습니다.

결론