Flask + JavaScript 데이터 전송 방향에 따른 구분(파이썬을 이용한 웹 서비스 만들기)

혹시 파이썬으로 만들어 놓은 어플리케이션을 웹 어플리케이션으로 바꿀 계획이 있으신가요? 탁월한 선택을 하셨습니다.
특히나 파이썬을 이용해서 자동매매를 하기 위해 OpenAPI로 연계한 상태에서도 웹 애플리케이션으로 서비스를 할 수도 있습니다.

 

우선은 웹 애플리케이션에서 서버와 클라이언트 간에 데이터를 주고받는 방법에 대해 알고 계실 필요가 있습니다.

이번 글에서는 Server-Sent Events(SSE)와 AJAX를 중심으로, 각각의 특징과 작동 방식을 비교하여 설명드리겠습니다.

 

데이터 전송 방향에 따른 호출 방식 구분

 

• SSE : Flask 서버에서 클라이언트로 단방향 데이터를 보내는 경우 
•  AJAX : 클라이언트에서 Flask 서버로 요청을 하고 Flask 서버에서 클라이언트로 응답을 하는 경우

인천고래 AI이미지

Server-Sent Events (SSE) 

호출 방식: 클라이언트(브라우저)가 서버에 한 번 연결을 요청한 후, 서버로부터 데이터를 지속적으로 받습니다.

응답 방식: 서버가 클라이언트에게 단방향으로 데이터를 푸시합니다. 클라이언트는 서버로부터 데이터를 받기만 하고,
서버에 데이터를 보낼 수는 없습니다.

특징:

• 실시간 업데이트( HTTP 프로토콜을 사용)에 적합합니다.
• 예를 들어, 주식 시세, 뉴스 피드, 실시간 알림 등이 있습니다.
• 연결이 끊어진 경우 자동으로 재연결을 시도합니다.
• 텍스트 데이터 전송에 최적화되어 있습니다(주로 JSON 형태로 데이터를 전송).

// 자바스크립트 선언부
var source = new EventSource('/SSE/');
source.onmessage = function(event) {
    var data = JSON.parse(event.data);
    document.getElementById('someElement').innerHTML = data.someField;
};

 

 

AJAX (Asynchronous JavaScript and XML)

호출 방식: 클라이언트(브라우저)는 필요할 때마다 서버에 HTTP 요청을 보내고, 서버로부터 응답을 받습니다.

응답 방식: 클라이언트와 서버 간의 요청과 응답은 비동기적으로 이루어집니다. 요청을 보낸 후 응답을 기다리는 동안 클라이언트는 다른 작업을 계속할 수 있습니다.

특징:

• 사용자의 액션(버튼 클릭, 폼 제출 등)에 응답하여 필요한 데이터를 서버로부터 가져오거나 서버에 데이터를 전송할 때 사용됩니다.
• JSON, XML, HTML, 텍스트 등 다양한 형태의 데이터를 주고받을 수 있습니다.
• 페이지를 새로 고침하지 않고도 서버로부터 업데이트 된 데이터를 받아 페이지의 일부를 업데이트할 수 있습니다.

// 자바스크립트 선언부
$.ajax({
    url: '/some-endpoint',
    type: 'GET', // 또는 'POST'
    dataType: 'json', // 받고자 하는 데이터의 타입
    success: function(data) {
        // 성공적으로 데이터를 받았을 때의 처리
        console.log(data);
    },
    error: function(error) {
        // 오류 처리
        console.error(error);
    }
});

 

결론

• SSE는 서버로부터 실시간으로 데이터를 받아야 할 때 주로 사용됩니다.
• 위에서 언급된 2가지의  전송방식과는 무관하게 서버에서는 OpenAPI와 연계하여 필터링된 데이터를 제공 가능합니다.
• 클라이언트는 서버에 연결을 요청한 후, 서버로부터 데이터를 지속적으로 받습니다.
• AJAX는 사용자의 액션에 따라 서버에 데이터를 요청하거나 서버로부터 데이터를 받아야 할 때 사용됩니다.
• 비동기적인 요청과 응답으로 페이지를 새로 고침하지 않고도 데이터를 주고받을 수 있습니다.

각 기술은 웹 애플리케이션의 특정 요구 사항과 상황에 따라 선택적으로 사용될 수 있으며 저와 같은 경우에는 두 가지를 병행해서 사용하고 있습니다.

 

위의 글이 여러분에게 도움이 되는 글이기를 기대해봅니다.

 

다음 글 

AJAX를 사용하여 서버(Flask)에 데이터를 요청하는 두 가지 방법