백엔드 개발 일지에서는 Python과 Flask를 사용하여 실시간 채팅 애플리케이션을 구축하는 방법에 대해 단계별로 안내하겠습니다. 이 가이드를 통해 Flask의 기본 사용법부터, WebSocket을 활용한 실시간 통신 구현까지 배워보겠습니다.

준비물

  1. Python 3.x
  2. Flask
  3. Flask-SocketIO
  4. Flask-CORS
  5. 웹 브라우저

이제 필요한 패키지를 설치해보겠습니다. 아래 명령어를 통해 Flask와 SocketIO를 설치하세요.

pip install Flask Flask-SocketIO Flask-CORS

1단계: Flask 애플리케이션 설정

먼저, app.py라는 이름의 파일을 생성하고 Flask 애플리케이션을 설정합니다.

from flask import Flask, render_template
from flask_socketio import SocketIO

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

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

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

위 코드는 기본적인 Flask 애플리케이션을 설정합니다. / 루트 경로에 접근했을 때 index.html 파일을 렌더링하도록 설정했습니다.

2단계: HTML 파일 생성

templates 폴더를 만들고, index.html 파일을 생성하여 기본적인 HTML을 입력합니다. 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실시간 채팅 애플리케이션</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
</head>
<body>
    <h1>실시간 채팅 애플리케이션</h1>
    <div id="messages"></div>
    <input id="message-input" autocomplete="off"/><button id="send-button">보내기</button>

    <script>
        const socket = io();

        document.getElementById('send-button').onclick = function() {
            const messageInput = document.getElementById('message-input');
            socket.emit('send_message', messageInput.value);
            messageInput.value = '';
        };

        socket.on('receive_message', function(msg) {
            const messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += '<div>' + msg + '</div>';
        });
    </script>
</body>
</html>

위 HTML 코드는 기본적인 채팅 UI를 제공합니다. 메시지를 입력하고 보내기 버튼을 클릭하면 서버에 메시지를 전송합니다.

3단계: WebSocket 이벤트 처리

이제 서버 측에서 클라이언트가 전송한 메시지를 처리하고 클라이언트로 다시 보낼 로직을 추가합니다.

app.py 파일에 다음 코드를 추가합니다. 
@socketio.on('send_message')
def handle_message(msg):
    socketio.send(msg)

위 코드는 send_message 이벤트가 발생했을 때 메시지를 수신하고, 다시 모든 클라이언트에 해당 메시지를 전송하도록 설정합니다.

4단계: 애플리케이션 실행

이제 Flask 애플리케이션을 실행할 준비가 되었습니다. 터미널에서 아래 명령어를 입력하여 애플리케이션을 실행합니다.

python app.py

브라우저에서 http://127.0.0.1:5000에 접속하여 실시간 채팅 애플리케이션을 확인해보세요. 여러 브라우저 탭을 열고 서로 메시지를 주고받으며 실시간 통신이 잘 이루어지는지 확인해보세요.

마무리

이번 포스트에서는 Python과 Flask를 사용하여 간단한 실시간 채팅 애플리케이션을 구축하는 방법을 배워보았습니다. Flask와 Flask-SocketIO를 활용하면 실시간 기능을 손쉽게 구현할 수 있습니다. 이 기본 구조를 바탕으로 사용자 인증, 메시지 저장 등의 기능을 추가하여 보다 완성도 높은 애플리케이션을 개발해보세요. 추가적인 질문이 있거나 더 깊이 있는 학습이 필요하시다면 댓글로 남겨주시면 답변 드리겠습니다. Happy coding!