WebSocket实现动态可视化（一）
实现思路：
服务端向客户端发送数据，客户端接收数据保存为数组，并赋值到echart对应的data值
以下是服务端用websocket向客户端发送数据
服务端
import asyncio
import time
import websockets
async def echo(websocket, path):
for message in range(100):
time.sleep(1)
await websocket.send(str(message))
asyncio.get_event_loop().run_until_complete(websockets.serve(echo, 'localhost', 8765))
asyncio.get_event_loop().run_forever()
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>消息接收</title>
</head>
<body>
<div id="msg"></div>
<script>
window.onload = function () {
//先判断浏览器是否支持websocket
if ("WebSocket" in window) {
//alert("您的浏览器支持 WebSocket!");
// 打开一个 web socket
ws = new WebSocket("ws://127.0.0.1:8765/");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法尝试发送数据
//ws.send("test");
alert('连接成功')
};
//监听服务端是否有消息发送过来，当有消息时执行方法
ws.onmessage = function (evt) {
//获取服务器发来的消息
var received_msg = evt.data;
//显示消息
//alert("收到消息："+received_msg)
document.getElementById('msg').innerText = received_msg
};
//关闭页面或其他行为导致与服务器断开链接是执行
ws.onclose = function () {
// 关闭 websocket
alert("连接已关闭...");
};
} else {
// 浏览器不支持 WebSocket
alert("您的浏览器不支持 WebSocket!");
}
}
</script>
</body>
</html>
总结：
实现的效果就如计数器一样，针对之前ajax轮询，通过websocket可以减少一些不必要的无效请求
下节链接：WebSocket实现动态可视化（二）
3213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
