先展示代码
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Websocket客户端</title>
</head>
<body>
<label for="box">请输入要发送的内容:</label>
<input type="text" id="box">
<button onclick="send_message()">发送</button>
<script>
// 与服务器约定的连接以及端口
const websocket = new WebSocket('ws://127.0.0.1:8080/');
// 连接成功建立的回调方法
websocket.onopen = function(){
console.log("websocket连接成功");
};
// 接受到消息的回调方法
websocket.onmessage = function(event) {
console.log(event.data);
}
// 连接发生错误的回调方法
websocket.onerror = function() {
console.log('WebSocket连接发生错误');
};
// 连接关闭的回调方法
websocket.onclose = function(){
console.log('WebSocket连接关闭');
};
function send_message(){
let text = document.getElementById('box').value
websocket.send(text);
}
</script>
</body>
</html>
后端代码
import asyncio
import websockets
async def echo(websocket):
# 使用websocket在客户端和服务器之间建立全双向连接后,就可以在连接打开是调用send()方法
message = 'hello world'
await websocket.send(message)
return True
async def recv_msg(websocket):
# 接受数据
while True:
recv_text = await websocket.recv()
print(recv_text)
async def main_logic(websocket):
await echo(websocket)
await recv_msg(websocket)
start_server = websockets.serve(main_logic, '127.0.0.1', 8080)
loop = asyncio.get_event_loop() # 获取事件循环
loop.run_until_complete(start_server) # 运行服务
# 创建一个连接对象之后,需要不断监听返回的数据,则调用run_forever方法,要保持长连接即可
loop.run_forever()
1,通过html代码打开网页

随便点击一个浏览器的按钮打开

2.打开控制台,运行后端代码


3,点击刷新

随便发送一个内容,就会在后端看到结果


1万+

被折叠的 条评论
为什么被折叠?



