Flask、Socket.ioの例

【Copilotの答えの始め】

 

FlaskとSocket.ioを使った簡単なリアルタイムチャットアプリの例をご紹介します。この例では、ユーザーが送信したメッセージをリアルタイムで他のユーザーに表示するシンプルなチャットアプリを作成します。

1. Flaskアプリのセットアップ

まず、必要なパッケージをインストールします。

1
 
pip install Flask Flask-SocketIO

2. サーバーサイドのコード

次に、app.pyという名前のファイルを作成し、以下のコードを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
from flask import Flask, render_template
from flask_socketio import SocketIO, send

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

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

@socketio.on('message')
def handle_message(msg):
    print('Message: ' + msg)
    send(msg, broadcast=True)

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

3. クライアントサイドのコード

次に、templatesフォルダを作成し、その中にindex.htmlという名前のファイルを作成して、以下のコードを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リアルタイムチャット</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>リアルタイムチャット</h1>
    <div id="chat">
        <input type="text" id="message" placeholder="メッセージを入力">
        <button onclick="sendMessage()">送信</button>
    </div>
    <div id="messages"></div>

    <script>
        var socket = io();

        socket.on('message', function(msg){
            var messages = document.getElementById('messages');
            var message = document.createElement('div');
            message.textContent = msg;
            messages.appendChild(message);
        });

        function sendMessage() {
            var input = document.getElementById('message');
            var message = input.value;
            socket.send(message);
            input.value = '';
        }
    </script>
</body>
</html>

4. アプリの実行

最後に、app.pyファイルを実行してアプリケーションを起動します。

1
 
python app.py

これで、ブラウザでhttp://localhost:5000にアクセスすると、リアルタイムチャットアプリが動作します。メッセージを入力して送信すると、他のユーザーにもリアルタイムでメッセージが表示されるようになります。

 

【Copilotの答えの終わり】

 

 

 

 

川の険父は蜻蛉で尺鰔