개요
웹 소켓은 클라이언트와 서버 간 양방향 통신을 가능하게 해주는 프로토콜입니다. 브라우저에서 웹 소켓을 사용하기 위해선 window.WebSocket 객체를 사용해야 합니다. 이 글에서는 브라우저에서 웹 소켓 통신을 처리하는 방법에 대해 알아보겠습니다.
BOM(Browser Object Model)과 웹 소켓
BOM은 브라우저의 프로그래밍 인터페이스를 제공하는 객체 모델입니다. 웹 소켓 통신을 위해선 BOM에서 제공하는 WebSocket 객체를 사용해야 합니다. BOM을 사용하여 웹 소켓을 생성하고 데이터를 주고받을 수 있습니다.
웹 소켓 생성하기
웹 소켓을 생성하기 위해서는 새로운 WebSocket 객체를 생성해야 합니다. 다음은 웹 소켓을 생성하는 예제 코드입니다.
var socket = new WebSocket('ws://localhost:8080');
여기서 'ws://localhost:8080'은 서버의 주소와 포트를 나타냅니다. 이 주소를 웹 소켓 생성자에 전달하여 웹 소켓을 생성합니다.
이벤트 핸들링하기
웹 소켓은 다양한 이벤트를 발생시킵니다. 이벤트 핸들러를 등록하여 이벤트를 처리할 수 있습니다. 다음은 주요한 웹 소켓 이벤트와 이벤트 핸들링 방법입니다.
연결 이벤트 처리하기
웹 소켓이 서버와 연결되었을 때 발생하는 이벤트를 처리할 수 있습니다. onopen 이벤트 핸들러를 등록하여 연결 이벤트를 처리할 수 있습니다.
socket.onopen = function(event) {
console.log('연결되었습니다.');
};
메시지 수신 이벤트 처리하기
서버로부터 메시지를 수신했을 때 발생하는 이벤트를 처리할 수 있습니다. onmessage 이벤트 핸들러를 등록하여 메시지 수신 이벤트를 처리할 수 있습니다.
socket.onmessage = function(event) {
console.log('메시지를 수신했습니다:', event.data);
};
에러 이벤트 처리하기
연결 중 에러가 발생했을 때나 웹 소켓 통신 중 오류가 발생했을 때 발생하는 이벤트를 처리할 수 있습니다. onerror 이벤트 핸들러를 등록하여 에러 이벤트를 처리할 수 있습니다.
socket.onerror = function(event) {
console.error('에러가 발생했습니다:', event.error);
};
연결 종료 이벤트 처리하기
웹 소켓 연결이 종료되었을 때 발생하는 이벤트를 처리할 수 있습니다. onclose 이벤트 핸들러를 등록하여 연결 종료 이벤트를 처리할 수 있습니다.
socket.onclose = function(event) {
console.log('연결이 종료되었습니다.');
};
데이터 주고받기
웹 소켓을 통해 클라이언트와 서버는 데이터를 주고받을 수 있습니다. 클라이언트에서 서버로 데이터를 보내려면 WebSocket 객체의 send 메소드를 사용하면 됩니다.
socket.send('Hello, server!');
서버에서 클라이언트로 데이터를 보내려면 서버에서 소켓 객체를 이용하여 데이터를 전송합니다.
결론
BOM을 활용한 브라우저의 웹 소켓 통신 처리에 대해 알아보았습니다. WebSocket 객체를 사용하여 웹 소켓을 생성하고 이벤트를 핸들링하며 데이터를 주고받을 수 있습니다. 웹 소켓을 통해 클라이언트와 서버 간 실시간 양방향 통신을 할 수 있으므로 다양한 웹 애플리케이션에서 활용할 수 있습니다.
#websocket #BOM