python通过Websocket与html主动通讯
python通过Websocket与html主动通讯
导语：在Web开发中，实现实时通信是一项常见的需求。本文将介绍如何使用Python和WebSocket技术实现与HTML页面的实时通信，以显示当前的实时时间。
1. WebSocket简介
WebSocket是一种全双工通信协议，允许在客户端和服务器之间建立持久连接，实现实时数据的双向传输。相较于传统的HTTP请求-响应模式，WebSocket可以实现服务器主动向客户端推送数据，从而实现实时通信。
2. 准备工作
在开始之前，我们需要安装Python的websockets库。可以使用以下命令进行安装：
pip install websockets
3. Python后端代码
首先，我们编写一个Python的WebSocket服务器端代码，用于向客户端发送当前的实时时间。
import asyncio
import websockets
import datetime
async def time_server(websocket):
while True:
# 加上时间戳 精确到毫秒
dt_ms = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S.%f')
print(dt_ms)
await websocket.send(dt_ms)
await asyncio.sleep(1 / 50)
start_server = websockets.serve(time_server, 'localhost', 5001)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
上述代码中，我们定义了一个名为time_server的协程，用于不断向连接的客户端发送当前的时间。在循环中，我们使用datetime模块获取当前时间，并将其格式化为带有毫秒的字符串。然后，我们使用await websocket.send(dt_ms)将时间信息发送给客户端。asyncio.sleep(1 / 50)用于控制发送频率，这里设置为每秒钟发送50次。
最后，我们使用websockets.serve()方法创建一个WebSocket服务器，并将其绑定到本地的5001端口。
4. HTML前端代码
接下来，我们编写一个简单的HTML页面，用于显示实时时间。
<!DOCTYPE html>
<html>
<head>
<title>实时时间</title>
</head>
<body>
<h1>实时时间：</h1>
<p id="time"></p>
<script>
function connectWebSocket() {
var socket = new WebSocket('ws://localhost:5001');
socket.onopen = function (event) {
console.log('WebSocket连接已打开');
};
socket.onmessage = function (event) {
var timeElement = document.getElementById('time');
var dt_ms = event.data;
console.log(dt_ms);
timeElement.textContent = dt_ms;
};
socket.onclose = function (event) {
console.log('WebSocket连接已关闭');
// 尝试重新连接
setTimeout(connectWebSocket, 1000/2);
};
}
connectWebSocket();
</script>
</body>
</html>
在上述HTML代码中，我们使用JavaScript创建了一个WebSocket对象，通过new WebSocket('ws://localhost:5001')建立与服务器的WebSocket连接。这里的URL指定了服务器的地址和端口。
当WebSocket连接成功建立时，socket.onopen事件被触发，我们在控制台输出一条连接成功的消息。
当接收到服务器发送的消息时，socket.onmessage事件被触发，我们将接收到的时间信息更新到页面上，通过document.getElementById('time')获取时间显示的元素，并使用textContent属性将时间信息设置为接收到的数据。
如果WebSocket连接关闭，socket.onclose事件被触发，我们输出一条连接关闭的消息，并尝试重新连接，通过setTimeout(connectWebSocket, 1000/2)设置延迟进行重新连接。
5. 运行效果（延迟）
将上述的Python代码保存为server.py，HTML代码保存为index.html。然后在命令行中运行以下命令启动Python服务器：
python server.py
在浏览器中打开index.html，即可看到页面上实时显示的时间。
效果图
6. 总结
本文介绍了如何使用Python和WebSocket技术实现与HTML页面的实时通信。通过建立WebSocket连接，Python服务器可以主动向客户端推送数据，实现实时通信的效果。这种方法可以在各种Web应用中使用，为用户提供实时的数据更新和交互体验。希望本文对您理解WebSocket的使用以及实现实时通信有所帮助。
- 其他参考文档：WebSocket教程-阮一峰
