如何在Socket.io中实现点击按钮触发用户断开并提示离场信息

你猜的没错！Socket.IO的disconnect是内置系统事件，没法通过socket.emit('disconnect')手动触发——这个事件只会在客户端和服务器的连接真的断开时自动触发（比如浏览器关闭、网络断了，或者主动调用socket.disconnect()）。

下面给你两种实用的解决方案，按需选择：

方案1：自定义用户离开事件（推荐，更灵活） #

这种方式可以让用户点击离开按钮时主动告知服务器，还能自由控制是否断开连接。

修改服务器端（socket.js） #

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

// 存储socket和用户名的对应关系
const userSocketMap = new Map();

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection',function(socket) {
  socket.on('new user', function(username) {
    console.log(`${username} has just joined the chat`);
    // 记录当前socket对应的用户名
    userSocketMap.set(socket.id, username);
    // 可以把加入消息广播给所有在线用户
    io.emit('chat notice', `${username} has just joined the chat`);
  });

  // 监听我们自定义的「用户离开」事件
  socket.on('user leave', function(username) {
    const leaveMsg = `${username} has left the chat`;
    console.log(leaveMsg);
    // 广播离开消息给所有人
    io.emit('chat notice', leaveMsg);
    // 移除映射关系
    userSocketMap.delete(socket.id);
    // 主动断开连接（可选，如果你需要用户彻底退出）
    socket.disconnect();
  });

  // 处理用户意外断开的情况（比如直接关浏览器）
  socket.on('disconnect', function() {
    const username = userSocketMap.get(socket.id);
    if (username) {
      const leaveMsg = `${username} has left the chat unexpectedly`;
      console.log(leaveMsg);
      io.emit('chat notice', leaveMsg);
      userSocketMap.delete(socket.id);
    }
  });
})

http.listen(3000, function(){
  console.log('listening on *:3000');
})

修改客户端（index.html） #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
  .notice { color: #666; margin: 8px 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect();
var currentUsername = '';

$('#join').click(function(){
  currentUsername = $('input').val().trim();
  if (currentUsername) {
    socket.emit('new user', currentUsername);
  }
})

$('#leave').click(function(){
  if (currentUsername) {
    // 发送自定义的离开事件
    socket.emit('user leave', currentUsername);
    currentUsername = ''; // 清空当前用户名
  }
})

// 监听服务器广播的通知消息，显示在页面上
socket.on('chat notice', function(msg) {
  $('<div class="notice">').text(msg).appendTo('body');
})
</script>
Choose your username
<input type="text">
<button id="join" type="submit"> Enter </button>
<button id="leave" type="submit"> Leave </button>
</body>
</html>

方案2：直接断开连接并识别用户 #

如果不需要提前发送通知，只想在断开时提示，那可以让客户端点击按钮直接断开，服务器通过之前存储的映射关系识别用户：

客户端修改leave按钮逻辑 #

$('#leave').click(function(){
  if (currentUsername) {
    socket.disconnect();
    currentUsername = '';
  }
})

服务器端的代码和方案1里的disconnect事件处理逻辑保持一致就行。

核心总结：

• 别手动触发disconnect事件，这是Socket.IO内部管控的事件
• 自定义业务事件来处理主动离开的逻辑，配合socket.disconnect()实现真正断开
• 用映射表存socket和用户名的对应关系，意外断开时也能识别用户

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