解锁FastAPI与WebSockets的强大组合：实战案例带你高效构建实时交互应用

引言

在当今的互联网时代，实时交互应用越来越受到用户的喜爱。FastAPI 和 WebSockets 是构建这类应用的两个强大工具。FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，而 WebSockets 允许服务器和客户端之间进行全双工通信。本文将深入探讨 FastAPI 与 WebSockets 的结合，并通过实战案例展示如何高效构建实时交互应用。

FastAPI 简介

FastAPI 是一个用 Python 3.6+ 类型提示异步编写的 Web 框架，旨在快速构建 API。它具有以下特点：

异步：FastAPI 是异步的，这意味着它可以同时处理多个请求。
类型安全：利用 Python 的类型提示，FastAPI 可以在编写代码时提供更准确的错误检查。
自动文档：FastAPI 会自动生成交互式文档，方便开发者使用。

WebSockets 简介

WebSockets 是一种网络通信协议，允许服务器和客户端之间进行全双工通信。这意味着服务器和客户端可以随时发送消息，而不需要轮询。

FastAPI 与 WebSockets 的结合

要将 FastAPI 与 WebSockets 结合，我们可以使用 websockets 库。以下是一个简单的示例：

from fastapi import FastAPI, WebSocket from fastapi.responses import JSONResponse app = FastAPI() @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 received: {data}")

在这个示例中，我们创建了一个 /ws 路由，用于处理 WebSocket 连接。当客户端连接到这个路由时，服务器会接受连接并发送一条消息，然后等待客户端发送消息。

实战案例：构建实时聊天应用

以下是一个使用 FastAPI 和 WebSockets 构建的实时聊天应用的示例：

from fastapi import FastAPI, WebSocket, WebSocketDisconnect from fastapi.responses import HTMLResponse from fastapi.staticfiles import StaticFiles from starlette.middleware.cors import CORSMiddleware app = FastAPI() # 设置 CORS app.add_middleware( CORSMiddleware, allow_origins=["*"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) #WebSocket 管理连接 clients = set() @app.websocket("/ws/{client_id}") async def websocket_endpoint(websocket: WebSocket, client_id: str): await websocket.accept() clients.add(client_id) try: while True: data = await websocket.receive_text() await websocket.send_text(f"Message from {client_id}: {data}") except WebSocketDisconnect: clients.remove(client_id) print(f"Client {client_id} disconnected") @app.get("/") async def main(): return HTMLResponse(content=f""" <html> <head> <title>Chat Application</title> </head> <body> <h1>Chat Application</h1> <ul id="chat-log"></ul> <form id="chat-form"> <input type="text" id="message-input" /> <button type="submit">Send</button> </form> <script> document.addEventListener('DOMContentLoaded', (event) => { const chatForm = document.getElementById('chat-form'); const chatLog = document.getElementById('chat-log'); const messageInput = document.getElementById('message-input'); chatForm.addEventListener('submit', (e) => { e.preventDefault(); fetch('/ws/{client_id}', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: messageInput.value }) }); messageInput.value = ''; }); const ws = new WebSocket('ws://{url}/ws/{client_id}'); ws.onmessage = (event) => { const messageElement = document.createElement('li'); messageElement.textContent = event.data; chatLog.appendChild(messageElement); }; }); </script> </body> </html> """, status_code=200)

在这个示例中，我们创建了一个简单的聊天应用。客户端可以通过 WebSocket 连接到服务器，并发送消息。服务器会将消息广播给所有连接的客户端。