Condivisione della tecnologia

WebSocket FastAPI Learning Road (44).

2024-07-12

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

La nostra analisi precedente era tutta basata su richieste http, quindi se i websocket possono supportarlo, la risposta è sì, diamo un'occhiata a come implementarlo.

  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}")

In effetti, è molto semplice. Scriviamo un'interfaccia per ricevere i messaggi sul back-end. Quando arriva un messaggio, lo elaboriamo. Prima era gestito da http, ma ora è websocket. Abbiamo restituito il messaggio ricevuto direttamente al front-end.

Diamo un’occhiata all’effetto:

In questo modo implementiamo semplicemente la funzione di un websocket. Quindi abbiamo un messaggio specifico e chiudiamo la chat, come affrontarlo?

  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}")

Il codice front-end non è stato modificato, è stato modificato solo il back-end.

In effetti, è molto semplice implementare qui la comunicazione websocket.

Naturalmente possiamo usarlo anche nelle richieste

  • Dipende
  • Sicurezza
  • Biscotto
  • Intestazione
  • Sentiero
  • Domanda

Possiamo osservare il seguente esempio di semplice scrittura del backend

  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}")

Anche se abbiamo semplicemente implementato il backend, possiamo vedere che fastapi ha un buon supporto per websocket

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta