Route d'apprentissage FastAPI (44) WebSockets

2024-07-12

Notre analyse précédente était entièrement basée sur des requêtes http, donc si les websockets peuvent la prendre en charge, la réponse est oui, voyons comment l'implémenter.


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

En fait, c'est très simple. Nous écrivons une interface pour recevoir des messages sur le back-end. Lorsqu'un message arrive, nous le traitons. Avant, il était géré par http, mais maintenant c'est websocket. Nous avons renvoyé le message reçu directement au front-end.

Jetons un coup d'œil à l'effet :

De cette façon, nous implémentons simplement la fonction d’un websocket. Nous avons donc un message spécifique et nous fermons le chat, comment gérer cela ?


# 接收特定的消息后，终止该聊天
@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}")

Le code du front-end n'a pas été modifié, seul le back-end a été modifié.

En fait, il est très simple d'implémenter ici la communication websocket.

Bien sûr, nous pouvons également l'utiliser dans les requêtes

Dépend
Sécurité
Biscuit
Entête
Chemin
Requête

Nous pouvons regarder l'exemple suivant d'une simple écriture backend


# 使用多种参数，比如获取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}")

Bien que nous ayons simplement implémenté le backend, nous pouvons voir que fastapi prend bien en charge websocket

Partage de technologie

Route d'apprentissage FastAPI (44) WebSockets

Profil personnel

mes coordonnées