728x90
Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다. '/.info/connected' 위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해 보겠습니다.
접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드를 작성하겠습니다. 아래의 코드를 작성해 주세요.
로그인 후 checkOnline 메소드가 실행됩니다. 접속을 하게 되면 앞서 언급한 '/.info/connected' 위치에 true 값이 입력됩니다. 아래의 코드는 '/.info/connected' 위치의 데이터 변화를 감지하여, true 값이 들어왔는지 확인한 후 UsersConnection 아래 자신의 UID값 아래 true 값을 입력합니다.
var connectedRef = this.database.ref('.info/connected');
connectedRef.on('value', function(snap) {
if (snap.val() === true) {
myConnectionsRef.set(true);
... (생략)
}
});
접속을 한 후에 데이터 입력은 하는건 클라이언트 코드가 실행을 하게되어 값을 입력하면 되지만, 브라우저를 꺼버리면 코드가 실행이 안되는데 어떻게 데이터를 입력을 할까요? Realtime Database 에서는 onDisconnect라는 메소드를 제공합니다. 접속이 끊겼을 때 true값을 입력했던 위치에 false를 입력하고, lastOnline필드에는 서버시간을 기록합니다.
myConnectionsRef.onDisconnect().set(false);
lastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
이제 접속 기록을 저장하는 코드는 완료되었고, UsersConnection 위치의 데이터 변경을 감지하여 유저리스트 화면에 표시하는 코드를 작성해보겠습니다.
우선 loadUserList 메소드를 수정합니다. userList가 load가 완료되면 loadOnlineStatus 메소드를 호출합니다.
var cbCompleteUserList = function(){
this.loadOnlineStatus();
}
userRef.orderByChild("userName")
.once('value', this.getUserList.bind(this))
.then(cbCompleteUserList.bind(this));
loadOnlineStatus메소드는 UsersConnection 위치에 데이터 변경을 감지해서 새롭게 추가되거나 변경되었을 시에 데이터를 확인하여 접속여부 아이콘을 노출시키거나 숨기는 역할을 합니다.
챕터 완성 소스 :
10.Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기.zip
728x90
