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

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를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기.zip

예제 소개 Firebase 설정하기 Hosting을 활용한 프로젝트 준비 작업 Authentication을 이용한 유저 가입 및 로그인 구현하기 Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조 Realtime Database를 이용한 채팅기능 구현 - 유저데이터 저장하기 Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면 Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅 Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능 Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능 Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기 Storage를 이용한 파일 전송기능 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보 저장 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Functions를 통한 FCM 발송 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Service worker를 이용한 FCM수신 Realtime Database 권한 설정