在 API 事件上更新 innerHTML答案

【问题标题】：Updating innerHTML on API event在 API 事件上更新 innerHTML
【发布时间】：2015-02-27 23:49:05
【问题描述】：

我有一个使用 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>

我错过了什么？

【问题讨论】：

你能显示一个 HTML sn-p 吗？可能是您想使用.val() 而不是.innerHTML。
谢谢！您是否尝试过中断userCount = members.count; 行以确保它被击中？
不，什么是破坏，我该如何尝试？ @phoenixblade9
@propster 使用浏览器开发工具在该行代码上设置“断点”，或者在其上方添加console.log('here') 并查看该消息是否出现在控制台中
看看这里如何在firefox中设置断点：developer.mozilla.org/en-US/docs/Tools/Debugger

标签： javascript dom innerhtml pusher

【解决方案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();
});

【讨论】：

这行得通。 Pusher 应该简化功能。
对我来说似乎很简单。 subscription_succeeded 表示您已成功连接到套接字。理想情况下，在订阅成功建立之前，您甚至不会绑定成员添加/删除事件。

【解决方案2】：

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

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

【讨论】：