브라우저 WebSocket API: 이벤트와 수명주기

브라우저 WebSocket API: 이벤트와 수명주기

브라우저에서 바로 WebSocket 연결을 열고 싶을 때는 외부 라이브러리 없이 네이티브 WebSocket 객체를 쓰면 돼요. WebSocket 객체는 서버와의 연결을 만들고 관리하며, 그 연결 위에서 데이터를 보내고 받는 API를 제공합니다. 이 글에서는 생성자에 넘기는 인자부터 인스턴스 속성·메서드, 그리고 연결이 열리고 닫히는 흐름을 알려주는 네 가지 이벤트를 중심으로 살펴볼게요.

출처: WebSocket - Web APIs | MDN

본문

생성자

WebSocket() 생성자로 새 WebSocket 객체를 만듭니다.

인스턴스 속성

연결의 상태와 설정을 읽어오는 속성들이에요.

속성 설명
WebSocket.binaryType 연결이 사용하는 바이너리 데이터 타입
WebSocket.bufferedAmount 대기 중인 데이터의 바이트 수 (읽기 전용)
WebSocket.extensions 서버가 선택한 확장 (읽기 전용)
WebSocket.protocol 서버가 선택한 서브프로토콜 (읽기 전용)
WebSocket.readyState 연결의 현재 상태 (읽기 전용)
WebSocket.url WebSocket의 절대 URL (읽기 전용)

인스턴스 메서드

메서드 설명
WebSocket.close() 연결을 닫음
WebSocket.send() 전송할 데이터를 대기열에 넣음

이벤트

연결의 수명주기는 다음 이벤트로 관찰할 수 있어요. addEventListener()로 듣거나, 인터페이스의 on<event> 속성에 리스너를 지정하면 됩니다.

이벤트 설명
close WebSocket과의 연결이 닫혔을 때 발생 (onclose 속성으로도 사용 가능)
error 데이터를 보내지 못하는 등의 오류로 연결이 닫혔을 때 발생 (onerror)
message WebSocket을 통해 데이터를 받았을 때 발생 (onmessage)
open WebSocket과의 연결이 열렸을 때 발생 (onopen)

예제

연결을 연 뒤 open 이벤트에서 서버에 인사를 보내고, message 이벤트에서 서버가 보낸 메시지를 처리하는 전형적인 클라이언트예요.

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

주의할 점

WebSocket API에는 백프레셔(backpressure)를 적용할 방법이 없어요. 그러다 보니 메시지가 애플리케이션이 처리하는 속도보다 빠르게 도착하면, 장치 메모리를 채우면서 버퍼링하거나 CPU를 100% 써서 응답이 없어지거나, 둘 다가 될 수 있습니다. 백프레셔를 자동으로 처리해 주는 대안이 필요하다면 WebSocketStream을 살펴보세요. 참고로 이 기능은 Web Workers에서도 사용할 수 있어요.

더 알아보기