创建这样的实时互动的应用
FastAPI 是一个现代的、快速的基于 Python 3.7+ 编写的构建 API 的 Web 框架，它基于标准的 Python 类型提示。其中一个强大的功能是支持 WebSocket，从而可以创建实时互动的应用。在这篇文章里，我们将探讨如何使用 WebSocket 和 FastAPI 构建实时应用程序。
项目结构让我们先定义实时应用的项目架构。
假设我们有一个文件结构如下：
├── app/
│ ├── __init__.py
│ ├── main.py
├── index.html
├── requirements.txt
└── README.md
上述结构中，`app` 文件夹包含了 Python 脚本，`__init__.py` 和 `main.py` 分别是初始化文件和主文件。其他文件包括 `index.html`, `requirements.txt`, 和 `README.md` 则是 HTML 文件、依赖项文件和说明文件。首先，建立一个虚拟环境并安装FastAPI和Uvicorn：
python -m venv venv
source venv/bin/activate # 在 Windows 系统中请使用 `venv/Scripts/activate`,
pip install fastapi uvicorn我们将使用FastAPI开始创建一个简单的WebSocket服务器。这个服务器将管理WebSocket连接，支持实时通信。
比如:main.py
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from typing import List
app = FastAPI()
class ConnectionManager:
def __init__(self):
self.active_connections: List[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def send_message(self, message: str, websocket: WebSocket):
await websocket.send_text(message)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)
manager = ConnectionManager()
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
await manager.send_message(f"客户端 {client_id} 发送: {data}", websocket)
await manager.broadcast(f"客户端 {client_id} 的消息: {data}")
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"客户端 {client_id} 断开了")要运行应用，请使用以下命令：
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000在浏览器中打开 http://127.0.0.1:8000，试试看你的 FastAPI 应用程序。
我们需要一个简单的前端页面来测试我们的WebSocket（一种网络通信协议）服务器。在项目的根目录下创建一个名为index.html的文件。
例子:**index.html**
<!DOCTYPE html>
<html>
<head>
<title>WebSocket聊天室</title>
</head>
<body>
<h1>WebSocket聊天室</h1>
<input type="text" id="messageInput" autocomplete="off"/>
<button onclick="发送消息()">发送</button>
<ul id="messages"></ul>
<script>
// 生成一个随机的客户端ID
const clientId = Math.floor(Math.random() * 1000);
const ws = new WebSocket(`ws://localhost:8000/ws/${clientId}`);
ws.onmessage = function(event) {
const messages = document.getElementById('messages');
const message = document.createElement('li');
message.innerText = event.data;
messages.appendChild(message);
};
function 发送消息() {
const input = document.getElementById("messageInput");
ws.send(input.value);
input.value = ''; // 清除输入框的内容
}
</script>
</body>
</html>更新 main.py 以提供 index.html 主页。
示例：更新了**main.py**文件
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse
from typing import List
app = FastAPI()
class ConnectionManager:
def __init__(self):
self.active_connections: List[WebSocket] = []
async def connect(self, websocket: WebSocket):
await websocket.accept()
self.active_connections.append(websocket)
def disconnect(self, websocket: WebSocket):
self.active_connections.remove(websocket)
async def send_message(self, message: str, websocket: WebSocket):
await websocket.send_text(message)
async def broadcast(self, message: str):
for connection in self.active_connections:
await connection.send_text(message)
manager = ConnectionManager()
@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: int):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
await manager.send_message(f"Client {client_id}: {data}", websocket)
await manager.broadcast(f"Client {client_id} says: {data}")
except WebSocketDisconnect:
manager.disconnect(websocket)
await manager.broadcast(f"Client {client_id} disconnected")
@app.get("/")
async def get():
with open("index.html") as f:
return HTMLResponse(f.read())要测试这个应用，请启动 FastAPI 服务器程序。
运行命令： uvicorn app.main:app --reload --host 0.0.0.0 --port 8000打开你的浏览器并访问 http://127.0.0.1:8000。你应该会看到WebSocket聊天界面。打开多个浏览器窗口以测试不同窗口内的实时聊天功能。
在本文中，我们讨论了如何利用WebSocket和FastAPI创建实时应用程序。我们创建了一个简单的聊天应用，允许多个用户实时聊天。FastAPI支持WebSocket，因此非常适合用于开发需要实时互动的应用程序。
栈学 🎓感谢您一直读到最后，临走前还有个小提醒：
- 给作者点赞并关注他👏
- 关注我们 X（Twitter） | 领英 | YouTube | Discord
- 访问我们的其他平台：简单英语 | CoFeed | Differ
- 更多内容请访问我们的网站 Stackademic.com
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