文章目录
- 一、websocket是什么
- 二、 基于fastapi的使用
- 三、总结
一、websocket是什么
WebSocket是一种通信协议，用于在客户端（如Web浏览器）和服务器之间建立持久的、双向的全双工通信通道。与传统的HTTP协议不同，WebSocket允许服务器主动向客户端推送数据，而不需要客户端每次都发起请求。这使得WebSocket特别适合需要实时更新数据的应用，如聊天应用、实时通知、在线游戏、股票行情等。
WebSocket协议的特点包括：
- 双向通信：客户端和服务器可以随时互相发送消息，而不需要客户端首先发起请求。
- 低延迟：WebSocket连接一旦建立，就保持打开状态，不需要为每次通信重新建立连接，从而降低了通信延迟。
- 效率高：WebSocket使用较少的通信开销，因为在建立连接后，数据帧的头部信息很小。
- 基于消息的通信：数据以消息的形式传输，每个消息可以包含多个数据帧。 持久连接：连接一旦建立，可以一直保持，直到客户端或服务器主动关闭连接。
WebSocket连接的建立过程如下：
握手阶段：客户端发送一个WebSocket握手请求给服务器，服务器响应握手请求并建立连接。
数据传输阶段：连接建立后，客户端和服务器可以通过该连接进行双向的数据传输。
连接关闭：任一方都可以随时关闭连接。
WebSocket的典型使用场景包括：
- 实时聊天应用
- 实时在线游戏
- 实时数据推送（如股票行情、体育赛事比分等）
- 协同编辑工具（如Google Docs）
在Web开发中，使用WebSocket通常需要客户端的JavaScript代码与服务器端的WebSocket库配合实现。
二、 基于fastapi的使用
服务端代码：
from fastapi import FastAPI, WebSocket, WebSocketDisconnectapp = FastAPI()@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):await websocket.accept()try:while True:data = await websocket.receive_text()await websocket.send_text(f"Message text was: {data}")except WebSocketDisconnect:print("Client disconnected")客户端代码：
<!DOCTYPE html>
<html>
<head><title>WebSocket Test</title>
</head>
<body><h1>WebSocket Test</h1><textarea id="messages" rows="10" cols="30"></textarea><br><input type="text" id="messageText" placeholder="Enter message"><button onclick="sendMessage()">Send</button><script>var websocket = new WebSocket("ws://127.0.0.1:8000/ws");websocket.onmessage = function(event) {var messages = document.getElementById('messages');messages.value += 'Server: ' + event.data + '\n';};function sendMessage() {var input = document.getElementById("messageText");websocket.send(input.value);var messages = document.getElementById('messages');messages.value += 'Client: ' + input.value + '\n';input.value = '';}</script>
</body>
</html>三、总结
前端页面中的代码在加载时会立即与服务端建立 WebSocket 连接，即页面一旦被加载，就会调用对应的@app.websocket(“/ws”)函数（此后执行while true中的代码）