Camino de aprendizaje FastAPI (44) WebSockets

2024-07-12

Todo nuestro análisis anterior se basó en solicitudes http, por lo que si websockets puede admitirlo, la respuesta es sí, echemos un vistazo a cómo implementarlo.


from fastapi import WebSocket, FastAPI
from fastapi.responses import HTMLResponse
 
app = FastAPI()
 
html = """
 
<!DOCTYPE html>
 
<html>
 
    <head>
 
        <title>Chat</title>
 
    </head>
 
    <body>
 
        <h1>WebSocket 聊天</h1>
 
        <form action="" onsubmit="sendMessage(event)">
 
            <input type="text" id="messageText" autocomplete="off"/>
 
            <button>Send</button>
 
        </form>
 
        <ul id='messages'>
 
        </ul>
 
        <script>
 
            var ws = new WebSocket("ws://localhost:8000/ws");
 
            ws.onmessage = function(event) {
 
                var messages = document.getElementById('messages')
 
                var message = document.createElement('li')
 
                var content = document.createTextNode(event.data)
 
                message.appendChild(content)
 
                messages.appendChild(message)
 
            };
 
            function sendMessage(event) {
 
                var input = document.getElementById("messageText")
 
                ws.send(input.value)
 
                input.value = ''
 
                event.preventDefault()
 
            }
</script>
 
    </body>
 
</html>
 
"""
 
 
@app.get("/")
async def get_page():
    return HTMLResponse(html)
 
 
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(f"接收到的消息是：{data}")

De hecho, es muy simple. Escribimos una interfaz para recibir mensajes en el back-end. Cuando llega un mensaje, lo procesamos antes, pero ahora es websocket. Devolvimos el mensaje recibido directamente al front-end.

Echemos un vistazo al efecto:

De esta forma, simplemente implementamos la función de un websocket. Entonces tenemos un mensaje específico y cerramos el chat, ¿cómo lidiar con eso?


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

El código de front-end no se ha cambiado, solo se ha modificado el back-end.

De hecho, es muy sencillo implementar la comunicación websocket aquí.

Por supuesto también podemos usarlo en solicitudes.

Depende
Seguridad
Galleta
Encabezamiento
Camino
Consulta

Podemos ver el siguiente ejemplo de una escritura de backend simple.


# 使用多种参数，比如获取cookie等
from typing import Optional
from fastapi import Cookie, Query, status, Depends
 
 
async def get_cookie_or_token(
    websocket: WebSocket,
    session: Optional[str] = Cookie(None),
    token: Optional[str] = Query(None),
):
    if session is None and token is None:
        await websocket.close(code=status.WS_1008_POLICY_VIOLATION)
    return session or token
 
 
@app.websocket("item/ws")
async def websocket_endpoint(
    websocket: WebSocket,
    q: Optional[int] = None,
    cookie_or_token: str = Depends(get_cookie_or_token),
):
    await websocket.accept()
    while True:
        data = await websocket.receive_text()
        await websocket.send_text(
            f"Session cookie or query token value is: {cookie_or_token}"
        )
        if q is not None:
            await websocket.send_text(f"parameter q is: {q}")
        await websocket.send_text(f"Message text was: {data}, for : {q}")

Aunque simplemente hemos implementado el backend, podemos ver que fastapi tiene un buen soporte para websocket.

Compartir tecnología

Camino de aprendizaje FastAPI (44) WebSockets

Perfil personal

Mi informacion de contacto