[ JS ] WebSocket 객체

 

WebSocket

HTML5에서 제공하는 API로, 클라이언트와 서버 간에 양방향 통신을 할 수 있게 함
HTTP와 달리, WebSocket은 지속적인 연결을 유지하며 실시간 데이터 전송이 가능

 

const socket = new WebSocket('ws://localhost:8090/echo');

** ws://localhost:8090/echo경로에 WebSocket 연결을 시도

** 연결이 성공하면 클라이언트와 서버 간에 실시간 데이터를 송수신 가능

** WebSocket객체( socket )를 통해 이벤트 핸들러( onopen, onmessage, onclose ... )를 설정하여 연결 상태와 메시지를 처리할 수 있다.

ws://	/echo
WebSocket 프로토콜을 의미	서버의 특정 WebSocket 경로

 

이벤트 핸들러	설명	주요 사용 예
onopen	WebSocket연결 성공 시 호출됨	초기화 작업
onmessage	서버로부터 메시지 받을때 호출됨 event.data: 수신된 메시지 데이터	수신된 데이터 처리
onclose	WebSocket 연결 종료 시 호출됨 event.code: 연결 종료 코드 event.reason: 연결 종료 이유 event.wasClean: 연결이 정상적으로 종료되었는지 여부( boolean )	연결 종료 후 작업 처리
onerror	WebSocket에서 에러가 발생했을 때 호출됨	오류 알림 및 디버깅

 

WebSocket객체의 ' 메서드 '와  ' 이벤트 핸들러 ' 는 다르다

	이벤트 핸들러	메서드
정의	특정 상황에서 자동으로 호출되는 함수	프로그래머가 명시적으로 호출
예	onopen, onmessage, onclose, onerror	send(), close()
역할	WebSocket 상태와 이벤트를 처리	데이터 전송 및 연결 종료
자동 호출 여부	WebSocket 이벤트에 의해 자동으로 호출됨	직접 호출해야 실행됨