FastAPI で WebSocket を使用して Jinja2 テンプレートのコメント リストを更新する方法

FastAPI を使用して Jinja2 テンプレートの項目の更新リストを取得する方法?

問題:

次のようなシナリオを考えてみましょう。あなたはブログにコメント システムを構築しています。 Jinja2 テンプレートを使用して既存のコメントをレンダリングしています。新しいコメントが FastAPI ルート経由で投稿されると、テンプレートに表示されるコメントのリストを更新する必要があります。

解決策:

Jinja2 は次の用途には最適ではありません。リアルタイム更新を処理する場合、WebSocket を使用して解決策を見つけることができます。これには、FastAPI バックエンドと Jinja2 テンプレートの両方を変更する必要があります:

FastAPI Backend (app.py):

• WebSocket 接続を管理する ConnectionManager クラスを作成します。
• 特定のクライアントにメッセージを送信するための send_personal_message メソッドを定義します。
• 接続されているすべてのクライアントにメッセージを送信するためのブロードキャスト メソッドを定義します。
• 接続を処理するために / ルートを更新し、コメント リストをテンプレートに渡します.
• WebSocket エンドポイント (/ws) を作成して、受信 WebSocket 接続を処理し、新しいコメントをブロードキャストします。

Jinja2 テンプレート (index.html):

• を追加します。
• JavaScript 関数 addComment を作成して、WebSocket 経由で新しいコメントを送信します。
• WebSocket の onmessage イベント ハンドラーで、新しいコメントを表示する HTML 要素を作成して追加します。
  へ

コード例:

<code class="html"><!-- app.py -->
@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>

<code class="html"><!-- index.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)
    };
    function addComment(event) {
        var author = document.getElementById("author")
        var content = document.getElementById("content")
        ws.send(JSON.stringify({
            "author": author.value,
            "content": content.value
        }))
        author.value = ''
        content.value = ''
        event.preventDefault()
    }
</script></code>

WebSocket を利用することで、FastAPI バックエンドとJinja2 テンプレート。更新されたコメントのリストを UI に表示できます。

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