javascript - 更新API事件的innerHTML

Question

我使用 Pusher API 打开了一个 Websocket，每当新用户订阅或取消订阅该 channel 时，当我在控制台中 checkin 时，它就会成功更新 members.count 变量。

但是，innerHTML 仅在加载时显示。 尚未更新。

  var presenceChannel = pusher.subscribe('presence-channel')
  var userCount

  presenceChannel.bind('pusher:subscription_succeeded', function(members){
      userCount = members.count;
      document.getElementById('userCount').innerHTML = userCount;
  });

html

<h1 id="userCount">X</h1>

我错过了什么？

Answer 1

我以前没有使用过 Pusher，但快速浏览一下文档意味着 pusher:subscription_succeeded 仅触发一次......具有讽刺意味的是，当 subscribe() 成功时。我认为您需要 pusher:member_added 和 pusher:member_removed 在成员来和离开时使用。

我会创建一个方法来处理这一切:

var presenceChannel = pusher.subscribe('presence-channel');

function updateUserCount() {
  document.getElementById('userCount').innerHTML = presenceChannel.members.count;
}

presenceChannel.bind('pusher:subscription_succeeded', function(members) {
  updateUserCount();
});
presenceChannel.bind('pusher:member_added', function(member) {
  updateUserCount();
});
presenceChannel.bind('pusher:member_removed', function(member) {
  updateUserCount();
});