웹 소켓은 실시간 양방향 통신을 제공하는 프로토콜로, 클라이언트와 서버 간에 지속적인 커뮤니케이션을 가능하게 합니다. 자바스크립트의 fetch API를 활용하면 쉽게 웹 소켓 통신을 구현할 수 있습니다. 이번 포스트에서는 자바스크립트 fetch API를 사용하여 웹 소켓 통신을 구현하는 방법을 알아보겠습니다.

fetch API를 사용하여 웹 소켓 연결하기

먼저, fetch API를 사용하여 웹 소켓에 연결하는 방법을 살펴보겠습니다.

const webSocketUrl = 'wss://example.com/socket';
const webSocket = new WebSocket(webSocketUrl);

webSocket.onopen = () => {
  console.log('WebSocket connection is open');
};

webSocket.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log('Received message from server:', message);
};

webSocket.onerror = (error) => {
  console.error('WebSocket error:', error);
};

webSocket.onclose = () => {
  console.log('WebSocket connection is closed');
};

위의 코드에서 webSocketUrl 변수에 연결할 웹 소켓 서버의 URL을 지정하고, new WebSocket()으로 웹 소켓 객체를 생성합니다. 그 후, onopen, onmessage, onerror, onclose 등의 이벤트 핸들러를 등록하여 웹 소켓 연결 상태 및 수신한 메시지 처리를 할 수 있습니다.

웹 소켓으로 데이터 전송하기

웹 소켓을 통해 데이터를 서버로 전송하는 방법을 알아보겠습니다.

const message = {
  type: 'chat',
  content: 'Hello, server!'
};

webSocket.send(JSON.stringify(message));

위의 코드에서는 send() 메소드를 사용하여 서버로 데이터를 전송합니다. 데이터는 JSON 문자열로 변환하여 전송해야 하므로 JSON.stringify()를 사용하여 메시지 객체를 문자열로 변환한 후 send()에 전달합니다.

웹 소켓 연결 해제하기

웹 소켓 연결을 해제하는 방법은 다음과 같습니다.

webSocket.close();

위의 코드는 close() 메소드를 호출하여 웹 소켓 연결을 해제합니다.

요약

자바스크립트의 fetch API를 활용하여 웹 소켓 통신을 구현할 수 있습니다. 웹 소켓을 사용하면 실시간 양방향 통신이 가능해지며, fetch API를 활용하여 간편하게 웹 소켓 연결을 설정하고 데이터를 전송할 수 있습니다. 이를 통해 웹 애플리케이션에서 실시간 업데이트가 필요한 경우에 효과적으로 통신할 수 있습니다.