pusher - 如何为 Pusher 用户设置空闲状态？

Question

典型的聊天应用。使用存在 channel 来判断谁在线，但正在寻找一种优雅的方式来使用空闲标志在存在 channel 中标记用户。

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 存在 channel IMO 缺少的功能是更新存在信息的能力。因此，您需要另一种方法来实现这一目标。我认为您有两种解决方案:

1. 在状态 channel 上启用客户端事件，并在您的代码检测到用户闲置时触发闲置用户的事件。
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 );
}

注意:您可以使用 JSON.stringify( channel.members.me )

序列化 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
}