ホームページ > バックエンド開発 > Python チュートリアル > Flask フレームワークでの WebSocket アプリケーション実践ガイド

Flask フレームワークでの WebSocket アプリケーション実践ガイド

WBOY
リリース: 2023-09-29 10:06:26
オリジナル
1470 人が閲覧しました

Flask フレームワークでの WebSocket アプリケーション実践ガイド

Flask フレームワークにおける WebSocket アプリケーション実践ガイド

要約: WebSocket は、ブラウザとサーバー間で確立できるリアルタイム双方向通信用のプロトコルです。永続的な接続。 Flask フレームワークを使用して Web アプリケーションを開発すると、WebSocket と組み合わせることで、リアルタイムのデータ更新、インスタント メッセージング、その他の機能を実現できます。この記事では、Flask フレームワークで WebSocket を使用する方法を紹介し、コード例を示します。

はじめに:
インターネットの発展に伴い、リアルタイム要件はますます高くなっており、従来の HTTP リクエスト/レスポンス モデルではこの需要を満たすことができなくなりました。従来はリアルタイム通信を実現するために、ロングポーリングやショートポーリングがよく使われていました。しかし、この方法は非効率的であり、帯域幅を無駄に消費します。 WebSocket プロトコルの登場によりこの問題は解決され、ブラウザとサーバーの間に永続的な全二重接続を確立してリアルタイム通信を実現できるようになりました。

1. WebSocket の原理の概要:
WebSocket プロトコルは、ブラウザとサーバーの間に双方向の通信チャネルを確立できる TCP ベースのプロトコルです。従来の HTTP プロトコルは「リクエスト - レスポンス」モデルです。つまり、クライアントがサーバーにリクエストを送信し、サーバーはリクエストを受信した後にそのリクエストを処理して、クライアントにレスポンスを返します。 WebSocket プロトコルは、クライアントとサーバーの間に永続的な双方向接続を直接確立できます。クライアントとサーバーは、HTTP リクエストと同じパフォーマンスのオーバーヘッドを待たずに、この接続を介してリアルタイムのデータ転送を実行できます。

2. Flask は WebSocket を統合します:
Flask フレームワークでは、WebSocket のサポートは Flask-SocketIO プラグインを通じて実現できます。 Flask-SocketIO は、WebSocket 機能を提供する Flask フレームワークの拡張機能です。 WebSocket を統合する手順は次のとおりです。

  1. Flask-SocketIO のインストール
    pip コマンドを使用して Flask-SockeIO をインストールします:

    pip install flask-socketio
    ログイン後にコピー
  2. Flask-SocketIO をインポートし、アプリケーション オブジェクトを作成します

    from flask import Flask
    from flask_socketio import SocketIO
    
    app = Flask(__name__)
    socketio = SocketIO(app)
    ログイン後にコピー
  3. WebSocket メッセージの受信メソッドを定義します

    @socketio.on('message')
    def handle_message(message):
     print('received message: ' + message)
    ログイン後にコピー
  4. WebSocket メッセージを送信するメソッドを定義します

    def send_message(message):
     socketio.emit('message', message)
    ログイン後にコピー
  5. アプリケーションの開始

    if __name__ == '__main__':
     socketio.run(app)
    ログイン後にコピー

3. WebSocket アプリケーションの例:
以下は、WebSocket を使用してリアルタイム チャット機能を実装する方法を示す簡単なチャット ルームの例です。

from flask import Flask, render_template
from flask_socketio import SocketIO

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(message):
    socketio.emit('message', message)

if __name__ == '__main__':
    socketio.run(app)
ログイン後にコピー

index.html では、JavaScript コードを介してサーバーと対話し、リアルタイム チャット機能を実現できます。

<!DOCTYPE html>
<html>
    <head>
        <title>Flask Websocket Chat</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
        <script>
            var socket = io.connect('http://' + document.domain + ':' + location.port);

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

            socket.on('message', function(data) {
                var new_message = document.createElement('div');
                new_message.innerHTML = data;
                document.querySelector('#messages').appendChild(new_message);
            });

            function sendMessage() {
                var message = document.querySelector('#message_input').value;
                socket.send(message);
            }
        </script>
    </head>
    <body>
        <h1>Flask Websocket Chat</h1>
        <div id="messages"></div>
        <input type="text" id="message_input">
        <button onclick="sendMessage()">Send</button>
    </body>
</html>
ログイン後にコピー

上記のコードを実行すると、簡単な WebSocket チャット ルームを実装できます。

結論:
この記事では、Flask フレームワークに WebSocket を統合する方法を紹介し、簡単なチャット ルームの例を示します。 Flask-SocketIO プラグインを介して、WebSocket を簡単に使用してリアルタイム通信機能を実装できます。 Web アプリケーションを開発する場合、WebSocket を組み合わせることでユーザー エクスペリエンスが向上し、リアルタイムのデータ更新、インスタント メッセージング、その他の機能を実現できます。この記事が Flask フレームワークで WebSocket を使用するのに役立つことを願っています。

以上がFlask フレームワークでの WebSocket アプリケーション実践ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート