웹 소켓은 실시간 통신을 위한 프로토콜로써, 서버와 클라이언트 간의 양방향 통신을 지원합니다. 자바스크립트의 fetch API를 사용해 웹 소켓을 구현할 수 있으며, 이를 통해 실시간 데이터를 주고받을 수 있습니다.

WebSocket 소개

WebSocket은 일반적으로 HTTP와 마찬가지로 80번 포트(HTTPS의 경우 443번 포트)를 통해 접속하며, TCP 연결을 설정한 후에 이전까지의 HTTP 프로토콜과는 달리 끊어지지 않고 계속 유지됩니다. 이를 통해 서버와 클라이언트 간에 실시간 데이터를 송수신할 수 있게 됩니다.

fetch API를 사용한 WebSocket 연결

fetch API는 HTTP 요청을 보낼 때 사용하는 API이지만, 웹 소켓 통신에도 사용할 수 있습니다. WebSocket을 연결하기 위해 fetch API를 사용하려면, fetch 함수를 호출하는 대신 WebSocket 객체를 생성해야 합니다.

const socket = new WebSocket('ws://서버주소:포트번호');

위의 코드에서 ‘ws://서버주소:포트번호’는 접속할 서버의 주소와 포트번호를 의미합니다. 접속하려는 서버의 프로토콜이 HTTPS인 경우, ‘wss://’를 사용해야 합니다.

WebSocket 이벤트 핸들링

WebSocket 객체는 다양한 이벤트를 제공하여 연결 상태를 감지하고 데이터를 송수신할 수 있습니다.

socket.onopen = function() {
  console.log('WebSocket 연결이 성공적으로 열렸습니다.');
};

socket.onmessage = function(event) {
  const message = event.data;
  console.log('받은 메시지:', message);
};

socket.onclose = function() {
  console.log('WebSocket 연결이 닫혔습니다.');
};

socket.onerror = function(error) {
  console.error('WebSocket 오류:', error);
};

위의 코드에서는 연결이 열릴 때, 메시지를 받았을 때, 연결이 닫힐 때, 오류가 발생했을 때의 각각의 이벤트 핸들러를 정의하고 있습니다.

데이터 송수신

WebSocket을 통해 데이터를 주고받을 때에는 send 메서드를 사용합니다. 이 메서드는 문자열이나 Blob, ArrayBuffer와 같은 데이터를 전송할 수 있습니다.

// 메시지를 보내는 예시
socket.send('Hello, WebSocket!');

// 데이터를 받았을 때의 처리
socket.onmessage = function(event) {
  const message = event.data;
  console.log('받은 메시지:', message);
};

위의 예시에서는 ‘Hello, WebSocket!’ 메시지를 서버로 보내고, 서버로부터 데이터를 받았을 때 해당 데이터를 출력하도록 구현되어 있습니다.

결론

자바스크립트 fetch API를 사용한 WebSocket을 통한 웹 소켓 통신은 서버와 클라이언트 간의 실시간 양방향 통신을 구현할 수 있는 좋은 방법입니다. WebSocket 객체의 이벤트 핸들러를 사용하여 연결 상태를 감지하고, send 메서드를 사용하여 데이터를 송수신할 수 있습니다. 이를 활용하여 실시간 알림, 채팅 등 다양한 기능을 구현할 수 있습니다.