この記事では、PythonのFlaskフレームワークとWebSocketを使用して簡易的なチャットアプリケーションを作成する方法を紹介します。
FlaskとWebSocketの基本
まず、FlaskとWebSocketの基本的な使い方について説明します。FlaskはPythonで書かれた軽量なWebフレームワークで、WebSocketはリアルタイムの双方向通信を可能にするプロトコルです。
サーバーサイドの設定
以下に、FlaskとWebSocketを使用したサーバーサイドの基本的な設定を示します。
from flask import Flask, request, render_template, send_from_directory
from flask_socketio import SocketIO, emit
from flask_cors import CORS
app = Flask(__name__, static_folder='static', static_url_path='/')
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")
CORS(app, supports_credentials=True, responses={r"/*": {"origins": "*"}})
@app.route('/')
def index():
return render_template('index.html')
@app.route('/<path:filename>')
def serve_static(filename):
return send_from_directory('static', filename)
@socketio.on('message', namespace='/demo')
def handle_message(message):
emit('message', f'{request.sid} => {message}', namespace='/demo', broadcast=True)
if __name__ == '__main__':
socketio.run(app, host='0.0.0.0', port=5002, debug=True)
このコードでは、Flaskアプリケーションを作成し、WebSocketを設定しています。
クライアントサイドの設定
次に、クライアントサイドの設定を示します。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input id="message_input" autocomplete="off" /><button id="send">Send</button>
<ul id="messages"></ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script type="text/javascript">
const socket = io.connect('/demo')
socket.on('message', (data) => {
console.log('message', data)
const li = document.createElement('li')
li.appendChild(document.createTextNode(data))
document.getElementById('messages').appendChild(li)
})
document.getElementById('send').addEventListener('click', (e) => {
const message_input = document.getElementById('message_input')
const message = message_input.value
socket.emit('message', message)
message_input.value = ''
})
document.getElementById('message_input').addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
const message_input = document.getElementById('message_input')
const message = message_input.value
socket.emit('message', message)
message_input.value = ''
}
})
</script>
</body>
</html>
このHTMLコードでは、メッセージを送信するための入力フィールドと送信ボタン、そしてメッセージを表示するためのリストを作成しています。
以上が、PythonのFlaskとWebSocketを使用して簡易的なチャットアプリケーションを作成する基本的な手順です。この知識を基に、さらに複雑なリアルタイムWebアプリケーションの開発に挑戦してみてください。.