[javascript] 프로미스를 활용한 웹 소켓 통신

07 Dec 2023

javascript

웹 소켓은 실시간 양방향 통신을 제공하는 프로토콜입니다. 웹 소켓은 웹 애플리케이션에서 실시간 업데이트, 채팅, 게임 등 다양한 실시간 기능을 구현하는 데 사용됩니다. 프로미스는 자바스크립트에서 비동기 작업을 처리하기 위한 패턴으로 많이 사용됩니다. 이번 글에서는 프로미스를 활용하여 웹 소켓 통신을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓 연결

먼저, 웹 소켓을 사용하기 위해 WebSocket 객체를 생성하고 원하는 서버의 URL을 전달하여 웹 소켓 연결을 생성합니다.

const socket = new WebSocket('ws://example.com');

이벤트 핸들링

웹 소켓은 여러 가지 이벤트를 발생시켜 상태 변화를 알립니다. onopen, onmessage, onclose, onerror 등의 이벤트 핸들러를 등록하여 원하는 로직을 처리할 수 있습니다.

socket.onopen = () => {
  console.log('웹 소켓 연결이 열림');
};

socket.onmessage = (event) => {
  console.log('메시지 수신:', event.data);
};

socket.onclose = () => {
  console.log('웹 소켓 연결이 닫힘');
};

socket.onerror = (error) => {
  console.log('에러 발생:', error);
};

메시지 전송

send 메소드를 사용하여 웹 소켓 서버로 메시지를 전송할 수 있습니다.

socket.send('Hello, WebSocket!');

프로미스 활용

프로미스를 사용하여 웹 소켓 연결, 메시지 전송, 메시지 수신 등의 작업을 보다 간편하게 처리할 수 있습니다. 예를 들어, 아래의 코드는 웹 소켓 연결을 프로미스로 래핑한 예제입니다.

function connectWebSocket(url) {
  return new Promise((resolve, reject) => {
    const socket = new WebSocket(url);

    socket.onopen = () => {
      resolve(socket);
    };

    socket.onerror = (error) => {
      reject(error);
    };
  });
}

// 사용 예시
connectWebSocket('ws://example.com')
  .then((socket) => {
    console.log('웹 소켓 연결 성공');
    socket.send('Hello, WebSocket!');
  })
  .catch((error) => {
    console.log('웹 소켓 연결 실패:', error);
  });

결론

프로미스를 활용하여 웹 소켓을 보다 쉽게 다룰 수 있습니다. 프로미스를 사용하면 비동기 작업을 더 직관적이고 선언적으로 다룰 수 있으며, 코드의 가독성을 높일 수 있습니다. 웹 소켓을 사용하여 실시간 통신을 구현할 때, 프로미스를 활용해보세요.