WebSocket と FastAPI を使用して Jinja2 テンプレートにリアルタイムのコメント更新を実装する方法

FastAPI を使用した Jinja2 テンプレートの項目の更新リストの取得

このチュートリアルでは、次を使用してリアルタイム チャット アプリケーションを実装する方法を示します。コメントリストを動的に更新するための FastAPI と Jinja2。アプリケーションは WebSocket を利用して、サーバーと複数のクライアントの間に双方向通信チャネルを確立します。

問題:

新しいコメントを動的に送信する必要があるブログ コメント システムを構築すると想像してください。ページを更新せずにフロントエンドに追加されます。 Jinja2 テンプレートはページ上の既存のコメントをレンダリングするために使用されますが、新しく追加されたコメントをリアルタイムで取得して表示するにはメカニズムが必要です。

解決策:

この機能を実現するために、単一の TCP 接続を介したリアルタイムの双方向通信を可能にするテクノロジーである WebSockets を導入します。 FastAPI と Jinja2 を使用して WebSocket を実装すると、サーバーとクライアントの間に永続的な接続を確立でき、サーバーが接続されているすべてのクライアントにリアルタイムで新しいコメントをブロードキャストできるようになります。

WebSocket の実装:

FastAPI で WebSocket をセットアップするには、受信接続を処理し、各クライアントの専用接続を確立する WebSocket エンドポイントを作成します。次のコードは、WebSocket エンドポイントを示しています。

<code class="python">@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_json()
            comments.append(Comment(data['author'], data['content']))
            await manager.broadcast(data)
    except (WebSocketDisconnect, ConnectionClosed):
        manager.disconnect(websocket)</code>

このコード内:

• manager は、アクティブな接続のリストを処理し、メッセージ ブロードキャストを管理する ConnectionManager のインスタンスです。
• クライアントが /ws エンドポイントに接続すると、connect メソッドが呼び出され、クライアントがアクティブな接続のリストに追加されます。
• while ループは、クライアントからの受信メッセージを処理します。新しいメッセージを受信すると、新しいコメントが作成され、コメント リストに追加されます。更新されたリストは、ブロードキャスト メソッドを使用して、接続されているすべてのクライアントにブロードキャストされます。
• クライアントが接続を閉じるか例外が発生すると、disconnect メソッドが呼び出され、アクティブな接続のリストからクライアントが削除されます。

Jinja2 テンプレートの更新:

Jinja2 テンプレートに更新されたコメントを表示するには、JavaScript と WebSocket を使用してサーバーからの受信メッセージをリッスンし、動的に追加します。ページへの新しいコメント。 Index.html テンプレートには、次の JavaScript コードが含まれています:

<code class="html"><script>
  var ws = new WebSocket("ws://localhost:8000/ws");
  ws.onmessage = function(event) {
    var comments = document.getElementById('comments');
    var comment = document.createElement('li');
    var jsonObj = JSON.parse(event.data);
    var authorNode = document.createElement('h3');
    authorNode.innerHTML = jsonObj.author;
    var contentNode = document.createElement('p');
    contentNode.innerHTML = jsonObj.content;
    comment.appendChild(authorNode);
    comment.appendChild(contentNode);
    comments.appendChild(comment);
  };
</script></code>

この JavaScript コード:

• 指定された WebSocket URL を使用して、サーバーへの WebSocket 接続を確立します。
• サーバーからの受信メッセージをリッスンするイベント リスナーを定義します。
• メッセージが受信されると、メッセージから JSON データを解析し、受信した作成者とコンテンツを使用して新しい HTML コメント要素を作成します。
• 最後に、新しいコメント要素が HTML のコメント コンテナに追加され、ページが動的に更新されます。新しいコメント。

結論

WebSocket を FastAPI および Jinja2 と統合することで、リアルタイム更新を可能にする動的コメント システムを実装しました。この手法は、クライアントとサーバー間でメッセージやデータをリアルタイムで送受信する必要があるさまざまなシナリオに適用でき、高度にインタラクティブで応答性の高いユーザー エクスペリエンスを提供します。

以上がWebSocket と FastAPI を使用して Jinja2 テンプレートにリアルタイムのコメント更新を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。