FastAPI - WebSockets

WebSocket 是客戶端和伺服器之間的一個持久連線，用於在兩者之間提供雙向、全雙工通訊。通訊透過單個 TCP/IP 套接字連線在 HTTP 上進行。它可以被視為 HTTP 的升級，而不是協議本身。

HTTP 的侷限性之一在於它是一個嚴格的半雙工或單向協議。另一方面，使用 WebSockets，我們可以傳送基於訊息的資料，類似於 UDP，但具有 TCP 的可靠性。WebSocket 使用 HTTP 作為初始傳輸機制，但在收到 HTTP 響應後保持 TCP 連線處於活動狀態。相同的連線物件可以用於客戶端和伺服器之間的雙向通訊。因此，可以使用 WebSocket API 構建即時應用程式。

FastAPI 透過 FastAPI 模組中的 WebSocket 類支援 WebSockets。以下示例演示了 FastAPI 應用程式中 WebSocket 的功能。

首先，我們有一個index()函式，它呈現一個模板（socket.html）。它繫結到“/”路由。HTML 檔案 socket.html 位於“templates”資料夾中。

main.py

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
templates = Jinja2Templates(directory="templates")
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/", response_class=HTMLResponse)
async def index(request: Request):
   return templates.TemplateResponse("socket.html", {"request": request})

模板檔案呈現一個文字框和一個按鈕。

socket.html

<!DOCTYPE html>
<html>
   <head>
      <title>Chat</title>
      <script src="{{ url_for('static', path='ws.js') }}"></script>
   </head>
   <body>
      <h1>WebSocket Chat</h1>
      <form action="" onsubmit="sendMessage(event)">
      <input type="text" id="messageText" autocomplete="off"/>
      <button>Send</button>
      </form>
      <ul id='messages'>
      </ul>
   </body>
</html>

在 socket.html 內部，有一個對 JavaScript 函式的呼叫，該函式將在表單提交時執行。因此，為了提供 JavaScript 服務，首先掛載了“static”資料夾。JavaScript 檔案 ws.js 位於“static”資料夾中。

ws.js

var ws = new WebSocket("ws://: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()
}

載入 JavaScript 程式碼後，它會建立一個在“ws://:8000/ws”處偵聽的 websocket。sendMessage()函式將輸入訊息定向到 WebSocket URL。

此路由在應用程式程式碼中呼叫websocket_endpoint()函式。傳入的連線請求被接受，傳入的訊息在客戶端瀏覽器上回顯。將以下程式碼新增到 main.py 中。

from fastapi import WebSocket
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
   await websocket.accept()
   while True:
      data = await websocket.receive_text()
      await websocket.send_text(f"Message text was: {data}")

儲存 FastAPI 程式碼檔案（main.py）、模板（socket.html）和 JavaScript 檔案（ws.js）。執行 Uvicorn 伺服器並訪問 https://:8000/ 以呈現如下所示的聊天視窗 -

鍵入某些文字並按傳送按鈕。輸入的訊息將透過 websocket 重定向到瀏覽器。

列印頁面