无法处理单个按钮点击事件：Flask-SocketIO服务端接收异常排查

问题根源 #

你的客户端代码里，按钮点击事件中错误嵌套了socket.on('connect', ...)监听。页面加载后Socket连接已经建立，connect事件只会在首次连接时触发一次，后续按钮点击时，这个监听的回调不会再执行，导致消息根本没发送到服务端。

修复方案 #

修改客户端HTML中的JavaScript代码，移除按钮点击事件内的connect监听，直接在点击时发送Socket事件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>click demo</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <script>
        let namespace = '/test';
        let socket = io(namespace);

        //connect to the server on page load
        $(function(){
            socket.on('connect', function(){
                socket.emit('my_event1', {'data1' : 'Hello World!'});
                //alert("connected!")
            });

            $('#button2').click(function(){
                let text2 = "2 2 2 2 2 2"
                socket.emit('my_event2', {'data2' : text2});
                //alert('btn2 clicked!')
            });

            $('#button3').click(function(){
                let text3 = "3 3 3 3 3 3"
                socket.emit('my_event3', {'data3' : text3});
                //alert('btn3 clicked!')
            });
        });
    </script>
</head>
<body>
    <input id="button2" type="button" value="Button 2">
    <input id="button3" type="button" value="Button 3">
</body>
</html>

说明 #

• 服务端代码无需修改，本身逻辑是正确的
• 修改后，点击按钮2会直接向服务端发送my_event2事件，按钮3发送my_event3事件，服务端对应的处理函数会打印消息
• 首次连接时的my_event1仍会正常触发

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