FastAPI에서 실시간 데이터 시각화 기능 구현하기

25 Sep 2023

FastAPI

FastAPI는 Python으로 빠르게 웹 애플리케이션을 개발할 수 있는 강력한 프레임워크입니다. 이번 포스트에서는 FastAPI를 사용하여 실시간 데이터 시각화 기능을 구현하는 방법을 알아보겠습니다.

데이터 수집

먼저, 데이터를 수집하기 위해 필요한 라이브러리를 설치합니다. 예제로는 psutil을 사용하도록 하겠습니다.

pip install psutil

다음으로, FastAPI 애플리케이션을 생성하고 라우터를 설정합니다.

from fastapi import FastAPI
from fastapi import WebSocket

app = FastAPI()

@app.get("/")
def index():
    return "Welcome to real-time data visualization!"

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    
    while True:
        data = psutil.cpu_percent()    # 데이터 수집
        await websocket.send_text(str(data))    # 수집한 데이터를 클라이언트로 전송

위 코드에서 /ws로 WebSocket 연결을 받습니다. 클라이언트가 WebSocket에 연결하면, 서버에서는 계속해서 데이터를 수집하고 클라이언트에 전송합니다.

클라이언트 측 구현

이제 클라이언트 측에서 실시간으로 데이터를 받아와서 시각화를 할 수 있도록 구현해보겠습니다. 웹소켓을 사용하기 위해 WebSocket을 생성하고 연결합니다.

const socket = new WebSocket("ws://localhost:8000/ws");

socket.onmessage = (event) => {
    const data = event.data;
    // 데이터 시각화 로직 구현
}

onmessage 이벤트 핸들러에서 데이터를 받아와서 시각화 로직을 구현하면 됩니다.

데이터 시각화

시각화를 위해 많은 라이브러리들이 존재하지만, 이 예시에서는 Chart.js를 사용하도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Real-time Data Visualization</title>
</head>
<body>
    <canvas id="chart"></canvas>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const socket = new WebSocket("ws://localhost:8000/ws");

        const ctx = document.getElementById("chart").getContext("2d");
        const chart = new Chart(ctx, {
            type: "line",
            data: {
                labels: [],
                datasets: [{
                    label: "CPU Usage",
                    borderColor: "rgb(255, 99, 132)",
                    data: [],
                }]
            },
            options: {}
        });

        socket.onmessage = (event) => {
            const data = event.data;

            if (chart.data.labels.length >= 20) {
                chart.data.labels.shift();
                chart.data.datasets[0].data.shift();
            }

            chart.data.labels.push("");
            chart.data.datasets[0].data.push(parseFloat(data));
            chart.update();
        };
    </script>
</body>
</html>

위 코드에서는 Chart.js를 사용하여 실시간 데이터를 라인 차트로 시각화합니다. 데이터를 받을 때마다 차트에 데이터를 추가하고, 최근 20개의 데이터만 표시하도록 설정했습니다.

실행 및 결과

먼저, FastAPI 애플리케이션을 실행합니다.

uvicorn main:app --reload

웹 브라우저에서 http://localhost:8000을 열고, 실시간 데이터 시각화가 동작하는 것을 확인할 수 있습니다.

위의 예시에서는 CPU 사용량을 실시간으로 데이터로서 수집하여 차트로 시각화하는 예시를 보여주었습니다. FastAPI의 강력한 기능과 실시간 데이터 시각화의 가능성을 활용하여 여러분의 프로젝트에 적용해보세요!

#FastAPI #데이터시각화