- Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다.
/.info/connected위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해봅니다.
1. 코드 작성
1.1 접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드
- Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태
/**
* 로그인 후 세팅
*/
FirebaseChat.prototype.setLogin = function(user){ //user 파라미터 추가
//...생략
this.checkOnline();
}
/**
* 온라인 여부 체크 하기 위한 데이터 입력
*/
FirebaseChat.prototype.checkOnline = function(){
var userUid = this.auth.currentUser.uid;
var myConnectionsRef = this.database.ref('UsersConnection/'+userUid+'/connection');
var lastOnlineRef = this.database.ref('UsersConnection/'+userUid+'/lastOnline');
var connectedRef = this.database.ref('.info/connected');
connectedRef.on('value', function(snap) {
if (snap.val() === true) {
myConnectionsRef.set(true);
// 연결 단절 이벤트
myConnectionsRef.onDisconnect().set(false);
lastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
}
});
}
- 코드 설명 :
- 로그인 후 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);
1.2 UsersConnection 위치의 데이터 변경을 감지하여 유저리스트 화면에 표시하는 코드
/**
* 첫번째 탭 유저리스트 호출
*/
FirebaseChat.prototype.loadUserList = function(){
//...생략
var cbCompleteUserList = function(){
this.loadOnlineStatus();
}
userRef.orderByChild("userName")
.once('value', this.getUserList.bind(this))
.then(cbCompleteUserList.bind(this));
}
/**
* 유저의 온라인 여부 감지하여 유저리스트에 표시 해주는 기능
*/
FirebaseChat.prototype.loadOnlineStatus = function(){
var usersConnectionRef = this.database.ref('UsersConnection');
usersConnectionRef.off();
var cbUserConnection = function(data){
var connKey =data.key;
var connValue = data.val();
var onlineIcon = document.querySelector('#li' + connKey+' .mood');
if(onlineIcon != null){
if(connValue.connection === true){
onlineIcon.classList.remove('hiddendiv');
}else{
onlineIcon.classList.add('hiddendiv');
}
}
}
usersConnectionRef.on('child_added', cbUserConnection.bind(this));
usersConnectionRef.on('child_changed', cbUserConnection.bind(this));
}
- 코드 설명 :
- userList가 load가 완료되면 loadOnlineStatus 메소드를 호출 ```javascript var cbCompleteUserList = function(){ this.loadOnlineStatus(); } userRef.orderByChild(“userName”) .once(‘value’, this.getUserList.bind(this)) .then(cbCompleteUserList.bind(this));
```
- loadOnlineStatus메소드는 UsersConnection 위치에 데이터 변경을 감지해서 새롭게 추가되거나 변경되었을 시에 데이터를 확인하여 접속여부 아이콘을 노출시키거나 숨기는 역할