如何在HTML中展示WebSocket服务器返回的SQL查询结果？页面空白求助

哈哈，你这是踩了个典型的前后端环境混淆的坑啦！直接在浏览器的前端代码里用Node.js的mysql模块肯定行不通，这就是页面空白的核心原因，具体问题和解决方法我给你理清楚：

为什么你的代码跑不起来？ #

• 浏览器不支持Node.js的require语法：require('mysql')是Node.js特有的模块加载方式，浏览器环境根本没有这个函数，代码执行到这里就会报错，导致后续逻辑全卡死，页面自然显示空白。
• 前端不能直接连数据库：就算能加载mysql模块，前端直接连接数据库不仅会暴露你的数据库账号密码（极度不安全），而且浏览器本身也不支持MySQL的客户端协议，环境完全不兼容。

正确的实现思路 #

应该让你的Python WebSocket服务器来承担数据库查询的工作，然后把查询结果通过WebSocket发送给前端页面，架构是：前端页面 ↔ Python WebSocket服务器 ↔ 数据库

具体代码实现 #

1. 修正前端HTML页面 #

去掉Node.js相关代码，只保留WebSocket的逻辑，用来接收服务器发送的数据库结果并展示：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket demo</title>
</head>
<body>
    <h3>数据库查询结果:</h3>
    <!-- 用来展示结果的容器 -->
    <div id="db-result" style="padding: 10px; border: 1px solid #ccc;"></div>

    <script type="text/javascript">
        // 建立WebSocket连接
        const ws = new WebSocket("ws://127.0.0.1:5678/");

        // 连接成功时，告诉服务器要查询数据库
        ws.onopen = function() {
            console.log("已连接到WebSocket服务器");
            ws.send("request_db_data");
        };

        // 接收服务器返回的数据库结果
        ws.onmessage = function(event) {
            console.log("收到服务器数据:", event.data);
            // 把结果展示在页面上
            document.getElementById("db-result").textContent = event.data;
        };

        // 处理连接关闭
        ws.onclose = function() {
            console.log("WebSocket连接已关闭");
        };

        // 处理错误
        ws.onerror = function(error) {
            console.error("WebSocket错误:", error);
        };
    </script>
</body>
</html>

2. 修改Python WebSocket服务器 #

在服务器端实现数据库查询逻辑，当收到前端的请求后，查询数据库并把结果返回给前端（这里假设你用websockets库和pymysql库，没有的话先安装：pip install websockets pymysql）：

import asyncio
import websockets
import pymysql

# 数据库配置（填你的真实信息）
DB_SETTINGS = {
    "host": "xxx.xxx.xxx.xxx",
    "user": "userdb",
    "password": "passwd",
    "database": "DB"
}

def get_db_data():
    """执行数据库查询并返回结果"""
    connection = None
    try:
        # 建立数据库连接
        connection = pymysql.connect(**DB_SETTINGS)
        cursor = connection.cursor()
        
        # 替换成你的实际查询语句
        query = "SELECT * FROM your_table_name LIMIT 5;"
        cursor.execute(query)
        
        # 获取查询结果，转成字符串方便发送
        results = cursor.fetchall()
        return "查询结果:\n" + "\n".join([str(row) for row in results])
    
    except Exception as e:
        return f"数据库查询出错: {str(e)}"
    
    finally:
        # 关闭数据库连接
        if connection:
            connection.close()

async def handle_client(websocket):
    async for message in websocket:
        # 如果收到前端的查询请求，就返回数据库结果
        if message == "request_db_data":
            db_result = get_db_data()
            await websocket.send(db_result)

async def main():
    # 启动WebSocket服务器
    async with websockets.serve(handle_client, "127.0.0.1", 5678):
        await asyncio.Future()  # 保持服务器运行

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

运行步骤 #

1. 先启动修改后的Python WebSocket服务器
2. 打开前端HTML页面，就能看到数据库查询结果展示在页面上了

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