웹 소켓은 실시간 통신을 위해 사용되는 프로토콜입니다. 자바스크립트의 fetch API를 사용하여 웹 소켓 통신 시스템을 구현할 수 있습니다. 이번 글에서는 fetch API를 사용하여 간단한 웹 소켓 통신 시스템을 구현하는 방법을 알아보겠습니다.

1. 웹 소켓 연결 설정

먼저, 웹 소켓 연결을 설정해야 합니다. fetch 함수를 사용하여 서버와 연결을 시도하고, 연결된 소켓을 반환 받습니다. 다음은 연결 설정 코드의 예시입니다.

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

socket.addEventListener("open", () => {
  console.log("소켓에 연결되었습니다.");
});

socket.addEventListener("message", (event) => {
  console.log("서버로부터 메시지를 수신하였습니다:", event.data);
});

socket.addEventListener("close", () => {
  console.log("소켓 연결이 종료되었습니다.");
});

위 코드에서는 ws://example.com에 해당하는 서버와 웹 소켓 연결을 설정하였습니다. 소켓의 open, message, close 이벤트에 대한 리스너를 등록하여 연결 상태를 확인할 수 있습니다.

2. 메시지 전송

웹 소켓 연결이 설정된 후에는 서버로 메시지를 전송할 수 있습니다. 메시지를 전송하기 위해서는 소켓의 send 메서드를 사용합니다. 다음은 메시지 전송 코드의 예시입니다.

const message = "Hello, server!";

socket.send(message);

위 예시에서는 send 메서드를 사용하여 “Hello, server!”라는 메시지를 서버로 전송하였습니다.

3. 연결 종료

통신이 끝난 후에는 소켓 연결을 종료해야 합니다. 연결을 종료하기 위해서는 소켓의 close 메서드를 사용합니다. 다음은 연결 종료 코드의 예시입니다.

socket.close();

위 예시에서는 close 메서드를 사용하여 소켓 연결을 종료합니다.

4. 에러 처리

웹 소켓 연결 도중에 에러가 발생할 수 있습니다. 에러를 처리하기 위해서는 소켓의 error 이벤트에 대한 리스너를 등록합니다. 다음은 에러 처리 코드의 예시입니다.

socket.addEventListener("error", (event) => {
  console.error("에러가 발생하였습니다:", event);
});

위 예시에서는 error 이벤트에 대한 리스너를 등록하여 에러를 콘솔에 출력하고 있습니다.

마무리

이번 글에서는 자바스크립트 fetch API를 사용하여 웹 소켓 통신 시스템을 구현하는 방법에 대해 알아보았습니다. 웹 소켓을 사용하면 실시간 통신이 가능하기 때문에 실시간 업데이트나 채팅 기능 등을 구현할 수 있습니다. fetch API를 사용하여 웹 소켓 통신을 구현해보세요!