FastAPI와 함께 WebSocket을 사용하여 Jinja2 템플릿의 주석 목록을 업데이트하는 방법은 무엇입니까?

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

문제:

다음 시나리오를 고려해보세요. 당신은 블로그에 댓글 시스템을 구축하고 있습니다. Jinja2 템플릿을 사용하여 기존 주석을 렌더링하고 있습니다. FastAPI 경로를 통해 새 댓글이 게시되면 템플릿에 표시되는 댓글 목록을 업데이트해야 합니다.

해결책:

Jinja2는 적합하지 않습니다. 실시간 업데이트를 처리하는 경우 WebSocket을 사용하여 솔루션을 찾을 수 있습니다. 이를 위해서는 FastAPI 백엔드와 Jinja2 템플릿을 모두 수정해야 합니다.

FastAPI 백엔드(app.py):

• WebSocket 연결을 관리하려면 ConnectionManager 클래스를 생성하세요.
• 특정 클라이언트에게 메시지를 보내려면 send_personal_message 메서드를 정의하세요.
• 연결된 모든 클라이언트에게 메시지를 보내려면 브로드캐스트 메서드를 정의하세요.
• / 경로를 업데이트하여 연결을 처리하고 댓글 목록을 템플릿에 전달하세요. .
• 들어오는 WebSocket 연결을 처리하고 새 댓글을 브로드캐스트하는 WebSocket 엔드포인트(/ws)를 생성합니다.

Jinja2 템플릿(index.html):

• 추가
  • WebSocket을 통해 새 댓글을 보내려면 JavaScript 함수 addComment를 생성하세요.
  • WebSocket의 onmessage 이벤트 핸들러에서 HTML 요소를 생성하여 새 댓글을 표시하고 추가하세요.
    element.

    예제 코드:

    <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 백엔드와 업데이트된 댓글 목록을 UI에 표시할 수 있는 Jinja2 템플릿입니다.

    위 내용은 FastAPI와 함께 WebSocket을 사용하여 Jinja2 템플릿의 주석 목록을 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!