目次
FastAPI を使用して Jinja2 テンプレートの項目の更新リストを取得する方法?
FastAPI Backend (app.py):
Jinja2 テンプレート (index.html):
ホームページ バックエンド開発 Python チュートリアル FastAPI で WebSocket を使用して Jinja2 テンプレートのコメント リストを更新する方法

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

Oct 21, 2024 am 06:15 AM

How to Update Comment List in Jinja2 Templates Using WebSockets with FastAPI?

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 サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

LinuxターミナルでPythonバージョンを表示するときに発生する権限の問題を解決する方法は? LinuxターミナルでPythonバージョンを表示するときに発生する権限の問題を解決する方法は? Apr 01, 2025 pm 05:09 PM

LinuxターミナルでPythonバージョンを表示する際の許可の問題の解決策PythonターミナルでPythonバージョンを表示しようとするとき、Pythonを入力してください...

中間の読書にどこでもfiddlerを使用するときにブラウザによって検出されないようにするにはどうすればよいですか? 中間の読書にどこでもfiddlerを使用するときにブラウザによって検出されないようにするにはどうすればよいですか? Apr 02, 2025 am 07:15 AM

fiddlereveryversings for the-middleの測定値を使用するときに検出されないようにする方法

あるデータフレームの列全体を、Python内の異なる構造を持つ別のデータフレームに効率的にコピーする方法は? あるデータフレームの列全体を、Python内の異なる構造を持つ別のデータフレームに効率的にコピーする方法は? Apr 01, 2025 pm 11:15 PM

PythonのPandasライブラリを使用する場合、異なる構造を持つ2つのデータフレーム間で列全体をコピーする方法は一般的な問題です。 2つのデータがあるとします...

プロジェクトの基本と問題駆動型の方法で10時間以内にコンピューター初心者プログラミングの基本を教える方法は? プロジェクトの基本と問題駆動型の方法で10時間以内にコンピューター初心者プログラミングの基本を教える方法は? Apr 02, 2025 am 07:18 AM

10時間以内にコンピューター初心者プログラミングの基本を教える方法は?コンピューター初心者にプログラミングの知識を教えるのに10時間しかない場合、何を教えることを選びますか...

uvicornは、serving_forever()なしでhttpリクエストをどのように継続的に聞いていますか? uvicornは、serving_forever()なしでhttpリクエストをどのように継続的に聞いていますか? Apr 01, 2025 pm 10:51 PM

UvicornはどのようにしてHTTPリクエストを継続的に聞きますか? Uvicornは、ASGIに基づく軽量のWebサーバーです。そのコア機能の1つは、HTTPリクエストを聞いて続行することです...

Investing.comの反クローラーメカニズムをバイパスするニュースデータを取得する方法は? Investing.comの反クローラーメカニズムをバイパスするニュースデータを取得する方法は? Apr 02, 2025 am 07:03 AM

Investing.comの反クラウリング戦略を理解する多くの人々は、Investing.com(https://cn.investing.com/news/latest-news)からのニュースデータをクロールしようとします。

See all articles