실시간 대화형 플로팅(소켓, Python 및 Plotly 사용)

회사의 주가, 센서의 데이터 또는 컴퓨터의 CPU 사용량에 대한 그래프를 그려야 하는 경우가 있을 수 있습니다. 이 모든 것은 데이터 수집과 검색 사이에 지연이 거의 또는 전혀 없는 실시간 데이터의 예입니다.

이 기사에서는 실시간 플로팅 시스템의 서버 측 구현에 대해 설명합니다. 클라이언트 측의 경우 다음을 참조하십시오.

서버와 클라이언트 간의 실시간 통신은 WebSocket을 사용하여 이루어집니다. 웹 소켓에 대해 자세히 알아볼 수 있습니다here.

다음 라이브러리/프레임워크 및 언어를 사용합니다.

파이썬

리액트

파이썬-소켓IO

플로틀리(Python)

또한 Pandas & YFinance를 사용하여 주식 세부 정보를 가져왔지만 자신의 데이터 소스를 연결할 수 있습니다.

프로젝트 설정

Python 가상 환경 생성 및 활성화

python3 -m venv venv
source venv/bin/activate

요구 사항을 설치합니다. 종속성의 전체 목록은 여기에서 찾을 수 있습니다. - requirements.txt

pip3 install -r requirements.txt

소켓 연결 처리

여기서는 연결, 연결 해제 및 클라이언트로의 데이터 전송을 처리했습니다.

클라이언트가 서버에 연결하면 통신 중에 추가 참조를 위해 고유 ID(세션 ID 또는 Sid)가 클라이언트에 할당됩니다.

이 고유 ID를 연결된 클라이언트의 모든 sid 보유 목록에 sid로 저장했습니다. 클라이언트가 연결 해제되면(일반적으로 브라우저 탭을 닫음) 목록에서 해당 특정 클라이언트의 sid를 제거합니다.

클라이언트는 ping_graph 라는 이벤트를 내보냅니다. 이벤트 핸들러ping_graph(라인 22-34)는 클라이언트가 요청한 데이터(이 경우 플롯을 원하는 회사의 기호)로 클라이언트를 지속적으로 핑할 책임이 있습니다.

while 루프는 클라이언트가 서버에 연결되어 있고 그래프의 데이터(이 경우 jsonified) 버전을 계속 보내는 동안 실행됩니다. 클라이언트 연결이 끊어지면 루프 실행이 중지됩니다.

데이터 플로팅

이제 데이터를 실제로 플롯하는 부분입니다. Python에서 대화형 플롯을 쉽게 만들 수 있는 라이브러리Plotly를 사용했습니다.

1분 간격으로 yfinance 회사의 주식 데이터를 가져옵니다. 다음으로 데이터를 사용하여 산 그래프를 그립니다. 가격이 상승, 하락 또는 동일하게 유지되는지에 따라 선 색상이 변경되도록 설정했습니다. 범위를 빠르게 전환할 수 있는 버튼도 추가했습니다.

마지막으로 전체 그림을 렌더링을 위해 클라이언트 측으로 보낼 JSON 개체로 변환했습니다.

React를 사용하여 플롯을 렌더링하는 단계는 찾을 수 있습니다.

Socket.IO 서버 실행

gunicorn 및 eventlet를 사용하여 Socket.IO 서버를 실행합니다.

참고: 디렉토리 구조는 다음과 같습니다.

GitHub 저장소 링크: Real Time Plot

Tech Daily의 Unsplash 사진