FastAPI WebSocket を使用して Jinja2 テンプレートでリアルタイム コメント リストを維持する方法

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

コメント システムでは、コメントの最新のリストを維持することが重要ですシームレスなユーザーエクスペリエンスを提供します。新しいコメントが追加されると、手動で再ロードしなくてもテンプレートに反映される必要があります。

Jinja2 では、通常、コメント リストの更新は API 呼び出しを通じて行われます。ただし、このアプローチでは遅延が発生し、ユーザー インターフェイスの応答性が低下する可能性があります。より効率的なソリューションには、WebSocket などのリアルタイム通信テクノロジを活用することが含まれます。

FastAPI および Jinja2 での WebSocket の実装

WebSocket プロトコルのサブセットである WebSocket は、2 つの機能を提供します。クライアント (ブラウザ) とサーバー (バックエンド) 間の -way 通信チャネル。これにより、新しく追加されたコメントを含むリアルタイムの更新をクライアントにブロードキャストできます。

このシナリオで WebSocket を実装するには、FastAPI とその組み込み WebSocket 機能を利用します。以下のコード スニペットは、WebSocket エンドポイントの作成方法を示しています。

<code class="python">from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # WebSocket handling
    ...</code>

websocket_endpoint 関数内で、クライアントとの WebSocket 接続を確立し、受信データを処理します。新しいコメントを受信すると、broadcast() メソッドを使用して、接続されているすべてのクライアントにコメントをブロードキャストします。

Jinja2 テンプレートの更新

Jinja2 テンプレートを更新するには新しいコメントでは、フロントエンド JavaScript で onmessage イベント リスナーを使用します。新しいコメント メッセージを受信すると、新しい

を作成します。要素を動的に作成し、コメントの作成者とコンテンツを設定します。その後、要素が既存の

に追加されます。

Jinja2 でテンプレートを更新する方法の例を次に示します。

<code class="html"><script>
    // ...WebSocket initialization

    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>

FastAPI と Jinja2 を使用して WebSocket を実装することで、応答性の高いリアルタイム コメント システムを実現します。新しく追加されたコメントは、手動での再読み込みや API 呼び出しを必要とせずに、すぐにテンプレートに反映されます。

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