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

Question

典型的聊天应用.使用状态通道来告知谁在线,但寻找一种优雅的方式来在具有空闲标志的在线通道中标记用户.

Answer 1

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

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

1. 将用户检测为"空闲"
2. 向所有其他用户发出有关该用户的信息

检测用户是否空闲

• 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. 从空闲客户端向服务器发送消息.然后,服务器触发一条消息,告诉用户该用户处于空闲状态.

请参阅:访问渠道成员.

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
}