在 API 事件上更新 innerHTML

Question

我用 Pusher 打开了一个 websocket API，每当有新用户订阅或取消订阅频道时，它都会在我检查控制台时成功更新 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

这可能是 innerHTML 对这种类型不友好的问题...在我找到正确答案之前作为一个肮脏的 hack，试试：

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

Answer 2

我以前没有使用过推送器，但快速浏览一下文档表明 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();
});

在 API 事件上更新 innerHTML

Updating innerHTML on API event

javascript

dom

innerhtml

pusher