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