Socket.IO客户端while循环校验用户输入失效问题排查

我希望在客户端通过弹窗获取用户输入，然后在服务器端校验输入是否合法。若输入无效，客户端需重新弹窗提示用户，直到获取到合法输入后再继续后续流程。

现有代码如下：

客户端代码（client.js） #

while(looping){
    temp_name = prompt(usr + err_msg + pmsg, "");
    socket.emit("is_valid", temp_name, (response) => {
        looping = !response.status
        err_msg = response.message
    });
}

服务端代码（server.js） #

// check if username is valid
socket.on("is_valid", (temp_name, callback) => {
    // init
    let msg = "";
    let stat = false;

    // (check if valid)

    // return
    stat = (msg == "")
    response = {
        status: stat,
        message: msg,
    }
    callback(response);
});

移除client.js中的while循环时代码可正常运行，但添加该循环后完全失效，无日志输出，且无论输入内容都会反复弹窗。请求排查该问题的原因。

问题原因 #

JavaScript是单线程模型，while循环会阻塞主线程，导致Socket.io的异步回调函数根本没有机会执行：

• 进入while循环后，主线程被持续占用，一直在重复执行prompt和socket.emit，但修改looping的回调函数被放到任务队列中，永远得不到执行时机
• looping变量始终保持初始的true值，循环无法终止，因此弹窗会反复出现，服务器的响应也无法被处理

解决方案 #

将同步的while循环替换为异步递归调用，让主线程有机会处理Socket.io的响应回调：

修改后的客户端代码示例：

function requestValidName() {
    temp_name = prompt(usr + err_msg + pmsg, "");
    socket.emit("is_valid", temp_name, (response) => {
        if (!response.status) {
            err_msg = response.message;
            requestValidName(); // 输入无效，重新弹窗请求
        } else {
            // 输入合法，执行后续业务流程
            // ... 此处编写后续逻辑
        }
    });
}

// 启动校验流程
requestValidName();

补充说明 #

• 异步递归方式不会阻塞主线程，每次发送请求后，主线程可以处理其他任务（包括Socket.io的响应回调）
• 回调函数执行后，根据服务器返回的状态决定是否重新触发弹窗，完全匹配需求逻辑

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