자바스크립트 Fetch API와 WebSocket을 함께 사용하여 웹 소켓 통신을 구현하는 방법을 알아보겠습니다.

먼저, WebSocket을 초기화하고 연결하는 코드입니다.

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

socket.onopen = () => {
  // 소켓 연결이 성공한 경우 실행되는 코드
  console.log('WebSocket 연결 성공');
};

socket.onerror = (error) => {
  // 소켓 연결 중 오류가 발생한 경우 실행되는 코드
  console.error('WebSocket 오류:', error);
};

socket.onmessage = (event) => {
  // 서버로부터 메시지를 수신한 경우 실행되는 코드
  const message = event.data;
  console.log('서버로부터 메시지 수신:', message);
};

socket.onclose = () => {
  // 소켓 연결이 닫힌 경우 실행되는 코드
  console.log('WebSocket 연결 닫힘');
};

위의 코드에서 'wss://example.com/socket' 부분을 실제 웹 소켓 서버의 주소로 바꿔주어야 합니다. 연결이 성공하면 onopen 이벤트 핸들러가 호출됩니다. 오류가 발생하면 onerror 이벤트 핸들러가 호출되고, 서버로부터 메시지를 수신하면 onmessage 이벤트 핸들러가 호출됩니다. 소켓 연결이 닫히면 onclose 이벤트 핸들러가 호출됩니다.

이제, 웹 소켓을 통해 메시지를 서버로 보내는 방법을 알아보겠습니다.

const sendMessage = (message) => {
  socket.send(message);
};

// 메시지 전송 예시
sendMessage('Hello, Server!');

socket.send(message)를 통해 서버로 메시지를 보낼 수 있습니다.

또한, 웹 소켓을 사용할 때 보안 상의 이유로 SSL(HTTPS)을 사용하는 것이 좋습니다. 위의 코드에서 'wss://example.com/socket' 부분은 웹 소켓 서버의 주소를 HTTPS 주소로 변경해야 합니다.

웹 소켓을 통한 데이터 통신은 실시간으로 데이터를 주고받을 수 있는 강력한 기능을 제공합니다. 자바스크립트 Fetch API를 사용하여 웹 소켓 통신을 구현하면 다양한 웹 애플리케이션에서 실시간 데이터 통신을 구현할 수 있습니다.