webSocket 넌 뭐냐(2)

이번 글에선 저번 글에서 예고했듯이 webSocket의 예시 코드를 살펴봅시다.

글을 읽기 전에 저번 글을 읽고 오신다면 더욱 이해하기 편하실겁니다.

webSocket 넌 뭐냐(1)

WebSocket 코드 예시

바로 본론으로 들어가서, 가장 기본적인 WebSocket 코드부터 살펴보겠습니다.

let socket = new WebSocket("wss://example/chat");

socket.onopen = function(e) {
  alert("[open] 커넥션이 만들어졌습니다.");
  socket.send("안녕!");
};

socket.onmessage = function(event) {
  alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`);
  } else {
    alert('[close] 커넥션이 죽었습니다.');
  }
};

socket.onerror = function(error) {
  alert(`[error]`);
};

 

이 코드는 WebSocket에서 사용할 수 있는 가장 기본적인 구조입니다.

이제 이 코드를 하나씩 나눠서 살펴보겠습니다.

WebSocket 연결 생성

const socket = new WebSocket("wss://example/chat");

 

이 코드는 서버와 WebSocket 연결을 생성하는 부분입니다.

여기서 중요한 포인트는 다음 두 가지입니다.

• wss:// → 보안이 적용된 WebSocket (HTTPS의 ws 버전)
• 객체를 생성하는 순간, 자동으로 연결이 시작된다

즉, 따로 connect 같은 함수를 호출할 필요가 없습니다.

2. WebSocket의 핵심 이벤트

WebSocket이 정상적으로 연결되면, 다음 4가지 이벤트를 사용할 수 있습니다.

• open → 연결이 성공적으로 완료됐을 때
• message → 서버로부터 데이터를 받았을 때
• close → 연결이 종료됐을 때
• error → 에러가 발생했을 때

이 개념을 알고 다시 코드를 보면 훨씬 명확해집니다.

연결 성공 (open)

socket.onopen = function(e) {
  alert("[open] 커넥션이 만들어졌습니다.");
  socket.send("안녕!");
};

연결이 완료되면 실행됩니다.

여기서 중요한 점은 연결이 완료된 이후에만 데이터를 보낼 수 있다는 것입니다.

그래서 socket.send()는 보통 onopen 안에서 사용합니다.

메시지 수신 (message)

socket.onmessage = function(event) {
  alert(`[message] 서버로부터 전송받은 데이터: ${event.data}`);
};

 

서버가 데이터를 보내면 자동으로 실행됩니다.

이 부분이 바로 WebSocket의 핵심입니다.

요청 없이도 서버가 데이터를 보낼 수 있음

연결 종료 (close)

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] 커넥션이 정상적으로 종료되었습니다(code=${event.code} reason=${event.reason})`);
  } else {
    alert('[close] 커넥션이 죽었습니다.');
  }
};

연결이 종료되었을 때 실행됩니다.

• wasClean → 정상 종료 여부
• code, reason → 종료 이유

실무에서는 여기서 재연결 로직을 넣는 경우가 많습니다.

에러 발생 (error)

 

socket.onerror = function(error) {
  alert(`[error]`);
};

 

에러가 발생했을 때 실행됩니다.

보통은 여기서 로깅을 하거나, 사용자에게 상태를 알려주는 역할을 합니다.

WebSocket 연결 과정 (핸드셰이크)

WebSocket은 처음 연결할 때 HTTP를 사용합니다.

 

GET /chat
Host: example
Origin: https://example
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Iv8io/9s+lYFgZWcXczP8Q==
Sec-WebSocket-Version: 13

 

여기서 핵심은 이 부분입니다.

• Connection: Upgrade
• Upgrade: websocket

“HTTP에서 WebSocket으로 프로토콜을 바꾸겠다”는 의미입니다.

주요 헤더 설명

• Origin: 요청을 보낸 클라이언트의 출처
• Connection: 프로토콜 전환 요청
• Upgrade: WebSocket 사용 요청
• Sec-WebSocket-Key: 보안 검증용 키
• Sec-WebSocket-Version: 프로토콜 버전

서버 응답

서버가 이를 허용하면 다음과 같은 응답을 보냅니다.

101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: hsBYongNyong24s99EO10UlZ22C2g=

 

여기서 101 Switching Protocols가 핵심입니다.

 

이번 글에선 webSocket의 예제 코드를 살펴봤습니다.

이번 글도 읽어주셔서 감사합니다.