关于 B/S 判断浏览器断开的问题讨论

问题背景

在 B/S 架构中，当浏览器与服务器之间建立连接后，如何判断浏览器是否已经断开连接？

问题分析

服务器无法直接获取浏览器的状态，因此需要以下三种方法来判断浏览器连接是否仍然有效：

心跳检测
长轮询
WebSocket

1. 心跳检测

心跳检测的原理是在一定时间间隔内，服务器发送一个特定的信息（如特定数据包）到客户端，只有客户端正确响应了该信息才表示该客户端仍然处于连接状态，否则就认为客户端已经断开连接。

以下是一个基于socket.io进行心跳检测的例子（node.js）：

// 设置心跳检测间隔为5s
const HEARTBEAT_INTERVAL = 5000; 

io.set('heartbeat interval', HEARTBEAT_INTERVAL);
io.set('heartbeat timeout', HEARTBEAT_INTERVAL * 2);

io.on('connection', socket => {
  console.log('Client connected');

  // 心跳检测，监听客户端发来的特定消息
  socket.on('heartbeat', () => {
    socket.emit('pong', 'heartbeat');
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

客户端发来 heartbeat 消息，服务器接收到消息后发送 pong 消息响应，这样就可以确认客户端连接是否仍然有效。

2. 长轮询

长轮询的原理是客户端发起一个请求，服务器在该请求被响应之前保持连接处于挂起状态，直到有数据可以发送或达到超时时间才返回响应。这样可以让服务器在客户端未断开连接的情况下实时探测连接状态。

以下是一个基于jQuery的长轮询示例：

function longPolling() {
  $.ajax({
    url: '/polling',
    success: data => {
      console.log('got data:', data);
      longPolling();
    },
    timeout: 30000,
    error: () => {
      console.log('polling error');
      longPolling();
    }
  });
}

longPolling();

在服务器端，可以设置一个路由（/polling）用来处理长轮询请求，并在保持连接期间监控连接状态，当连接状态改变时返回对应状态的数据。

app.get('/polling', (req, res) => {
  // 在此处判断连接是否断开，返回不同的状态
})

3. WebSocket

WebSocket 协议是一个双向通信协议，在建立连接后，客户端与服务器可以通过它进行双向通信。WebSocket 具有高效、实时等优势，可以用于实时通知、在线聊天等场景。

以下是一个基于 socket.io 的 WebSocket 示例（node.js）：

io.on('connection', socket => {
  console.log('Client connected');

  socket.on('message', message => {
    console.log('got message:', message);
    socket.send('ack');
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

客户端与服务器之间可以实现实时双向通信，这样就可以及时感知客户端是否断开连接。