다시 도전.. Flask-SocketIO 사용해서 live-graph 만들기 (8)

<본 블로그는 donskytech 님의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

https://www.donskytech.com/python-flask-websockets/

Display Real-Time Updates Using Python, Flask, and Websockets

 

 

🔥 Flask-SocketIO

Flask 애플리케이션이 클라이언트와 서버 간의 대기 시간이 짧은 양방향 통신에 액세스

클라이언트 측 애플리케이션은 Javascript, Python, C++, Java 및 Swift 의 모든 SocketIO 클라이언트 라이브러리 또는 기타 호환 가능한 클라이언트를 사용하여 서버에 대한 영구 연결을 설정

 

SocketIO

• 실제 전송 프로토콜에서 클라이언트 응용 프로그램을 추상화하는 브라우저 간 Javascript 기반 라이브러리.

 

✔ flask에서 socket 만들기

Flask-SocketIO 참고

https://bokyeong-kim.github.io/python/flask/2020/05/09/flask(1).html

socketio = SocketIO(app)

• SocketIO는 ‘앱’에 적용되고 있으며 나중에 애플리케이션을 실행할 때 앱 대신 socketio를 사용할 수 있도록 socketio 변수에 저장
• socketio는 웹 서버를 캡슐화

 

@app.route('/')
def sessions():
    return render_template('session.html')

• 홈페이지 (경로 데코레이터‘/’로 표시)를 방문하면 그 아래에 선언 된 세션보기가 트리거
  • render_template : HTML 페이지를 렌더링, 템플릿 폴더에 포함
• 언급 된 URL을 열 때 호출

 

✔ Flask-Socket Handling

• 서버가 클라이언트가 보낸 메시지를 받는 방법
• 클라이언트의 메시지를 확인하는 방법
• 클라이언트에서 WebSocket 메시지를 수신하기 위해 애플리케이션은 socketio.on 데코레이터(@socketio.on())를 사용하여 이벤트 핸들러를 정의
• send() 및 emit() 함수를 사용하여 연결된 클라이언트에 응답 메시지를 보낼 수 있음

@socketio.on('my event')

# json 객체 수신 -> myresponse 이벤트로 전송
def handle_my_custom_event(json, methods=['GET', 'POST']):
    print('received my event: ' + str(json))
    # callback -> 서버에 의해 메시지의 수신 여부 도와주는 디버깅
    socketio.emit('my response', json, callback=messageReceived)

 

✔ 연결 설정 및 세션 생성

var socket = io.connect('http://' + document.domain + ':' + location.port)

• io.connect()를 사용
• 두 사용자 모두 동일한 URL에 연결하여 세션 생성
• document.domain은 작업 중인 컴퓨터의 IP 주소를 나타낸다.
• location.port는 포트를 나타내며, 기본값은 5000

 

 

✔ 이벤트

socket.on( 'connect', function() {
  socket.emit( 'my event', {
    data: 'User Connected'
  })
  var form = $( 'form' ).on( 'submit', function( e ) {
    e.preventDefault()
    let user_name = $( 'input.username' ).val()
    let user_input = $( 'input.message' ).val()
    socket.emit( 'my event', {
      user_name : user_name,
      message : user_input
    })
    $( 'input.message' ).val( '' ).focus()
  })
})

• socket.on()에 대한 첫 번째 인수는 이벤트 이름
  • ‘connect’, ‘disconnect’, ‘message’, ‘json’은 socketIO에 의해 생성된 특수 이벤트
    
    • ‘message’ : 형식 문자열의 페이로드(payload)를 전달
    • ‘json’ : json 사용자 정의 이벤트는 파이썬 사전의 형태로 JSON 페이로드(payload)를 전달
• send() : 문자열 또는 JSON 유형의 표준 메시지를 클라이언트로 보냄
• emit() : 데이터와 함께 사용자 정의 이벤트 이름(위 코드에서는 ‘my event’)으로 메시지를 전송

 

🔥 Chart.js

차트 유형, 플러그인 및 사용자 정의 옵션 세트를 제공

내장 TypeScript 타이핑과 함께 제공되며 React , Vue , Svelte 및 Angular 를 포함하여 널리 사용되는 모든 JavaScript 프레임워크 와 호환

HTML5 캔버스에서 차트 요소를 렌더링

 

 

🔥 Web-Socket

거의 실시간으로 정보를 표시하는 수단

오버헤드가 거의 없는 양방향 방식으로 정보를 전송하는 수단

 

(HTTP ( Hypertext Transfer Protocol )를 사용 하면 전송 속도 측면에서 약간의 오버헤드가 발생)

 

Socket

• 한 컴퓨터가 다른 컴퓨터와 상호 작용할 수 있는 경로 설정
• 게이트가 열려있을 때, 즉 소켓이 열려있는 경우에만 통신을 가능하게 하는 게이트

 

