如何为Pusher用户执行空闲状态？

Question

典型的聊天应用。使用状态通道来告知谁在线，但是寻找一种优雅的方式在存在通道中用空闲标记标记用户。

Answer 1

对此的完整解决方案可能相当复杂，并且还取决于运行时 - 我将假设Web Web客户端。

最终你需要一种做两件事的方法：

1. 将用户检测为“空闲”
2. 向所有其他用户发出有关该用户为idel
的信号

检测用户是否空闲

• window.onblur因此您知道您的应用窗口不再关注
• mousemove跟踪以确定用户是否在您的应用程序中实际执行任何操作。

为了实现这一点，您可能只想要超时，并且只有在超时触发时才发送事件以指示用户处于空闲状态：

var timeout = null;

function sendUserIdle() {
  // see part 2
}

function resetIdleTracking() {
  if( timeout !== null ) {
    // reset
    clearTimeout( timeout );
  }
  timeout = setTimeout( sendUserIdle, 3*60*1000 ); // 3 minutes
}

window.addEventListener( 'mousemove', resetIdleTracking );

向其他用户发出有关空闲用户的信息

Pusher在线频道的缺失功能IMO能够更新在线状态信息。所以，你需要另一种方法来实现这一目标。我认为你有两个解决方案：

1. 在状态通道上启用客户端事件，并在代码检测到用户空闲时从空闲用户触发事件。
2. 从空闲客户端向服务器发送消息。然后，服务器会触发一条消息，告知用户该用户处于空闲状态。

请参阅：accessing channel members。

1。使用客户端事件

function sendUserIdle() {
  var channel = pusher.channel( 'presence-<your-channel>' );
  // client events have to have a 'client-' prefix
  channel.trigger( 'client-user-idle', channel.members.me );
}

2。发送到服务器

function sendUserIdle() {
  makeAjaxRequest( '/idle-notification-endpoint', channel.members.me );
}

注意：您可以使用channel.members.me 序列化JSON.stringify( channel.members.me )

在服务器上（伪代码）：

userInfo = getUserInfoFromRequest();
pusher.trigger( 'presence-<your-channel>', 'user-idle', userInfo );

显示客户端空闲

收到事件后，您将相应地更新用户UI列表（将该用户标记为空闲）。

channel.bind( 'user-idle', function( user ) {
  var uniqueUserId = user.id;

  // update UI
}