FastAPI WebSocket
FastAPI WebSocket
后端搭建websocket服务器
from fastapi import WebSocket
@app.websocket('/ws')
async def websocket_dep(websocket:WebSocket):
await websocket.accept()
while True:
data =await websocket.receive_text()
websocket.send_text() # 响应内容前端发送 请求 和接收内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
list-style-type: none;
}
li {
position: relative;
height: 40px;
}
</style>
</head>
<body>
<h1>Websocket</h1>
<form action="">
<input type="text" name="mess" id="msg">
<input type="button" value="submit" id="btn">
</form>
<ul id='rst'>
<li><span style="float: left;">aaaaaa</span></li>
<li><span style="float: right;">bbbbbb</span></li>
</ul>
<script>
var ws = new WebSocket('ws://localhost:8000/ws');
ws.onmessage = function(event){
li = document.createElement('li');
span = document.createElement('span');
span.innerHTML = event.data; // 接收消息
span.style.float = 'left';
li.appendChild(span);
rst = document.getElementById('rst');
rst.appendChild(li);
}
var msg = document.getElementById('msg');
var btn = document.getElementById('btn');
btn.onclick = function(event){
ws.send(msg.value) // 发送消息
li = document.createElement('li');
span = document.createElement('span');
span.innerHTML = msg.value;
span.style.float = 'right';
li.appendChild(span);
msg.value = '';
rst = document.getElementById('rst');
rst.appendChild(li);
// event.preventDefault(); // 不跳转
return false // 不跳转
}
</script>
</body>
</html>托管
Last updated