Показать статус подключения подключенного пользователя с помощью Websocket и Pusher

Я впервые создаю веб-приложение для чата с помощью Pusher. Я много читал в документации Pusher, чтобы узнать, как она работает. Мой вопрос больше о механизме, а не о коде.

Так что я хочу сделать, когда пользователь подключается и присоединяется к presence-channel что позволяет мне показать, кто в сети. Я хочу отобразить знак состояния (зеленый = онлайн, желтый = нет) для пользователя (например, Skype), и все зарегистрированные пользователи могут видеть изменение статуса в режиме реального времени.

я видел этот вопрос и если я понимаю, каждый пользователь должен присоединиться к частному каналу, чтобы лучше управлять своим клиентским событием. Так как же мне управлять изменяющимся статусным событием для private-channel и показать это в presence-channel или как я могу установить связь между двумя каналами?

2

Решение

Вам не нужен отдельный канал для создания статуса пользователя.

Лучший способ добиться этого сейчас — это определить статус пользователя, используя что-то вроде idle.js а затем вызвать событие на канале присутствия (возможно, client-status-updated) с информацией о статусе пользователя (например, {"user_id":SOME_ID, "status":"away"}).

Примечание: для клиентских событий client- префикс необходим для имени события

Вы можете сделать это используя клиентские события и это может быть сделано на существующих существующих каналах присутствия. Однако вы должны знать, что с помощью клиентских событий это означает, что любой прошедший проверку пользователь может потенциально вызвать событие состояния и предложить его для другого пользователя. Таким образом, было бы более безопасно сделать это через сервер, который может установить четность, исходящую от пользователя, статус которого устанавливается.

Тем не менее, я не вижу преимущества «взлома» для установки статуса другого пользователя.

Вот пример использования канала присутствия и клиентских событий.

<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>
3

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]