기술나눔

FastAPI 학습 로드(44) WebSocket

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

이전 분석은 모두 http 요청을 기반으로 했기 때문에 웹소켓이 이를 지원할 수 있다면 대답은 '예'입니다. 이를 구현하는 방법을 살펴보겠습니다.

  1. from fastapi import WebSocket, FastAPI
  2. from fastapi.responses import HTMLResponse
  3.  
  4. app = FastAPI()
  5.  
  6. html = """
  7.  
  8. <!DOCTYPE html>
  9.  
  10. <html>
  11.  
  12.     <head>
  13.  
  14.         <title>Chat</title>
  15.  
  16.     </head>
  17.  
  18.     <body>
  19.  
  20.         <h1>WebSocket 聊天</h1>
  21.  
  22.         <form action="" onsubmit="sendMessage(event)">
  23.  
  24.             <input type="text" id="messageText" autocomplete="off"/>
  25.  
  26.             <button>Send</button>
  27.  
  28.         </form>
  29.  
  30.         <ul id='messages'>
  31.  
  32.         </ul>
  33.  
  34.         <script>
  35.  
  36.             var ws = new WebSocket("ws://localhost:8000/ws");
  37.  
  38.             ws.onmessage = function(event) {
  39.  
  40.                 var messages = document.getElementById('messages')
  41.  
  42.                 var message = document.createElement('li')
  43.  
  44.                 var content = document.createTextNode(event.data)
  45.  
  46.                 message.appendChild(content)
  47.  
  48.                 messages.appendChild(message)
  49.  
  50.             };
  51.  
  52.             function sendMessage(event) {
  53.  
  54.                 var input = document.getElementById("messageText")
  55.  
  56.                 ws.send(input.value)
  57.  
  58.                 input.value = ''
  59.  
  60.                 event.preventDefault()
  61.  
  62.             }
  63. </script>
  64.  
  65.     </body>
  66.  
  67. </html>
  68.  
  69. """
  70.  
  71.  
  72. @app.get("/")
  73. async def get_page():
  74.     return HTMLResponse(html)
  75.  
  76.  
  77. @app.websocket("/ws")
  78. async def websocket_endpoint(websocket: WebSocket):
  79.     await websocket.accept()
  80.     while True:
  81.         data = await websocket.receive_text()
  82.         await websocket.send_text(f"接收到的消息是：{data}")

사실 아주 간단합니다. 백엔드에서 메시지를 수신하기 위한 인터페이스를 작성합니다. 메시지가 오면 메시지를 처리합니다. 이전에는 http로 처리했지만 지금은 웹소켓입니다. 수신된 메시지를 프런트 엔드에 직접 반환했습니다.

효과를 살펴보겠습니다.

이런 식으로 우리는 웹소켓의 기능을 간단히 구현합니다. 그러면 구체적인 메시지가 있고 채팅을 종료합니다. 어떻게 처리해야 할까요?

  1. # 接收特定的消息后，终止该聊天
  2. @app.websocket("/ws")
  3. async def websocket_endpoint(websocket: WebSocket):
  4.     await websocket.accept()
  5.     while True:
  6.         data = await websocket.receive_text()
  7.         if data == "bye":
  8.             await websocket.send_text(f"请注意：窗口即将关闭")
  9.             await websocket.send_text("窗口已关闭")
  10.             await websocket.close()
  11.             break
  12.         else:
  13.             await websocket.send_text(f"接收到的消息是：{data}")

프론트엔드 코드는 변경되지 않았고, 백엔드만 수정되었습니다.

실제로 여기서 웹소켓 통신을 구현하는 것은 매우 간단합니다.

물론 요청에도 사용할 수 있습니다.

  • 달려있다
  • 보안
  • 쿠키
  • 머리글
  • 길
  • 질문

간단한 백엔드 작성의 다음 예를 볼 수 있습니다.

  1. # 使用多种参数，比如获取cookie等
  2. from typing import Optional
  3. from fastapi import Cookie, Query, status, Depends
  4.  
  5.  
  6. async def get_cookie_or_token(
  7.     websocket: WebSocket,
  8.     session: Optional[str] = Cookie(None),
  9.     token: Optional[str] = Query(None),
  10. ):
  11.     if session is None and token is None:
  12.         await websocket.close(code=status.WS_1008_POLICY_VIOLATION)
  13.     return session or token
  14.  
  15.  
  16. @app.websocket("item/ws")
  17. async def websocket_endpoint(
  18.     websocket: WebSocket,
  19.     q: Optional[int] = None,
  20.     cookie_or_token: str = Depends(get_cookie_or_token),
  21. ):
  22.     await websocket.accept()
  23.     while True:
  24.         data = await websocket.receive_text()
  25.         await websocket.send_text(
  26.             f"Session cookie or query token value is: {cookie_or_token}"
  27.         )
  28.         if q is not None:
  29.             await websocket.send_text(f"parameter q is: {q}")
  30.         await websocket.send_text(f"Message text was: {data}, for : {q}")

단순히 백엔드를 구현했지만 fastapi가 websocket을 잘 지원한다는 것을 알 수 있습니다.

개인 프로필

그는 30년 이상 기술 연구에 전념해 왔으며, java, linux, javascript, php, css 등 다양한 언어에 능숙하며, 오픈 소스 분야에서 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편