每次用户刷新时，聊天都会显示用户断开连接

Question

如果某人转到站点中的另一个页面或关闭选项卡，聊天应该向其他用户显示某人离开，但服务器刷新也算作用户离开，因此它会一次又一次地显示它每次重新加载。有什么方法可以知道用户是否刷新或关闭了选项卡？如果没有，还有什么可以推荐的吗？

服务器端： `

    socket.on('disconnect', ()=> {

      const user= userleave(socket.id);

      io.emit('userdisconnected',user)

    })

前端：

    socket.on('userdisconnected',function outputdisconnect(data){
        
            let div = document.createElement('div')
            div.classList.add('output')
            div.innerHTML = '<p>' + data.username+ ' has left the chat</p>'
            chatwindow.appendChild(div)
        
    })

Answer 1

您可以做的就是在发送 userdisconnected 之前等待 3-4 秒，如果同一用户在此期间再次连接，则跳过它。

为了给出一个粗略的想法，你可以这样做：

const waitingForDisconnectCheck = {};

const disconnectUserCallback = userId => {
    return () => {
        const user = userleave(userId);
        io.emit('userdisconnected',user)
        delete waitingForDisconnectCheck[userId]
    }
}

socket.on('disconnect', () => {
  waitingForDisconnectCheck[socket.id] = setTimeout(disconnectUserCallback(socket.id), 3000);
})

socket.on('connect', () => {
    waitingForDisconnectCheck[socket.id].clearTimeout()
    delete waitingForDisconnectCheck[userId]
})

基本上当一个socket断开连接时，你将相关用户放在等待列表中，当3s过去时，它会发出断开连接信号并将自己从列表中删除，如果用户在超时之前重新连接，则超时被清除并删除用户从等候名单中。

注意：这只有在 socket.id 在重新连接时保持不变时才有效，否则，请找到一种在重新连接时识别用户的方法。