🔥 Flask

웹 사용자 인터페이스를 표시해야 하는 경우 사물 인터넷(IOT) 에서 사용할 수 있는 "마이크로" 웹 프레임워크

HTML 페이지 표시 or JSON (Javascript Object Notation) 반환

 

 

🔥 코드 구현

 

 

• app.py

from flask import Flask, render_template, request
from flask_socketio import SocketIO
from random import random
from threading import Lock
from datetime import datetime
import pandas as pd

"""
Background Thread
"""
thread = None
thread_lock = Lock()

app = Flask(__name__)
app.config['SECRET_KEY'] = 'gani!'
socketio = SocketIO(app, cors_allowed_origins='*')

"""
Get current date time
"""
def get_current_datetime(years):
    #now = datetime.now()
    return years.strftime("%m-%d-%Y %H:%M:%S")

"""
Generate random sequence of dummy sensor values and send it to our clients
"""

CNT_WAIT = []
YEARS = []
def data_load() :
    data = pd.read_csv('./data/test.csv')
    
    for i in range(len(data)) :
        CNT_WAIT.append(int(data["cnt_wait"][i]))
        YEARS.append(data["insert_date_time"][i])

    return CNT_WAIT, YEARS

def background_thread():
    print("Generating random sensor values")
    CNT_WAIT_data, YEARS_data = data_load()
    #YEARS_data = get_current_datetime(YEARS_data)
    cnt = 0
    while True:
        # 랜덤 상수를 value : 옆에 넣으면 랜덤 그래프 완성
        # dummy_sensor_value = round(random() * 100, 3)
        print(CNT_WAIT_data[cnt])
        print(YEARS_data[cnt])
        # print(dummy_sensor_value)
        
        socketio.emit('updateSensorData', {'value': CNT_WAIT_data[cnt], "date": YEARS_data[cnt]})
        cnt += 1
        socketio.sleep(1)


"""
Serve root index file
"""
@app.route('/')
def index():
    return render_template('index.html')

"""
Decorator for connect
"""
@socketio.on('connect')
def connect():
    global thread
    print('Client connected')

    global thread
    with thread_lock:
        if thread is None:
            thread = socketio.start_background_task(background_thread)

"""
Decorator for disconnect
"""
@socketio.on('disconnect')
def disconnect():
    print('Client disconnected',  request.sid)

if __name__ == '__main__':
    socketio.run(app)

 

• template/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Real Time Sensor Display Using Python, Flask, Flask-SocketIO</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
    <link
      href="//mincss.com/entireframework.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="{{url_for('static', filename = 'css/app.css')}}" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/app.js') }}"></script>

    <nav class="nav" tabindex="-1" onclick="this.focus()">
      <div class="container">
        <a class="pagename current" href="#">배고프당당구리</a>
      </div>
    </nav>
    <button class="btn-close btn btn-sm">×</button>
    <div class="container">
      <div class="hero">
        <h1>Real Time Graph Display</h1>
        <div class="chart-container">
          <canvas id="myChart" width="1000" height="600"></canvas>
        </div>
      </div>
    </div>
  </body>
</html>

 

• js/app.js

$(document).ready(function () {
    const ctx = document.getElementById("myChart").getContext("2d");
  
    const myChart = new Chart(ctx, {
      type: "line",
      data: {
        datasets: [{ label: "Temperature",  }],
      },
      options: {
        borderWidth: 3,
        borderColor: ['rgba(255, 99, 132, 1)',],
      },
    });
  
    function addData(label, data) {
      myChart.data.labels.push(label);
      myChart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
      });
      myChart.update();
    }
  
    function removeFirstData() {
      myChart.data.labels.splice(0, 1);
      myChart.data.datasets.forEach((dataset) => {
        dataset.data.shift();
      });
    }
  
    const MAX_DATA_COUNT = 10;
    //connect to the socket server.
    //   var socket = io.connect("http://" + document.domain + ":" + location.port);
    var socket = io.connect();
  
    //receive details from server
    socket.on("updateSensorData", function (msg) {
      console.log("Received sensorData :: " + msg.date + " :: " + msg.value);
  
      // Show only MAX_DATA_COUNT data
      if (myChart.data.labels.length > MAX_DATA_COUNT) {
        removeFirstData();
      }
      addData(msg.date, msg.value);
    });
  });

 

• css/app.css

.hero {
    background: #eee;
    padding: 20px;
    border-radius: 10px;
    margin-top: 1em;
}

.hero h1 {
    margin-top: 0;
    margin-bottom: 0.3em;
    text-align: center;
}


.chart-container {
	max-width: 800px;
	margin: 0 auto;
}