Jalan Pembelajaran FastAPI (44) WebSockets

2024-07-12

Analisa kita sebelumnya semuanya berdasarkan request http, jadi jika websockets bisa mendukungnya, jawabannya iya, mari kita lihat bagaimana cara mengimplementasikannya.


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

Faktanya, ini sangat sederhana. Kami menulis antarmuka untuk menerima pesan di bagian belakang. Ketika sebuah pesan masuk, kami memproses pesan tersebut. Sebelumnya, pesan tersebut ditangani oleh http, tetapi sekarang menjadi websocket. Kami mengembalikan pesan yang diterima langsung ke ujung depan.

Mari kita lihat efeknya:

Dengan cara ini, kita cukup mengimplementasikan fungsi websocket. Jadi kami memiliki pesan tertentu dan kami menutup obrolan, bagaimana cara mengatasinya?


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

Kode front-end tidak diubah, hanya back-end yang diubah.

Faktanya, sangat mudah untuk mengimplementasikan komunikasi websocket di sini.

Tentu saja kita juga bisa menggunakannya dalam permintaan

Bergantung
Keamanan
Kue kering
Judul
Jalur
Pertanyaan

Kita bisa melihat contoh penulisan backend sederhana berikut ini


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

Meskipun kami baru saja mengimplementasikan backend, kami dapat melihat bahwa fastapi memiliki dukungan yang baik untuk websocket

Berbagi teknologi

Jalan Pembelajaran FastAPI (44) WebSockets

Profil pribadi

informasi kontak saya