ckim의 개인 블로그입니다.

WebSocket을 활용하여 실시간 채팅 기능을 구현하는 것은 현대 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 이번 글에서는 Python의 Flask와 Flask-SocketIO 라이브러리를 사용하여 간단한 실시간 채팅 애플리케이션을 만들어보겠습니다.

Flask와 Flask-SocketIO 설치

먼저, 필요 라이브러리를 설치해야 합니다. 아래 명령어를 통해 Flask와 Flask-SocketIO를 설치하세요.

pip install Flask Flask-SocketIO

기본 Flask 앱 설정

이제 Flask 애플리케이션을 설정해봅시다. 아래 코드를 app.py라는 파일에 작성해 주세요.

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)

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

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

위 코드는 Flask 애플리케이션을 만들고, 기본 라우트를 설정합니다. index.html은 우리가 나중에 만들 실시간 채팅 UI입니다.

HTML 파일 작성

이제 templates 폴더를 만들고 그 안에 index.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.0/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();

        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const messagesDiv = document.getElementById('messages');

        sendButton.onclick = function() {
            const message = messageInput.value;
            socket.emit('send_message', message);
            messageInput.value = '';
        };

        socket.on('receive_message', function(message) {
            const messageElement = document.createElement('div');
            messageElement.textContent = message;
            messagesDiv.appendChild(messageElement);
        });
    </script>
</body>
</html>

WebSocket 이벤트 처리

이제 서버에서 클라이언트로 메시지를 주고받기 위한 이벤트 처리를 추가해야 합니다. app.py 파일에 아래 코드를 추가하세요.

@socketio.on('send_message')
def handle_send_message(message):
    socketio.emit('receive_message', message)

위 코드는 클라이언트가 send_message 이벤트를 발생시키면 해당 메시지를 모든 클라이언트에게 receive_message 이벤트로 전송합니다.

애플리케이션 실행

모든 코드가 준비되었으면, 아래 명령어로 애플리케이션을 실행하세요.

python app.py

웹 브라우저에서 http://127.0.0.1:5000에 접속하면 실시간 채팅 애플리케이션을 사용할 수 있습니다. 여러 브라우저 탭에서 접속하여 서로 메시지를 주고받아 보세요.

마무리

이번 글에서는 Python의 Flask와 Flask-SocketIO를 사용하여 간단한 실시간 채팅 애플리케이션을 구현해보았습니다. 웹 소켓을 통해 실시간으로 메시지를 주고받는 기능을 쉽게 추가할 수 있음을 보여주었습니다. 이 예제를 바탕으로 추가 기능을 구현해보거나, 다른 프로젝트에 응용해보세요.