1、fastapi 部分代码
@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
await manager.connect(websocket)
try:
while True:
data = await websocket.receive_text()
await manager.broadcast(f"Message: {data}")
except WebSocketDisconnect:
manager.disconnect(websocket)
2、html 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket 测试</title>
</head>
<body>
<h2>WebSocket 连接测试</h2>
<button onclick="connectWebSocket()">连接 WebSocket</button>
<button onclick="sendMessage()">发送消息</button>
<pre id="log"></pre>
<script> let socket = null;
function log(msg) {
const logEl = document.getElementById('log');
logEl.textContent += msg + '\n';
}
function connectWebSocket() {
const wsUrl = "wss://xx.com/ws";
log(`🔌 正在连接到: ${wsUrl}`);
socket = new WebSocket(wsUrl);
socket.onopen = function () {
log("✅ WebSocket 连接已建立");
};
socket.onmessage = function (event) {
log("📩 收到消息: " + event.data);
};
socket.onerror = function (error) {
log("❌ 出现错误: " + error.message || error);
};
socket.onclose = function (event) {
log(`🔌 连接已关闭 (code=${event.code}, reason=${event.reason})`);
};
}
function sendMessage() {
if (socket && socket.readyState === WebSocket.OPEN) {
const msg = "Hello, server!";
log("📤 发送消息: " + msg);
socket.send(msg);
} else {
log("⚠️ WebSocket 未连接，无法发送");
}
}
</script>
</body>
</html>
3、nginx 代码 注意开头的规则 ^~ /ws， 如果你直接些/ws 会连接不上。 具体原因：> 🔧 ^~ /ws 会匹配 /ws 和 /ws/，这样你的请求 wss://xx.com/ws 就能进去了！
4、实际测试结果：
