我第一次使用 Pusher 构建聊天室 Web 应用程序。我阅读了很多 Pusher 的文档来了解它是如何工作的。我的问题更多是关于机制而不是代码。
所以我想做的是,当用户连接并加入presence-channel
这使我可以显示谁在线。我想为用户(如Skype)显示一个状态标志(绿色=在线,黄色=离开),并且所有登录的用户都可以实时看到状态之间的变化。
我见过这个问题 https://stackoverflow.com/questions/27375125/pusher-one-to-one-chat-structure如果我理解的话,每个用户都必须加入私人频道才能更好地管理其客户端事件。那么我如何管理更改状态事件private-channel
并显示在presence-channel
或者我如何在两个渠道之间进行通信?
您不需要单独的渠道来建立用户状态。
现在实现这一目标的最佳方法是使用类似的方法来检测用户状态idle.js https://github.com/shawnmclean/Idle.js然后在存在通道上触发一个事件(也许client-status-updated
)以及有关用户状态的信息(例如{"user_id":SOME_ID, "status":"away"}
).
注意:对于客户端事件client-
事件名称需要前缀
您可以使用以下方法执行此操作客户活动 https://pusher.com/docs/client_events这可以在现有的存在渠道上完成。但是,您应该意识到,通过使用客户端事件,这意味着任何经过身份验证的用户都可能触发状态事件,并表明该事件完全适用于另一个用户。因此,通过可以设置状态的服务器来执行此操作会更安全,即使它来自正在设置状态的用户。
但是,我并没有真正看到“黑客”设置其他用户状态的好处。
以下是使用状态通道和客户端事件的示例。
<script src="libs/idle.js"></script>
<script src="//js.pusher.com/2.2/pusher.min.js"></script>
<script>
var pusher = new Pusher(APP_KEY);
var presence = pusher.subscribe('presence-online');
// Basic online/offline
presence.bind('pusher:subscription_succeeded', function(members) {
members.each(addUser);
});
presence.bind('pusher:member_added', addUser);
presence.bind('pusher:member_removed' removeUser);
function addUser(member) {
// Online - add to UI
}
function removeUser(member) {
// Offline - remove from UI
// Consider doing this in a setTimeout
// in case the user comes back online again
}
// User state
var idle = new Idle({
onHidden: function() { sendUserStatus('hidden'); },
onVisible: function() { sendUserStatus('visible'); },
onAway: function() { sendUserStatus('away'); },
onAwayBack: function() { sendUserStatus('hidden'); },
awayTimeout: 30000 //away with 30 seconds of inactivity
}).start();
function sendUserStatus(status) {
var userStatusUpdate = {
"user_id": presence.members.me.id, // current user unique ID
"status": status
};
presence.trigger('client-status-updated', userStatusUpdate);
}
presence.bind('client-status-updated', function(update) {
var userId = update.user_id;
var status = user.status;
// Update UI to reflect user status
});
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)