Colin's Blog
자바스크립트 서버와의 실시간 통신

자바스크립트는 웹 애플리케이션에서 실시간 통신을 구현하기 위해 널리 사용되는 언어입니다. 이를 위해 일반적으로 웹 소켓, AJAX 및 HTTP Long Polling과 같은 다양한 기술을 활용할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 서버와의 실시간 통신을 구현하는 방법에 대해 알아보겠습니다.

웹 소켓 (WebSocket)

웹 소켓은 클라이언트와 서버 간의 양방향 통신을 제공하는 프로토콜입니다. 이를 통해 실시간으로 데이터를 주고받을 수 있으며, 서버가 클라이언트에게 데이터를 알릴 수도 있습니다.

웹 소켓을 사용하기 위해서는 WebSocket 객체를 생성하고 서버의 URL을 전달해야 합니다. 이후 onopen, onmessage, onclose 등의 이벤트 핸들러를 등록하여 해당 이벤트가 발생할 때마다 처리할 작업을 정의할 수 있습니다.

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

socket.onopen = function() {
  console.log('웹 소켓 연결됨');
};

socket.onmessage = function(event) {
  const message = event.data;
  console.log('수신한 메시지: ' + message);
};

socket.onclose = function() {
  console.log('웹 소켓 연결 종료됨');
};

위 코드에서는 웹 소켓을 생성하고, 연결되었을 때, 메시지를 수신했을 때, 연결이 종료되었을 때 각각 로그를 출력하도록 설정하였습니다.

AJAX (Asynchronous JavaScript and XML)

AJAX는 비동기적으로 서버와 데이터를 교환할 수 있는 기술이며, 웹 페이지의 일부분을 새로고침하지 않고도 동적으로 업데이트할 수 있습니다. 이를 통해 실시간으로 데이터를 받아와 화면에 표시할 수 있습니다.

AJAX를 사용하기 위해서는 XMLHttpRequest 객체를 생성하고 서버의 URL과 요청 방식 (GET, POST 등)을 설정해야 합니다. 이후 onreadystatechange 이벤트를 등록하여 서버의 응답이 도착할 때마다 처리할 작업을 정의할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = xhr.responseText;
    console.log('받은 응답: ' + response);
  }
};

xhr.send();

위 코드에서는 AJAX를 사용하여 서버로부터 데이터를 받아와서 출력하는 예제입니다. 응답이 도착하면 onreadystatechange 이벤트 핸들러가 호출되며, 이후 응답에 대한 처리를 수행합니다.

HTTP Long Polling

HTTP Long Polling은 클라이언트가 서버에 요청을 보내고 서버는 요청에 대한 응답을 보낼 때까지 연결을 유지하는 기술입니다. 서버는 데이터가 변경되면 응답을 보내고, 클라이언트는 이를 받은 후 바로 새로운 요청을 보내는 방식으로 실시간 통신을 구현할 수 있습니다.

HTTP Long Polling을 구현하려면 클라이언트는 서버에 요청을 보내고 응답을 받을 때까지 기다려야 합니다. 이를 위해 setTimeout 함수를 사용하여 일정 시간마다 서버에 요청을 보내는 방식으로 구현할 수 있습니다.

function longPoll() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://example.com/data', true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const response = xhr.responseText;
      console.log('받은 응답: ' + response);
    }

    // 새로운 요청을 보내기 전에 일정 시간 동안 대기
    setTimeout(longPoll, 1000);
  };

  xhr.send();
}

// 초기 요청
longPoll();

위 코드에서는 longPoll 함수를 정의하여 서버에 요청을 보내고 응답을 받은 후, 일정 시간 (setTimeout 함수의 인자)이 지난 뒤 다시 longPoll 함수를 호출하여 새로운 요청을 보내는 방식으로 구현하였습니다.

결론

자바스크립트를 사용하여 서버와의 실시간 통신을 구현하는 방법에 대해 알아보았습니다. 웹 소켓, AJAX, HTTP Long Polling 등 다양한 기술을 활용하여 실시간으로 데이터를 주고받을 수 있으며, 이를 통해 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 각 기술의 특성과 사용 방법을 잘 이해하고 필요에 따라 적절하게 적용해보세요.

© 2018 Colin. All rights reserved.