如何修改Flask-Socket.IO程序实现按钮点击触发请求？

前端（index.html）修改 #

在页面中添加触发按钮，将原本在socket连接时自动发送请求的逻辑，移到按钮点击事件里，同时增加防重复点击的状态标记：

<!DOCTYPE HTML>
<html>
<head>
    <title>Long task</title>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            namespace = '/test';
            var socket = io(namespace);
            var isTaskRunning = false; // 标记任务状态，防止重复触发

            socket.on('connect', function() {
                $('#messages').append('<br/>' + $('<div/>').text('已连接到服务器，点击按钮启动任务').html());
            });

            // 绑定按钮点击事件
            $('#start-task-btn').click(function() {
                if (isTaskRunning) {
                    $('#messages').append('<br/>' + $('<div/>').text('当前有任务在运行，请等待完成').html());
                    return;
                }
                isTaskRunning = true;
                $('#messages').append('<br/>' + $('<div/>').text('正在请求运行任务...').html());
                socket.emit('do_task', {duration: '60'});
            });

            socket.on('task_done', function(msg, cb) {
                $('#messages').append('<br/>' + $('<div/>').text(msg.data).html());
                isTaskRunning = false; // 任务完成后重置状态
                if (cb) cb();
            });
        });
    </script>
</head>
<body>
    <h3>Messages</h3>
    <button id="start-task-btn">启动长任务</button> <!-- 新增触发按钮 -->
    <div id="messages"></div>
</body>
</html>

后端（app.py）优化（可选） #

原代码中任务完成后会调用disconnect()，导致socket连接断开，用户需要刷新页面才能再次发起任务。如果想支持多次点击发起任务，直接移除这个调用即可：

@socket_.on('do_task', namespace='/test')
def run_lengthy_task(data):
    try:
        duration = int(data['duration'])
        sleep(duration)
        emit('task_done', {'data': 'long task of {} seconds complete'.format(duration)})
        # 移除disconnect()，保持socket连接以便再次发起任务
    except Exception as ex:
        print(ex)

修改说明 #

1. 核心逻辑：把自动发送请求的代码从socket.on('connect')事件中移出，放到按钮点击事件里，只有用户主动点击才会触发任务请求
2. 防重复机制：通过isTaskRunning变量避免用户短时间内多次点击导致重复任务
3. 体验优化：调整连接成功后的提示文本，明确告知用户操作方式；后端移除断开连接的逻辑后，可支持多次发起任务，无需刷新页面

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