Socket.io未更新客户端数据：导航栏在线计数器不实时刷新问题

我明白你的困扰——在线计数器能正确显示用户数量，但新窗口连接或者关闭窗口时，计数器没法实时刷新，只有手动刷新页面才会显示正确数值。问题出在你的服务端代码只给当前连接/断开的socket发送更新事件，没有把这个变化同步给所有在线的客户端。

问题根源分析 #

• 当新用户连接时，你用socket.emit('online', ...)只给刚建立连接的这个客户端发送了在线数，其他已经在线的客户端完全不知道有新用户加入，所以他们的计数器不会变化。
• 当用户断开连接时，你同样只给即将断开的这个socket发送更新，但这个socket马上就要关闭了，其他在线客户端根本收不到这个更新通知。

修改后的服务端代码 #

let currentConnections = {}; 
let numberOfConnections = () => Object.keys(currentConnections).length; 

io.sockets.on('connection', (socket) => { 
    console.log('New user connected.'); 
    currentConnections[socket.id] = { socket: socket }; 

    // 给所有在线客户端广播当前在线数（包括刚连接的用户）
    io.emit('online', { count: numberOfConnections() }); 

    socket.on('disconnect', () => { 
        console.log('User has disconnected.'); 
        delete currentConnections[socket.id]; 
        // 用户断开后，给所有剩余在线客户端广播更新后的在线数
        io.emit('online', { count: numberOfConnections() }); 
    }); 
}); 

关键修改说明 #

• 把原来的socket.emit()替换成io.emit()：这个方法会将事件发送给所有连接到服务器的客户端。这样不管是新用户加入，还是已有用户离开，所有在线的客户端都会立刻收到更新通知，进而实时刷新页面上的计数器。
• 如果你有特殊需求（比如只想给除新用户外的其他客户端发通知），可以用socket.broadcast.emit()，但在你的场景里，我们需要全局同步在线数，所以io.emit()是最合适的选择。

你的客户端代码不需要修改，它已经正确监听了online事件并更新DOM元素，只要服务端能正确广播事件，就能实现实时更新效果。

内容的提问来源于stack exchange，提问作者Nikola Stojaković