Question

我使用Pusher API打开了websocket，每当新用户订阅或取消订阅该频道时，我在登录控制台时都会成功更新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();
});

Answer 2

这可能是innerHTML在这种类型下不酷的问题......作为一个肮脏的黑客，直到我找到正确的答案，尝试：

document.getElementById('userCount').innerHTML = "" + userCount;

在API事件上更新innerHTML

2 个答案: