FastAPI WebSocket을 사용하여 Jinja2 템플릿에서 항목 목록 업데이트

댓글 시스템에서는 댓글 목록을 최신 상태로 유지하는 것이 중요합니다. 원활한 사용자 경험을 제공하기 위해 새 댓글이 추가되면 수동으로 다시 로드할 필요 없이 템플릿에 반영되어야 합니다.

Jinja2에서 댓글 목록 업데이트는 일반적으로 API 호출을 통해 이루어집니다. 그러나 이 접근 방식에서는 대기 시간이 발생하고 사용자 인터페이스의 응답성이 저하될 수 있습니다. 보다 효율적인 솔루션은 WebSocket과 같은 실시간 통신 기술을 활용하는 것입니다.

FastAPI 및 Jinja2에서 WebSocket 구현

WebSocket 프로토콜의 하위 집합인 WebSocket은 두 가지 기능을 제공합니다. -클라이언트(브라우저)와 서버(백엔드) 간의 통신 채널입니다. 이를 통해 새로 추가된 설명을 포함하여 클라이언트에 실시간 업데이트를 브로드캐스트할 수 있습니다.

이 시나리오에서 WebSocket을 구현하기 위해 FastAPI 및 내장 WebSocket 기능을 활용하겠습니다. 아래 코드 조각은 WebSocket 엔드포인트를 생성하는 방법을 보여줍니다.

from fastapi import FastAPI, WebSocket, WebSocketDisconnect

app = FastAPI()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    # WebSocket handling
    ...

websocket_endpoint 함수 내에서 클라이언트와의 WebSocket 연결을 설정하고 들어오는 데이터를 처리합니다. 새 댓글이 수신되면 Broadcast() 메소드를 사용하여 연결된 모든 클라이언트에 이를 브로드캐스트합니다.

Jinja2 템플릿 업데이트

Jinja2 템플릿을 업데이트하려면 새 주석을 사용하면 프런트엔드 JavaScript에서 onmessage 이벤트 리스너를 사용합니다. 새 댓글 메시지가 수신되면 새