ホームページ > 記事 > バックエンド開発 > Flask-SocketIO を使用してリアルタイム通信アプリケーションを実装する方法

Flask-SocketIO を使用してリアルタイム通信アプリケーションを実装する方法

王林オリジナル: 2023-08-03 21:57:221349ブラウズ

はじめに:
Web アプリケーションでは、リアルタイム通信はユーザーがリアルタイムで情報を交換できるようにする非常に重要な機能です。、またはリアルタイムでサーバーによってプッシュされたデータを受信します。 Flask-SocketIO は Flask フレームワークに基づくプラグインで、WebSocket を使用してリアルタイム通信を実現する機能を提供します。この記事では、Flask-SocketIOを使用して簡単なリアルタイム通信アプリケーションを実装する方法を紹介します。

準備作業:
まず、Flask-SocketIO プラグインをインストールする必要があります。次のコマンドでインストールできます:

pip install flask-socketio

さらに、フロントエンドでのリアルタイム通信用に Socket.IO JavaScript ライブラリもインストールする必要があります。次のコマンドでインストールできます:

npm install socket.io-client

これらの準備が完了したら、コードの記述を開始できます。

コード例:
以下は、簡単な Flask-SocketIO リアルタイム通信アプリケーションのコード例です:

必要なライブラリとモジュールを紹介します

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

Flask アプリケーションを作成して構成する

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):
 print('received message: ' + message)
 emit('response', {'data': 'Server response'})

@socketio.on('connect')
def handle_connect():
 print('client connected')

@socketio.on('disconnect')
def handle_disconnect():
 print('client disconnected')

フロントエンドを作成するHTML ファイル
プロジェクトのルートディレクトリにindex.html という名前のファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
 <title>Real-time Communication</title>
 <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
</head>
<body>
 <h1>Real-time Communication</h1>
 <input id="message-input" type="text" placeholder="Enter message">
 <button id="send-button">Send</button>
 <div id="response-div"></div>

 <script type="text/javascript">
     var socket = io.connect();

     $('#send-button').click(function() {
         var message = $('#message-input').val();
         socket.emit('message', message);
     });

     socket.on('response', function(data) {
         $('#response-div').text(data.data);
     });
 </script>
</body>
</html>

アプリケーションを開始します
次のコードをアプリケーションのエントリに追加しますアプリケーションを開始するファイル :
```
if __name__ == '__main__':
 socketio.run(app, debug=True)
```

アプリケーションを実行した後、ブラウザで http://localhost:5000 にアクセスすると、シンプルなリアルタイム通信アプリケーションインターフェイスが表示されます。メッセージ入力ボックスにメッセージを入力し、送信ボタンをクリックすると、リアルタイムでメッセージを送受信する機能が実現します。

概要:
この記事では、Flask-SocketIO を使用してリアルタイム通信アプリケーションを実装する方法を紹介します。 Flask-SocketIO プラグインを使用すると、サーバーとクライアント間のリアルタイムメッセージ送信を実現するリアルタイム通信アプリケーションを簡単かつ迅速に構築できます。この記事が、Flask-SocketIO を使用してリアルタイム通信アプリケーションを実装する方法を理解するのに役立つことを願っています。

以上がFlask-SocketIO を使用してリアルタイム通信アプリケーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript flask html 事件 http websocket

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Django を使用して高性能 Web アプリケーションを構築する方法次の記事：Django を使用して高性能 Web アプリケーションを構築する方法

続きを見る