如何使用socket.io确定浏览器何时完全断开与我的站点的连接?



由于人们可以打开许多选项卡并使用许多浏览器,因此我在确定用户何时关闭每种浏览器的所有选项卡时遇到了一些麻烦。

如果所有选项卡都关闭,则用户不再连接,所以我假设您想在服务器上知道他是否完全断开连接?

您应该在服务器上保存针对用户标识符(登录名或类似)的套接字列表,当打开一个新选项卡时,它将有一个新的套接字连接,因此将其添加到列表中。

当一个套接字连接关闭时,将它从该用户的套接字集合中删除。

当用户的最后一个套接字连接关闭时,您知道该用户已完全断开连接。

编辑示例

类似这样的内容(未经测试和匆忙编写!)

'use strict';
var userConnections = [];
io.on('connection', function (socket) {
  var username = socket.request.user.username;
  var existingUser = userConnections.find(function(userConnection){
    return userConnection.username === username;
  })
  if (!existingUser){
    existingUser = { 
      username: username,
      sockets: []
     }
  }
  existingUser.sockets.push(socket);
  socket.on('disconnect', function () {
    var socketIndex = existingUser.indexOf(socket);
    existingUser.sockets.splice(socketIndex, 1);
    if (existingUser.sockets.length === 0){
      //user has completely disconnected
    } 
  });
});

编辑-澄清后(见注释)

OP表示他希望知道某个特定浏览器实例的所有连接何时断开。

因为你不能从javascript中访问任何关于浏览器进程的系统信息,所以我看不到任何实现这一点的方法。

可以在客户端检测浏览器类型(Chrome/IE/Edge等),并在套接字连接上发送此信息。然后,您可以存储引用此信息的套接字信息。然而,我不认为这是OP想要的。

这是我的解决方案,这取决于@ banner的一个。"套接字。"Cookies"存储浏览器的Cookies如果我遗漏了什么,请告诉我。

'use strict';
var userConnections = {};
io.on('connection', function (socket) {
  var username = socket.request.user.username;
  var visit_id = (socket.cookies.vid) ? socket.cookies.vid : random_unique_id();
  //set cookie here
  setCookie('vid', visit_id, expire);
  if (!userConnections[visit_id])
    userConnections[visit_id] = [];
  userConnections[visit_id].push(socket.id);
  socket.on('disconnect', function () {
    var vid = socket.cookies.vid;
    if (userConnections[vid]) {
        var index = userConnections[vid].indexOf(socket.id);
        if (index != -1)
            userConnections[vid].splice(index, 1);
        if (userConnections[vid].length === 0) {
            delete userConnections[vid];
            //All tabs have been closed
        }
    }
  });
});

最新更新