Flask WebSocket

Salman Mehmood 2022年8月18日

Flask Flask WebSocket

この説明では、WebSocket とは何か、および WebSocket がクライアントとサーバー間でどのように機能するかを学習します。また、Flask の flask_socketio モジュールを使用してリアルタイムチャットアプリケーションを作成する方法についても学習します。

Flask の `flask_socketio` WebSocket を使用してリアルタイムアプリケーションを作成する

WebSocket は、クライアントとサーバーの間でソケットを開く方法です。WebSocket を使用すると、リアルタイムでメッセージを送信できます。

これは、Web の典型的な要求/応答モデルではありません。これは、開いた接続が常に存在し、サーバーとクライアントが常に相互に通信できるようなものです。

チャットアプリを作成しましょう。最初に処理するのはサーバー側です。2つの側面があります。1つは Flask から処理されるサーバー側で、もう 1つは JavaScript から処理されるクライアント側です。

拡張機能 flask_socketio を使用すると、クライアントはサーバーに接続できるため、次のコマンドを使用して flask_socketio モジュールをインストールする必要があります。

pip install Flask-SocketIO

必要な依存関係とともに flask_socketio をインストールします。flask_socketio は一般的な Flask アプリと非常によく似ており、パターンは同じですが、使用するもののいくつかはわずかに異なります。

このアプリをビルドするために、いくつかのクラスと send 関数をインポートします。次に、アプリインスタンスを作成します。すべてのメッセージが暗号化されているため、秘密鍵が必要です。秘密鍵を config 値として定義します。

次に、SocketIO() クラスのオブジェクトを作成し、アプリを渡してインスタンス化します。2 番目の引数は、すべてのドメインを許可することです。

app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")

次に、ルート内で指定した特定のイベントをリッスンするルートを定義し、関数名 Text_MSG() でメッセージを送信するときにいつでも呼び出される関数を作成します。

この関数は msg と呼ばれるパラメーターを取り、それを出力して、すべてがコンソールで機能していることを確認します。

誰からのメッセージも受け取り、その時点でサーバーに接続しているすべての人に送信します。send() 関数を使用します。この関数は 2つのパラメーターを取ります。1つはテキストメッセージである msg であり、もう 1つは True と等しい broadcast です。

False を broadcast に渡すか、この引数を渡さない場合、最初にメッセージを受け取った人にメッセージを送信するようにデフォルト設定されます。

1つのクライアントから受信したのと同じメッセージをブロードキャストして送信するため、受信したばかりのクライアントを含むすべてのクライアントにメッセージを送り返します。

@socketio.on("message")
def Text_MSG(msg):
    print("text-message: " + msg)
    send(msg, broadcast=True)

app.run() を使用する代わりに、socketio.run(app) を使用し、リアルタイム環境で Flask アプリを実行するための追加機能を備えています。

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

HTML ページになるフロントエンドの建物に入りましょう。クライアント側の socket.io ライブラリの CDN からいくつかのスクリプトをインポートします。また、jQuery を使用してボタンのクリックイベントを処理します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

body タグに JavaScript コードを記述します。jQuery を使用しているため、ready() メソッドを使用する必要があり、この $(document).ready() 内で、flask アプリが実行されているサーバーに接続する必要があります。

socket というオブジェクトを作成し、connect() を使用してインスタンス化し、Flask サーバーの URL を渡します。オブジェクトを作成したら、サーバーに接続するときに、サーバーにメッセージを送信できることを確認する必要があります。

$(document).ready(function() {

    var socket = io.connect('http://127.0.0.1:5000');

    socket.on('connect', function() {
        socket.send('User has connected!');
    });

});

これは、特定のイベントをリッスンしていることを意味し、サーバーに最初に接続するたびに接続イベントが発生し、それが発生すると、この socket.on() コールバック関数が呼び出されます。このコールバック関数は、ユーザーが接続しているサーバーに送信し、サーバーはそれを取得して読み取り、全員に送り返します。

サーバーに送信されたメッセージをミラーリングするコードを追加して、connect の代わりに別のイベントをリッスンします。message コールバック関数は、メッセージをメッセージのリストに追加し、リストアイテムをメッセージのテキストに固定します。

socket.on('message', function(msg) {
    $("#messages").append('<li>'+msg+'</li>');
    console.log('Received message');
});

最後に、ボタンを使用してメッセージを送信できるようにします。そのため、送信ボタンにクリックイベントを配置し、myMessage ID を input タグ ID に付加します。

それを送信したら、val('') メソッドを使用して新しいメッセージ用のスペースを確保するためにメッセージをクリアします。

$('#sendbutton').on('click', function() {
    socket.send($('#myMessage').val());
    $('#myMessage').val('');
});

次に、それを保存して Flask サーバーを実行し、次に 2つのウィンドウで index.html ファイルを開きます。入力フィールド内にテキストを入力して send ボタンを押すと、別のウィンドウで同時にメッセージを受信します。

FlaskWebSocket の出力

注：エラーが発生した場合は、ターミナル内で次のコマンドを実行してください。

pip install --upgrade python-socketio==4.6.0

pip install --upgrade python-engineio==3.13.2

pip install --upgrade Flask-SocketIO==4.3.1

完全な Python コード：

from flask import Flask
from flask_socketio import SocketIO, send

app = Flask(__name__)
app.config["SECRET_KEY"] = "ffff111jjj52"
socketio = SocketIO(app, cors_allowed_origins="*")


@socketio.on("message")
def Text_MSG(msg):
    print("text-message: " + msg)
    send(msg, broadcast=True)


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

完全な HTML コード：

<html>
<head>
<title>Chat Room</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {

    var socket = io.connect('http://127.0.0.1:5000');

    socket.on('connect', function() {
        socket.send('User has connected!');
    });

    socket.on('message', function(msg) {
        $("#messages").append('<li>'+msg+'</li>');
        console.log('Received message');
    });

    $('#sendbutton').on('click', function() {
        socket.send($('#myMessage').val());
        $('#myMessage').val('');
    });

});
</script>
<ul id="messages"></ul>
<input type="text" id="myMessage">
<button id="sendbutton">Send</button>
</body>
</html>

著者： Salman Mehmood

Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.

Flask の flask_socketio WebSocket を使用してリアルタイムアプリケーションを作成する

Flask の `flask_socketio` WebSocket を使用してリアルタイムアプリケーションを作成する