자바스크립트를 활용한 실시간 데이터 처리

10 Sep 2023

javascript

실시간 데이터 처리는 많은 웹 애플리케이션에서 중요한 요소입니다. 실시간 데이터 처리를 위해 자바스크립트는 강력하고 유연한 도구로 사용됩니다. 이 글에서는 자바스크립트를 사용하여 실시간 데이터를 처리하는 몇 가지 방법을 살펴보겠습니다.

웹 소켓을 사용한 실시간 통신

웹 소켓을 사용하면 서버와 클라이언트 간에 양방향 실시간 통신이 가능해집니다. 자바스크립트에서는 WebSocket 객체를 사용하여 웹 소켓을 생성하고 메시지를 교환할 수 있습니다. 다음은 웹 소켓을 사용한 실시간 데이터 처리의 간단한 예시입니다.

// 웹 소켓 생성
const socket = new WebSocket('ws://localhost:5000');

// 연결 성공 시 이벤트 핸들러
socket.onopen = () => {
  console.log('WebSocket connected');
};

// 메시지 수신 시 이벤트 핸들러
socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received data:', data);
};

// 데이터 전송 예시
const data = { name: 'John', age: 30 };
socket.send(JSON.stringify(data));

AJAX 요청으로 실시간 데이터 가져오기

AJAX를 사용하여 서버에 비동기적으로 데이터를 요청하고 받아올 수 있습니다. 자바스크립트에서는 XMLHttpRequest 객체를 사용하여 AJAX 요청을 처리할 수 있습니다. 다음은 AJAX 요청을 사용한 실시간 데이터 처리의 예시입니다.

// AJAX 요청 생성
const request = new XMLHttpRequest();
request.open('GET', 'https://api.example.com/data', true);

// 응답 받았을 때 이벤트 핸들러
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    const data = JSON.parse(request.responseText);
    console.log('Received data:', data);
  } else {
    console.error('Failed to fetch data');
  }
};

// 요청 전송
request.send();

Server-Sent Events로 실시간 데이터 스트리밍

Server-Sent Events는 서버에서 클라이언트로 데이터를 비동기적으로 보내는 기술입니다. 자바스크립트에서는 EventSource 객체를 사용하여 Server-Sent Events를 처리할 수 있습니다. 다음은 Server-Sent Events로 실시간 데이터를 스트리밍하는 예시입니다.

// EventSource 객체 생성
const eventSource = new EventSource('https://stream.example.com/data');

// 이벤트 핸들러
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received data:', data);
};

// 이벤트 종료 시 핸들러
eventSource.onerror = () => {
  console.error('Failed to receive data');
};

결론

자바스크립트를 활용하여 실시간 데이터 처리를 수행하는 방법을 알아보았습니다. 웹 소켓, AJAX 요청, Server-Sent Events 등 다양한 방식을 사용하여 실시간 데이터를 송수신할 수 있습니다. 선택한 방식은 애플리케이션의 특성에 따라 다를 수 있으며, 적절한 방법을 선택하여 실시간 데이터 처리를 구현해야 합니다.