请解释 Socket.IO 的连接建立和断开过程。如何处理连接和断开事件？

推荐答案

// www.javascriptcn.com code example
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('disconnect', () => {
    console.log('A user disconnected:', socket.id);
  });
});

本题详细解读

Socket.IO 连接建立过程

1. 客户端发起连接请求：客户端通过 io.connect() 或 io() 方法向服务器发起连接请求。
2. 服务器响应连接请求：服务器接收到连接请求后，会创建一个新的 socket 实例，并触发 connection 事件。
3. 建立双向通信通道：一旦连接建立，客户端和服务器之间可以通过 socket 对象进行双向通信。

Socket.IO 连接断开过程

1. 客户端断开连接：客户端可以通过 socket.disconnect() 方法主动断开连接，或者由于网络问题、页面关闭等原因被动断开连接。
2. 服务器检测断开：服务器会检测到客户端的断开，并触发 disconnect 事件。
3. 清理资源：服务器会清理与该 socket 相关的资源，如事件监听器等。

处理连接和断开事件

• 连接事件处理：通过 io.on('connection', callback) 监听连接事件，callback 函数会接收一个 socket 对象，表示新连接的客户端。
• 断开事件处理：通过 socket.on('disconnect', callback) 监听断开事件，callback 函数会在客户端断开连接时触发。

示例代码

// www.javascriptcn.com code example
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('disconnect', () => {
    console.log('A user disconnected:', socket.id);
  });
});

在这个示例中，当有客户端连接时，服务器会打印出该客户端的 socket.id；当客户端断开连接时，服务器同样会打印出该客户端的 socket.id。