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，即可看到页面上实时显示的时间。

效果图

image-20230716114007736

6. 总结

本文介绍了如何使用Python和WebSocket技术实现与HTML页面的实时通信。通过建立WebSocket连接，Python服务器可以主动向客户端推送数据，实现实时通信的效果。这种方法可以在各种Web应用中使用，为用户提供实时的数据更新和交互体验。希望本文对您理解WebSocket的使用以及实现实时通信有所帮助。

posted @   Dapenson  阅读(2026)  评论(0)  编辑  收藏  举报
相关博文：
·  python通过SSE与html主动通讯
·  使用webrtc-streamer在html页面中显示tp-link摄像头实时视频
·  python+socket+jq实现web页面实时输出结果
·  python+socket+jq实现web页面实时输出结果
·  WebSocket
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手