Promise를 활용한 웹 소켓 통신 구현

13 Sep 2023

Promise

웹 소켓은 클라이언트와 서버 간의 양방향 통신을 제공하는 프로토콜입니다. 이를 활용하여 실시간 데이터를 전송하거나 채팅 애플리케이션과 같은 실시간 기능을 구현할 수 있습니다.

이번에는 웹 소켓 통신을 구현하기 위해 JavaScript의 Promise를 활용하는 방법을 알아보겠습니다.

1. 웹 소켓 연결

먼저, 웹 소켓을 생성하고 서버에 연결해야 합니다. 이때 Promise를 사용하여 연결이 성공하면 resolve하고, 실패하면 reject하는 코드를 작성할 수 있습니다.

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

const connect = new Promise((resolve, reject) => {
  socket.onopen = () => {
    console.log('WebSocket connected');
    resolve();
  };

  socket.onerror = (error) => {
    console.error('WebSocket connection error', error);
    reject(error);
  };
});

위 코드에서는 WebSocket 생성자를 사용하여 웹 소켓 객체를 만들고, onopen 이벤트 핸들러를 통해 연결이 성공했을 때 resolve하도록 설정하고, onerror 이벤트 핸들러를 통해 연결에 실패했을 때 reject하도록 설정하였습니다.

2. 메시지 전송

웹 소켓에 연결한 후, 데이터를 서버로 전송해야 합니다. Promise를 활용하여 메시지 전송이 성공하면 resolve하고, 실패하면 reject하는 코드를 작성할 수 있습니다.

const sendMessage = (message) => {
  return new Promise((resolve, reject) => {
    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
      resolve(event.data);
    };

    socket.onerror = (error) => {
      console.error('WebSocket error', error);
      reject(error);
    };

    socket.send(message);
  });
};

위 코드에서는 onmessage 이벤트 핸들러를 통해 서버로부터 오는 메시지를 받아온 후 resolve하도록 설정하고, onerror 이벤트 핸들러를 통해 에러가 발생하면 reject하도록 설정합니다. 마지막으로 socket.send() 메서드를 사용하여 메시지를 서버로 전송합니다.

3. 사용 예제

위에서 작성한 Promise를 활용한 웹 소켓 통신 코드를 실제로 사용해보겠습니다.

connect.then(() => {
  console.log('WebSocket connected successfully');
  sendMessage('Hello, server!')
    .then((response) => {
      console.log('Server response:', response);
    })
    .catch((error) => {
      console.error('Failed to send message:', error);
    });
})
.catch((error) => {
  console.error('WebSocket connection error:', error);
});

위 코드에서는 connect Promise를 사용하여 웹 소켓 연결을 시도하고, 연결이 성공하면 sendMessage 함수를 호출하여 메시지를 전송합니다. 성공적으로 메시지를 전송하면 서버의 응답을 출력하고, 오류가 발생하면 해당 에러를 처리합니다.

위와 같이 Promise를 활용하여 웹 소켓 통신을 구현하면 좀 더 간결하고 효율적인 코드를 작성할 수 있습니다. Promise의 then/catch를 통해 연결과 데이터 전송의 비동기 처리를 간편하게 할 수 있습니다.

#websockets #javascript