如何实现WebSocket服务端数据在HTML页面实时展示？

问题分析 #

你的代码存在几个关键问题导致页面无法更新：

1. 重复绑定onmessage事件：initWebSocket里已经给websocket.onmessage赋值为未定义的onMessage，之后又重新赋值匿名函数，覆盖了原有绑定，且初始绑定完全无效。
2. 未初始化连接：没有调用initWebSocket函数，WebSocket连接根本没建立。
3. 服务端未转发数据：你的数据流要求服务端将收到的消息转发给HTML客户端，否则HTML页面收不到其他客户端发送的数据。
4. 潜在跨域问题：直接打开本地HTML文件可能触发浏览器跨域限制，导致WebSocket连接失败。

修正后的完整代码 #

1. HTML结构（保留你的原有结构）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket数据展示</title>
</head>
<body>
    <p class="reading"><span id="test"></span> &deg;C</p>
    <script src="app.js"></script>
</body>
</html>

2. JavaScript代码（app.js）

const gateway = "ws://localhost:8001/";
let websocket;

function initWebSocket() {
    console.log('尝试建立WebSocket连接…');
    websocket = new WebSocket(gateway);

    // 连接成功回调
    websocket.onopen = () => {
        console.log('WebSocket连接已建立');
    };

    // 连接关闭回调，自动重试重连
    websocket.onclose = () => {
        console.log('WebSocket连接已关闭，3秒后重试');
        setTimeout(initWebSocket, 3000);
    };

    // 接收服务端消息并更新页面
    websocket.onmessage = (event) => {
        console.log('收到数据:', event.data);
        const targetElement = document.getElementById('test');
        if (targetElement) {
            // 用textContent更安全，避免XSS风险
            targetElement.textContent = event.data;
        } else {
            console.error('找不到id为test的页面元素');
        }
    };

    // 错误回调
    websocket.onerror = (error) => {
        console.error('WebSocket错误:', error);
    };
}

// 页面加载完成后自动初始化连接
window.addEventListener('load', initWebSocket);

3. 必需的WebSocket服务端代码（Python）

服务端需要负责转发消息给所有连接的客户端，代码如下（保存为server.py）：

import asyncio
import websockets

# 存储所有活跃的客户端连接
connected_clients = set()

async def handle_client(websocket):
    connected_clients.add(websocket)
    try:
        # 持续接收客户端消息
        async for message in websocket:
            print(f"收到客户端消息: {message}")
            # 转发消息给所有其他客户端（包括HTML页面）
            for client in connected_clients:
                if client != websocket:
                    await client.send(message)
    finally:
        # 客户端断开后移除连接记录
        connected_clients.remove(websocket)

async def main():
    async with websockets.serve(handle_client, "localhost", 8001):
        await asyncio.Future()  # 保持服务持续运行

if __name__ == "__main__":
    asyncio.run(main())

测试步骤 #

1. 启动服务端：运行python server.py
2. 托管HTML页面：用本地HTTP服务器打开HTML文件，比如执行python -m http.server 8080，然后在浏览器访问http://localhost:8080/你的HTML文件名.html
3. 发送测试数据：执行python -m websockets ws://localhost:8001/，输入任意数字（比如25）并回车，此时HTML页面的温度数值会立即更新。

内容的提问来源于stack exchange，提问作者Wanexa