Показать статус входа в подключаемый пользователь с помощью Websocket и Pusher

Question

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

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

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

Answer 1

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

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

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

Вы можете сделать это с помощью 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>