为何点击按钮时弹窗次数逐次递增？socket.io技术问题咨询

问题现象 #

项目基于socket.io实现服务端与客户端通信，点击按钮时客户端向服务端发送数据，服务端返回反馈；当反馈值为1时，页面弹出alert提示。但出现异常：首次点击弹窗1次，第二次点击弹窗2次，第三次点击弹窗3次，以此类推。

问题原因 #

客户端代码中，每次调用log函数（即每次点击按钮）时，都会重复绑定Existing-user事件的监听回调。随着点击次数增加，该事件的监听函数会不断累积，导致服务端返回反馈时，所有已绑定的回调都会被触发，弹窗次数也就随之递增。

客户端原代码 #

function log(names, proto) {
    socket.emit('log',
        JSON.stringify({
            msg: names,
            proto: proto
        })
    )
    socket.on('Existing-user',(e)=>{
        console.log('!')
        if(e===0){
            $("login").hide()
            $("content").show()
        }else{
            alert("The username is repeated, please change it.")
        }
    })
}

服务端代码 #

socket.on('log', function (e) {
    let loginfo = JSON.parse(e);
    if(userlist.includes(loginfo.msg)){
        socket.emit('Existing-user',1)
        console.log('!')
    }else{
        userlist.push(loginfo.msg)
        socket.emit('Existing-user',0)
    }
    console.log(userlist)
})

解决方案 #

将Existing-user事件的监听代码移到log函数外部，确保只绑定一次，避免每次点击按钮时重复绑定。修改后的客户端代码如下：

// 初始化阶段仅绑定一次事件监听
socket.on('Existing-user',(e)=>{
    console.log('!')
    if(e===0){
        $("login").hide()
        $("content").show()
    }else{
        alert("The username is repeated, please change it.")
    }
})

function log(names, proto) {
    socket.emit('log',
        JSON.stringify({
            msg: names,
            proto: proto
        })
    )
}

说明 #

服务端代码逻辑无问题，无需修改。调整客户端代码后，每次点击按钮仅发送请求，Existing-user事件的监听函数始终只有一个，服务端返回反馈时只会触发一次回调，弹窗次数即可恢复正常。

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