Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기

휴고

추천 수 202

Realtime Database 에는 사용자의 접속상태가 바뀔 때마다 데이터가 변경이 되는 특수한 위치가 있습니다. '/.info/connected' 위치입니다. 해당 위치를 활용하여 접속이 되면 유저리스트 화면에서 접속하였음을 표시해주는 기능을 구현해 보겠습니다.

접속을 하거나 접속을 끊게 되면 UsersConnection 위치에 데이터를 입력하는 코드를 작성하겠습니다. 아래의 코드를 작성해 주세요.

<script>
          /**
           *  로그인 후 세팅
           */
          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);
                  }
              });
          }

view raw index.html hosted with ❤ by GitHub

로그인 후 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 위치의 데이터 변경을 감지하여 유저리스트 화면에 표시하는 코드를 작성해보겠습니다.

<script>
          /**
           *  첫번째 탭 유저리스트 호출
           */
          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));
          }

view raw index.html hosted with ❤ by GitHub

우선 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를 이용한 채팅기능 구현 - 접속 중이

출처: http://cionman.tistory.com/62 [Suwoni-Codelab]

< Prev Firebase Web 채팅앱 만들기 - Storage를 이용한 파일 전송기능

Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능 Next >

♥

	<script>
	/**
	* 로그인 후 세팅
	*/
	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);
	}
	});
	}

	<script>
	/**
	* 첫번째 탭 유저리스트 호출
	*/
	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));
	}