프로그래밍/Python

[Python 강의] 23강 - Flask 웹소켓(WebSockets)

월횽 2024. 10. 30. 06:30
728x90
반응형
SMALL


안녕하세요! 그레이 해커 월횽입니다. 오늘은 Flask와 웹소켓(WebSockets)을 사용하여 실시간 통신을 구현하는 방법에 대해 알아보겠습니다. 웹소켓은 서버와 클라이언트 간의 양방향 통신을 지원하며, 실시간 채팅, 알림 시스템, 라이브 데이터 스트리밍 등과 같은 애플리케이션에 매우 유용합니다.

 

 

1. 웹소켓(WebSockets) 기본 개념

웹소켓은 HTTP와 달리 클라이언트와 서버 간의 지속적인 연결을 유지하여 양방향으로 데이터를 주고받을 수 있는 프로토콜입니다. 이를 통해 실시간 데이터 업데이트와 빠른 반응이 필요한 애플리케이션에서 효율적으로 통신할 수 있습니다.

 

 

2. Flask-SocketIO 소개

Flask는 웹소켓을 기본적으로 지원하지 않기 때문에, Flask-SocketIO 라이브러리를 사용하여 웹소켓 기능을 쉽게 구현할 수 있습니다. Flask-SocketIO는 Socket.IO 프로토콜을 기반으로 하며, 실시간 웹 애플리케이션에서 안정적으로 사용할 수 있습니다.

반응형

Flask-SocketIO 설치
먼저 Flask-SocketIO를 설치해야 합니다. 터미널에서 다음 명령어를 실행하세요.

pip install flask-socketio

 

 

 

3. Flask 애플리케이션에서 웹소켓 사용하기

간단한 실시간 채팅 애플리케이션을 구현하면서 Flask-SocketIO의 기본 사용법을 배워보겠습니다.

728x90

서버 코드

from flask import Flask, render_template
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('chat.html')

# 메시지를 수신하고, 모든 클라이언트에게 전송
@socketio.on('message')
def handle_message(msg):
    print(f'메시지 수신: {msg}')
    send(msg, broadcast=True)

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

 

SMALL

클라이언트 코드 (chat.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>실시간 채팅</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var socket = io.connect('http://' + document.domain + ':' + location.port);

            // 서버로부터 메시지 수신
            socket.on('message', function(msg) {
                var messageList = document.getElementById('messages');
                var newMessage = document.createElement('li');
                newMessage.textContent = msg;
                messageList.appendChild(newMessage);
            });

            // 메시지 전송
            document.getElementById('sendButton').onclick = function() {
                var userInput = document.getElementById('userInput').value;
                socket.send(userInput);
                document.getElementById('userInput').value = '';
            };
        });
    </script>
</head>
<body>
    <h1>실시간 채팅</h1>
    <ul id="messages"></ul>
    <input type="text" id="userInput" placeholder="메시지를 입력하세요">
    <button id="sendButton">전송</button>
</body>
</html>

 

결과

실시간 채팅

실시간 채팅

    4. Flask-SocketIO의 주요 기능

    · Broadcast: 위 예제에서 사용한 것처럼, 메시지를 모든 연결된 클라이언트에 전송할 수 있습니다. broadcast=True 옵션을 사용하여 메시지를 방송합니다.
    · 이벤트 핸들링: 웹소켓은 여러 이벤트를 처리할 수 있습니다. 위 예제에서는 기본적인 message 이벤트를 사용했지만, 커스텀 이벤트를 만들어 더 복잡한 기능을 구현할 수 있습니다.

    @socketio.on('my_event')
    def handle_custom_event(data):
        print(f'커스텀 이벤트 수신: {data}')

     

    · 네임스페이스: 서로 다른 네임스페이스를 사용하여 여러 기능을 분리할 수 있습니다.

    @socketio.on('my_event', namespace='/chat')
    def handle_chat_event(msg):
        send(msg, broadcast=True, namespace='/chat')

     

     

     

    5. 실시간 애플리케이션 활용 예시

    · 실시간 채팅: 여러 사용자가 동일한 채팅방에서 메시지를 주고받을 수 있도록 구현할 수 있습니다.
    · 알림 시스템: 서버에서 발생하는 이벤트를 클라이언트에 즉시 알릴 수 있습니다.
    · 라이브 데이터 피드: 주식 시세, 스포츠 경기 점수 등 실시간으로 변하는 데이터를 클라이언트에게 지속적으로 업데이트할 수 있습니다.

     

     

    6. Flask 웹소켓 정리

    · Flask-SocketIO를 사용하여 Flask에서 웹소켓을 쉽게 구현할 수 있습니다.
    · 실시간 채팅과 같은 양방향 통신이 필요한 애플리케이션에서 웹소켓을 사용하면 빠른 응답성을 제공할 수 있습니다.
    · 웹소켓을 이용한 실시간 통신은 여러 가지 실시간 서비스에 적용할 수 있습니다.

     

    다음 시간에는 Flask에서 REST API 설계 및 구현에 대해 알아보겠습니다!

     

     

     

     

     

    - 이전 수업 목록

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    728x90
    반응형
    LIST