使用SocketIO实现服务器向客户端发消息遇问题：页面无显示求排查

你的代码存在多个问题导致HTML页面无法显示服务器发送的消息，以下是具体错误和修复方法：

服务器端错误 #

1. 未主动触发消息发送：当前服务器仅在收到客户端的my_event事件时才会发送my_response，但客户端并没有发送该事件的代码，因此服务器从未主动向客户端推送消息。
2. 响应数据格式错误：emit('my_response', {data: 'sent'})中使用变量data作为键名，这会导致响应对象的键是客户端发送的任意数据，而非固定键名，客户端无法可靠读取内容。

客户端错误 #

1. 未初始化Socket连接：代码中直接使用socket对象，但没有创建Socket实例，无法与服务器建立连接。
2. 监听错误的事件名：客户端监听的是my_event事件，但服务器发送的是my_response事件，两者不匹配。
3. JavaScript语法错误：$('#messages').text(msg.data).html());存在多余的闭合括号，且同时调用text()和html()是冗余操作。
4. DOM加载前执行脚本：脚本放在<head>中，此时<div id="messages">尚未加载，无法操作该元素。
5. 数据读取路径错误：客户端尝试读取msg.data，但服务器发送的对象键名并非固定为data。

修复后的代码 #

服务器端（server_sends_client_receives.py） #

修改为服务器在客户端连接时主动发送消息，同时使用固定键名：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('server_sends_client_receives.html')

# 客户端连接时触发消息发送
@socketio.on('connect')
def handle_connect():
    # 使用固定键名"message"发送内容
    emit('my_response', {'message': '服务器主动发送的消息'})

if __name__ == '__main__':
    socketio.run(app, debug=True)

客户端（server_sends_client_receives.html） #

修复Socket初始化、事件监听、语法错误，并确保DOM加载完成后执行脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server Sends Message</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
</head>
<body>
<div id="messages"></div>

<script type="text/javascript">
    // 初始化Socket连接
    var socket = io();

    // 监听服务器发送的my_response事件
    socket.on('my_response', function(msg) {
        // 将服务器消息插入到页面中
        $('#messages').text(msg.message);
    });
</script>
</body>
</html>

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