FastAPI를 사용하여 Jinja2에서 실시간 데이터 업데이트를 위한 WebSocket을 구현하는 방법은 무엇입니까?

FastAPI를 사용하여 Jinja2 템플릿에서 업데이트된 항목 목록을 가져오는 방법은 무엇입니까?

Jinja2 템플릿에서는 루프를 사용하여 기존 데이터를 렌더링할 수 있습니다. 블로그 게시물. 그러나 새 항목이 추가되면 Jinja2는 기본적으로 목록을 동적으로 업데이트하는 방법을 제공하지 않습니다.

WebSocket을 사용하는 잠재적인 솔루션

웹 애플리케이션의 실시간 업데이트를 위한 일반적인 솔루션은 다음과 같습니다. WebSocket을 사용합니다. 다음 Python 코드는 WebSocket 끝점을 제공합니다.

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

app = FastAPI()
templates = Jinja2Templates(directory="templates")

class ConnectionManager:
    def __init__(self):
        self.active_connections = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.send_json(message)

manager = ConnectionManager()</code>

index.html 템플릿에서 WebSocket 연결을 설정하고 수신 메시지를 수신합니다.

<code class="html"><script>
  var ws = new WebSocket("ws://localhost:8000/ws");
  ws.onmessage = function(event) {
    // Handle new data and update UI accordingly
  };
</script></code>

그런 다음 WebSocket 끝점은 다음을 수행할 수 있습니다. 연결된 클라이언트에 모든 업데이트를 브로드캐스트합니다. 이를 통해 업데이트된 댓글 목록을 실시간으로 동적으로 표시할 수 있습니다.

참고:

WebSocket은 이 사용 사례에 실행 가능한 솔루션이지만 Alpine JS와 같은 대체 접근 방식을 고려하는 것이 중요합니다. 더 복잡한 UI 상호 작용을 위한 x-for 루프 또는 ReactJS.

위 내용은 FastAPI를 사용하여 Jinja2에서 실시간 데이터 업데이트를 위한 WebSocket을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!