본문 바로가기
CodeLab/Firebase

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

by 블리드카가 2017. 12. 4.
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





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

 



728x90