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

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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