了解WebSockets
WebSockets通过单个长寿命TCP连接提供全双工通信通道。这允许客户端和服务器之间进行持续的数据交换，使其成为聊天应用程序、实时通知和协作工具等实时应用程序的理想选择。
使用WebSockets设置FastAPI
首先，您需要安装FastAPI和Uvicorn。Uvicorn是FastAPI用于为应用程序提供服务的ASGI服务器实现。
pipinstallfastapiuvicorn
基本WebSocket示例
让我们从在FastAPI中设置WebSocket的简单示例开始。
步骤1：创建FastAPI应用
fromfastapiimportFastAPI,=FastAPI()html="""!DOCTYPEhtmlhtmlheadtitleWebSocketTest/title/headbodyh1WebSocketTest/h1buttononclick="sMessage()"SMessage/buttonulid='messages'/ulscriptvarws=newWebSocket("ws://localhost:8000/ws");=function(event){varmessages=('messages');varmessage=('li');varcontent=();(content);(message);};functionsMessage(){("Hello,World!");}/script/body/html"""@("/")asyncdefget():returnHTMLResponse(html)@("/ws")asyncdefwebsocket_point(websocket:WebSocket):()whileTrue:data=_text()_text(f"Messagetextwas:{data}")步骤2：运行服务器
使用Uvicorn运行FastAPI应用：
uvicornmain:app--reload
打开浏览器并导航至http://localhost:8000/。单击“发送消息”按钮通过WebSocket发送消息并实时查看响应。
演示：实时聊天应用
让我们构建一个更复杂的示例：一个简单的实时聊天应用。
步骤1：更新HTML
修改HTML以包含用于发送消息的表单：
!DOCTYPEhtmlhtmlheadtitleWebSocketChat/title/headbodyh1WebSocketChat/h1formonsubmit="sMessage(event)"inputtype="text"id="messageText"autocomplete="off"/buttonS/button/formulid='messages'/ulscriptvarws=newWebSocket("ws://localhost:8000/ws");=function(event){varmessages=('messages');varmessage=('li');varcontent=();(content);(message);};functionsMessage(event){varinput=("messageText");();='';();}/script/body/html步骤2：更新WebSocket端点
更新WebSocket端点以向所有连接的客户端广播消息：
fromfastapiimportFastAPI,WebSocket,=FastAPI()html="""!DOCTYPEhtmlhtmlheadtitleWebSocketChat/title/headbodyh1WebSocketChat/h1formonsubmit="sMessage(event)"inputtype="text"id="messageText"autocomplete="off"/buttonS/button/formulid='messages'/ulscriptvarws=newWebSocket("ws://localhost:8000/ws");=function(event){varmessages=('messages');varmessage=('li');varcontent=();(content);(message);};functionsMessage(event){varinput=("messageText");();='';();}/script/body/html"""classConnectionManager:def__init__(self):_connections:List[WebSocket]=[]asyncdefconnect(self,websocket:WebSocket):()_(websocket)defdisconnect(self,websocket:WebSocket):_(websocket)asyncdefbroadcast(self,message:str):_connections:_text(message)manager=ConnectionManager()@("/")asyncdefget():returnHTMLResponse(html)@("/ws")asyncdefwebsocket_point(websocket:WebSocket):(websocket)try:whileTrue:data=_text()(f"Clientsays:{data}")exceptWebSocketDisconnect:(websocket)步骤3：运行服务器
再次使用Uvicorn运行FastAPI应用：
uvicornmain:app--reload
打开多个浏览器选项卡到http://localhost:8000/，您将看到实时聊天功能正在运行。从一个选项卡发送的消息将广播到所有其他连接的客户端。
以下是一些额外的演示，展示了如何使用WebSockets在FastAPI中进行实时更新，涵盖了各种用例：
1.实时通知系统
每当服务器上发生事件时，通知系统都会向连接的客户端发送实时更新。
步骤1：创建FastAPI应用
fromfastapiimportFastAPI,WebSocket,=FastAPI()html="""!DOCTYPEhtmlhtmlheadtitleWebSocketNotifications/title/headbodyh1Real-timeNotifications/h1ulid='notifications'/ulscriptvarws=newWebSocket("ws://localhost:8000/ws");=function(event){varnotifications=('notifications');varnotification=('li');varcontent=();(content);(notification);};/script/body/html"""classConnectionManager:def__init__(self):_connections:List[WebSocket]=[]asyncdefconnect(self,websocket:WebSocket):()_(websocket)defdisconnect(self,websocket:WebSocket):_(websocket)asyncdefbroadcast(self,message:str):_connections:_text(message)manager=ConnectionManager()@("/")asyncdefget():returnHTMLResponse(html)@("/ws")asyncdefwebsocket_point(websocket:WebSocket):(websocket)try:whileTrue:(5)("Newnotification!")exceptWebSocketDisconnect:(websocket)第2步：运行服务器
使用Uvicorn运行FastAPI应用：
uvicornmain:app--reload
打开浏览器并导航至http://localhost:8000/。您将每5秒收到一条新通知。
2.实时股价更新
一个模拟实时股价更新的简单示例。
步骤1：创建FastAPI应用
fromfastapiimportFastAPI,WebSocket,ortrandomapp=FastAPI()html="""!DOCTYPEhtmlhtmlheadtitleReal-timeStockPrices/title/headbodyh1StockPrices/h1ulid='stocks'/ulscriptvarws=newWebSocket("ws://localhost:8000/ws");=function(event){varstocks=('stocks');varstock=('li');varcontent=();(content);(stock);};/script/body/html"""classConnectionManager:def__init__(self):_connections:List[WebSocket]=[]asyncdefconnect(self,websocket:WebSocket):()_(websocket)defdisconnect(self,websocket:WebSocket):_(websocket)asyncdefbroadcast(self,message:str):_connections:_text(message)manager=ConnectionManager()@("/")asyncdefget():returnHTMLResponse(html)@("/ws")asyncdefwebsocket_point(websocket:WebSocket):(websocket)try:whileTrue:(3)stock_price=(100,500)(f"Stockpriceupdate:${stock_price:.2f}")exceptWebSocketDisconnect:(websocket)第2步：运行服务器
使用Uvicorn运行FastAPI应用：
uvicornmain:app--reload
打开浏览器并导航至http://localhost:8000/。您将每3秒收到一次模拟股票价格更新。
3.实时协作绘图板
用户可以实时绘图的协作绘图板，其绘图将广播到所有连接的客户端。
步骤1：创建FastAPI应用
fromfastapiimportFastAPI,WebSocket,=FastAPI()html="""!DOCTYPEhtmlhtmlheadtitleCollaborativeDrawingBoard/titlestyle#board{border:1pxsolidblack;width:800px;height:600px;}/style/headbodyh1CollaborativeDrawingBoard/h1canvasid="board"/canvasscriptvarws=newWebSocket("ws://localhost:8000/ws");varcanvas=("board");varcontext=("2d");vardrawing=false;=function(event){vardata=();();(,);(,);();};("mousedown",function(event){drawing=true;();(,);});("mousemove",function(event){if(!drawing)return;(,);();(({startX:,startY:,X:,Y:}));});("mouseup",function(){drawing=false;});/script/body/html"""classConnectionManager:def__init__(self):_connections:List[WebSocket]=[]asyncdefconnect(self,websocket:WebSocket):()_(websocket)defdisconnect(self,websocket:WebSocket):_(websocket)asyncdefbroadcast(self,message:str):_connections:_text(message)manager=ConnectionManager()@("/")asyncdefget():returnHTMLResponse(html)@("/ws")asyncdefwebsocket_point(websocket:WebSocket):(websocket)try:whileTrue:data=_text()(data)exceptWebSocketDisconnect:(websocket)步骤2：运行服务器
使用Uvicorn运行FastAPI应用：
uvicornmain:app--reload
打开多个浏览器选项卡到http://localhost:8000/，您将看到协作绘图板正在运行。在画布上绘图，绘图将实时广播到所有其他连接的客户端。
WebSockets提供了一种强大的机制，用于在Web应用程序中实现实时更新。FastAPI可以轻松设置和管理WebSocket连接。在这篇博客中，我们探索了一些演示，包括实时通知系统、股票价格更新和协作绘图板。这些示例展示了在FastAPI应用程序中使用WebSockets进行实时更新的多功能性和潜力。有了这些知识，您就可以开始将实时更新集成到您自己的FastAPI项目中，从而增强Web应用的交互性和响应能力。
