首頁 > 後端開發 > Python教學 > 如何使用 WebSocket 和 FastAPI 更新 Jinja2 範本中的評論清單?

如何使用 WebSocket 和 FastAPI 更新 Jinja2 範本中的評論清單?

Linda Hamilton
發布: 2024-10-21 06:15:30
原創
880 人瀏覽過

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

如何使用 FastAPI 取得 Jinja2 範本中更新的項目清單?

問題:

考慮一個場景:您正在部落格上建立評論系統。您正在使用 Jinja2 範本呈現現有註解。當透過 FastAPI 路由發布新評論時,您需要更新範本中顯示的評論清單。

解決方案:

雖然 Jinja2 並不理想處理即時更新,可以使用 WebSockets 找到解決方案。這需要修改 FastAPI 後端和 Jinja2 範本:

FastAPI 後端 (app.py):

  • 建立一個 Manager 類別來管理 WebSocket 連線。
  • 定義一個 send_personal_message 方法來傳送訊息給特定客戶端。
  • 定義一個廣播方法來傳送訊息給所有連線的客戶端。
  • 更新 / 路由來處理連接並將評論清單傳遞給範本.
  • 建立 WebSocket 端點 (/ws) 來處理傳入的 WebSocket 連線並廣播新評論。

Jinja2 範本 (index.html):

  • 新增
      ;元素來顯示註解。
  • 建立 JavaScript 函數 addComment 以透過 WebSocket 發送新評論。
  • 在WebSocket 的onmessage 事件處理程序中,創建HTML 元素來顯示新評論並將其附加到

示例代碼:

1

2

3

4

5

6

7

8

9

10

11

<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>

登入後複製

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<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>

登入後複製

透過使用WebSockets,您可以在FastAPI 後端和Jinja2 模板,允許在UI 中顯示更新的評論清單。

以上是如何使用 WebSocket 和 FastAPI 更新 Jinja2 範本中的評論清單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板