Socket.IO如何断开客户端连接 服务端触发断开后客户端无感知如何解决

服务端问题修正 #

你当前服务端disconnect事件存在核心逻辑错误：回调中直接使用了未定义的data变量，且没有建立socket.id和上报位置的绑定关系，断开时无法定位要删除的位置数据，导致后续推送断开通知的逻辑全部失效。
修正后的server.js代码如下：

const server = require('http').Server(app);
const io = require('socket.io')(server);
server.listen(8080)
// 改为存储对象，key为socket.id，value为对应用户的位置数据
const userLocations = {};

io.on('connection',(socket)=>{
    socket.on('Client_send_pos',(data)=>{ 
        console.log("new client connected, with id " + socket.id);
        // 绑定存储当前socketid对应的位置
        userLocations[socket.id] = data;
        // 转为数组推送给所有客户端做位置同步
        io.emit('send_mang_pos',Object.values(userLocations));            
    });
        
    socket.on("disconnect",() => {
        console.log(`${socket.id} User disconnected.`)
        // 直接删除断开连接用户对应的位置数据
        delete userLocations[socket.id];
        // 推送断开用户的id，同时同步最新的全量位置列表
        io.emit('user_disconnect', socket.id);
        io.emit('send_mang_pos',Object.values(userLocations));           
    });
})

客户端问题修正 #

你当前客户端仅监听了位置同步事件，没有监听服务端推送的断开相关事件，也没有监听socket本身的连接状态事件，因此无法感知连接断开。
修正后的客户端代码如下：

let socket = io.connect('http://localhost:8080');
const position = [this.state.location.x, this.state.location.y]
socket.emit('Client_send_pos',position)
const map = L.map('map').setView(position, 10);
        
socket.on('send_mang_pos',(data)=>{
    // 原有位置渲染逻辑
    data.forEach((pos)=>{
        // 渲染位置标记的逻辑
    });
});

// 监听其他用户断开连接的通知
socket.on('user_disconnect', (disconnectedSocketId) => {
    console.log('用户断开连接，id为：', disconnectedSocketId)
    // 此处补充移除对应用户位置标记的逻辑
})

// 监听当前客户端自身和服务端的连接断开事件
socket.on('disconnect', () => {
    console.log('你已与服务端断开连接')
    // 此处补充断开后的用户提示、自动重连等逻辑
})

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