웹 소켓 (Web Socket)

웹소켓이란

쉽게 비유하자면, HTTP는 무전기와 같습니다. 내가 말을 하고 끝나야(요청), 상대방이 대답(응답)할 수 있습니다. 반면 웹소켓은 전화기와 같습니다. 한 번 연결되면 서로 동시에 자유롭게 대화(데이터 전송)를 주고받을 수 있습니다.

HTTP: 클라이언트가 요청을 보내야만 서버가 응답합니다. (단방향적 성격)

WebSocket: 연결이 한 번 맺어지면, 서버가 원할 때 언제든 클라이언트에게 데이터를 보낼 수 있습니다. (실시간 채팅, 주식 차트, 게임 등에 필수)

웹 소켓(Web Socket) handshake

웹소켓은 독특하게도 처음에는 HTTP 요청으로 시작해서 소켓 연결로 전환됩니다. 이 과정을 핸드셰이크(Handshake)라고 합니다.

• 1단계: 핸드셰이크 (Handshake)
  클라이언트(브라우저)가 서버에 "우리 이제 웹소켓으로 대화하자"라고 HTTP 요청을 보냅니다.

  Client: GET /chat HTTP/1.1, Upgrade: websocket, Connection: Upgrade 헤더 전송
  Server: 101 Switching Protocols 응답

• 2단계: 데이터 전송 (Data Transfer)
  연결이 성립되면 HTTP 프로토콜은 무시되고, 열려 있는 TCP 라인을 통해 가벼운 메시지 프레임을 주고받습니다. 이때부터는 헤더 정보가 거의 없어 통신 속도가 매우 빠릅니다.

• 3단계: 연결 종료 (Close)
  한쪽이 연결을 끊으면 통신이 종료됩니다.

예시

웹 브라우저에는 이미 WebSocket API가 내장되어 있습니다.

소켓이 정상적으로 생성되면 아래 4개의 이벤트를 사용할 수 있게 됩니다.

open – 연결이 성공적으로 되었을 때 발생
message – 데이터를 수신하였을 때 발생
error – 연결 상 에러가 생겼을 때 발생
close – 연결이 종료되었을 때 발생

// 1. 웹소켓 연결 생성 (ws:// 프로토콜 사용)
const socket = new WebSocket("ws://localhost:5000/socket");

// 2. 연결이 열렸을 때 실행
socket.onopen = function(event) {
    console.log("서버와 연결되었습니다!");
    socket.send("안녕하세요, 서버!"); // 메시지 전송
};

// 3. 서버로부터 메시지를 받았을 때 실행
socket.onmessage = function(event) {
    console.log("서버로부터 받은 메시지: " + event.data);
};

// 4. 에러 발생 시
socket.onerror = function(error) {
    console.error("에러 발생:", error);
};