HTML5 WebSocket 주요 속성 완벽 정리

HTML5 WebSocket이란?

WebSocket은 웹 애플리케이션을 위한 차세대 양방향 통신 기술입니다. 단일 소켓(single socket)을 통해 동작하며, HTML5를 지원하는 브라우저에서는 JavaScript 인터페이스를 통해 손쉽게 사용할 수 있습니다.

기존의 HTTP 요청-응답 방식과 달리, WebSocket은 클라이언트와 서버 간에 지속적인 연결을 유지하면서 실시간으로 데이터를 주고받을 수 있어 채팅, 실시간 알림, 게임 등 다양한 분야에서 활용됩니다.

WebSocket의 주요 속성

WebSocket 객체는 연결 상태와 데이터 전송 상태를 확인할 수 있는 읽기 전용(read-only) 속성들을 제공합니다. 주요 속성은 다음과 같습니다.

속성	설명
Socket.readyState	읽기 전용 속성인 readyState는 현재 연결의 상태를 나타냅니다. 이 속성은 다음 네 가지 값을 가질 수 있습니다. 0 (CONNECTING): 아직 연결이 설정되지 않은 상태입니다. 1 (OPEN): 연결이 성공적으로 설정되었으며, 통신이 가능한 상태입니다. 2 (CLOSING): 연결이 종료 핸드셰이크(closing handshake) 과정을 진행 중인 상태입니다. 3 (CLOSED): 연결이 이미 종료되었거나, 열리지 못한 상태입니다.
Socket.bufferedAmount	읽기 전용 속성인 bufferedAmount는 send() 메서드를 통해 전송 대기열에 추가된 UTF-8 텍스트의 바이트 수를 나타냅니다. 이 속성을 활용하면 네트워크가 느려 데이터가 아직 전송되지 않고 버퍼에 쌓여 있는 양을 확인할 수 있습니다.

속성

설명

Socket.readyState

읽기 전용 속성인 readyState는 현재 연결의 상태를 나타냅니다. 이 속성은 다음 네 가지 값을 가질 수 있습니다.

0 (CONNECTING): 아직 연결이 설정되지 않은 상태입니다.
1 (OPEN): 연결이 성공적으로 설정되었으며, 통신이 가능한 상태입니다.
2 (CLOSING): 연결이 종료 핸드셰이크(closing handshake) 과정을 진행 중인 상태입니다.
3 (CLOSED): 연결이 이미 종료되었거나, 열리지 못한 상태입니다.

Socket.bufferedAmount

읽기 전용 속성인 bufferedAmount는 send() 메서드를 통해 전송 대기열에 추가된 UTF-8 텍스트의 바이트 수를 나타냅니다. 이 속성을 활용하면 네트워크가 느려 데이터가 아직 전송되지 않고 버퍼에 쌓여 있는 양을 확인할 수 있습니다.

속성 활용 예시

실제 개발에서는 readyState 값을 확인하여 안전하게 메시지를 전송할 수 있습니다. 예를 들어, 연결 상태가 OPEN(1)일 때만 send() 메서드를 호출하도록 처리하면 오류를 방지할 수 있습니다. 또한 bufferedAmount 값이 크다면 네트워크 전송이 지연되고 있다는 의미이므로, 데이터 전송 빈도를 조절하는 데 유용하게 활용됩니다.