[파이썬] 웹 프레임워크를 이용한 웹RTC 통신

04 Sep 2023

python

웹RTC(Web Real-Time Communication)은 웹 브라우저 간에 실시간 통신을 가능하게 하는 기술입니다. Python은 다양한 웹 프레임워크를 제공하며, 이를 이용하여 웹RTC를 구현할 수 있습니다. 이 글에서는 Python 웹 프레임워크인 Flask를 사용하여 웹RTC 통신을 구현하는 방법에 대해 살펴보겠습니다.

Flask 설치

먼저, Flask를 설치해야 합니다. 아래의 명령어를 사용하여 Flask를 설치합니다.

pip install flask

Flask 애플리케이션 생성

웹RTC 통신을 위한 Flask 애플리케이션을 생성해보겠습니다. 아래의 코드를 app.py 파일에 작성합니다.

from flask import Flask, render_template, url_for, request
from flask_socketio import SocketIO, emit

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

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

@socketio.on('message')
def handle_message(message):
    print('Received message: ' + message)
    emit('message', message, broadcast=True)

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

HTML 템플릿 생성

웹RTC 통신을 위한 HTML 템플릿을 생성합니다. templates 디렉토리 안에 index.html 파일을 생성하고 아래의 코드를 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>웹RTC 통신</title>
    <script src="{{ url_for('static', filename='socket.io.js') }}"></script>
    <script src="{{ url_for('static', filename='main.js') }}"></script>
  </head>
  <body>
    <h1>웹RTC 통신</h1>
    <input type="text" id="message-input">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>
  </body>
</html>

JavaScript 파일 생성

static 디렉토리 안에 main.js 파일을 생성하고 아래의 코드를 작성합니다.

var socket = io();

function sendMessage() {
    var messageInput = document.getElementById('message-input');
    var message = messageInput.value;
    if (message !== '') {
        socket.emit('message', message);
        messageInput.value = '';
        messageInput.focus();
    }
}

socket.on('message', function(message) {
    var messagesElement = document.getElementById('messages');
    var messageElement = document.createElement('li');
    messageElement.innerHTML = message;
    messagesElement.appendChild(messageElement);
    messagesElement.scrollTop = messagesElement.scrollHeight;
});

실행

이제 애플리케이션을 실행해봅시다. 아래의 명령어를 실행하여 웹 서버를 실행합니다.

python app.py

웹 브라우저에서 http://localhost:5000에 접속하면 웹RTC 통신을 할 수 있는 페이지가 열립니다. 메시지를 입력하고 Send 버튼을 클릭하면 다른 사용자에게 메시지가 전송되고 화면에 표시됩니다.

결론

Python의 Flask를 이용하여 웹RTC 통신을 구현하는 방법을 알아보았습니다. Flask를 사용하면 간편하게 웹RTC를 구현할 수 있으며, 이를 활용하여 다양한 실시간 웹 애플리케이션을 개발할 수 있습니다.