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

1. 코드 작성

1.1 초대할 수 있는 인원이 보여지는 팝업 모달창

  • Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태
         /**
            * Dom 로딩 후 동작
            */
           document.addEventListener('DOMContentLoaded', function() {
               //FirebaseChat 클래스 초기화
               window.fbChat = new FirebaseChat();
    
               //다운로드 프로그레스 팝업 modal 설정
               $('#dnModal').modal();
               //채팅방 초대 modal 설정
               $('#dvAddUser').modal();
           });

1.2 팝업 모달 창을 채울 유저리스트 추가

          /**
           * 초기 필드 변수 할당
           */
          FirebaseChat.prototype.init = function(){
              // ...생략
              this.ulAddUserList = document.getElementById('ulAddUserList');
          }

          /**
           * 챗방 오픈 , 메세지 로드 및 AddUserList
           */
          FirebaseChat.prototype.openChatRoom = function(roomId, roomTitle){ // 파라미터 추가
              //...생략
              this.setAddUserList();
          }

          /**
           * 유저 초대 팝업 모달 창 셋팅
           */
          FirebaseChat.prototype.setAddUserList = function(){
            this.ulAddUserList.innerHTML =  this.ulUserList.innerHTML
            var arrAddUserList = Array.prototype.slice.call(this.ulAddUserList.getElementsByTagName('li'));
            var cbArrayForEach = function(item){
                var itemUserUid = item.getAttribute('data-targetUserUid');
                if(this.roomUserlist.indexOf(itemUserUid) === -1){
                    item.getElementsByClassName('done')[0].classList.remove('hiddendiv');
                    item.addEventListener('click',function(){
                        if(Array.prototype.slice.call(this.classList).indexOf('blue-text') == -1){
                            this.classList.add('blue-text');
                        }else{
                            this.classList.remove('blue-text');
                        }
                    });
                }else{
                    item.parentNode.removeChild(item);
                }

            }
            arrAddUserList.forEach(cbArrayForEach.bind(this));
          }
  • 코드 설명 :
    • 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 함
    • openChatRoom메소드에 setAddUserList 메소드를 실행하는 코드를 추가
    • setAddUserList메소드 내부의 foreach메소드는 배열을 순회하는 메소드
    • 배열을 순회하면서 방에 속한 유저가 아닐 경우 숨겨져있던 체크표시 엘리먼트를 숨김을 해제하고, 클릭시 체크색깔에 변화를 주게 합니다. 방에 속한 유저일 경우 해당 child 를 제거 하는 코드
      var cbArrayForEach = function(item){
      var itemUserUid = item.getAttribute('data-targetUserUid');
      if(this.roomUserlist.indexOf(itemUserUid) === -1){
                item.getElementsByClassName('done')[0].classList.remove('hiddendiv');
                item.addEventListener('click',function(){
                    if(Array.prototype.slice.call(this.classList).indexOf('blue-text') == -1){
                        this.classList.add('blue-text');
                    }else{
                        this.classList.remove('blue-text');
                    }
                });
       }else{
                item.parentNode.removeChild(item);
        }
        
    

1.3 모달창에서 모달창 아래 추가 버튼을 클릭했을 시 체크된 인원을 초대하는 프로세스 추가

          /**
           * 초기 필드 변수 할당
           */
          FirebaseChat.prototype.init = function(){
              //...생략 
              this.aConfirmInvite =document.getElementById('aConfirmInvite');
          }

          /**
           * 초기 이벤트 바인딩
           */
          FirebaseChat.prototype.initEvent = function(){
              //...생략
              this.aConfirmInvite.addEventListener('click', this.onConfirmInviteClick.bind(this));
          }

          /**
           * 초대
           */
          FirebaseChat.prototype.onConfirmInviteClick = function(){
              var arrInviteUserList = Array.prototype.slice.call(this.ulAddUserList.getElementsByClassName('blue-text'));
              var arrInviteUserListLength = arrInviteUserList.length;
              var arrInviteUserName = [];
              var updates = {};
              for(var i=0; i < arrInviteUserListLength; i++){
                  var inviteUserUid = arrInviteUserList[i].getAttribute('data-targetUserUid');
                  var inviteUserName = arrInviteUserList[i].getAttribute('data-username') + '님';
                  updates['RoomUsers/'+ this.roomId +'/'+ inviteUserUid] = true;
                  arrInviteUserList[i].outerHTML = '';
                  this.roomUserlist.push(inviteUserUid);
                  this.roomUserName.push(inviteUserName);
                  arrInviteUserName.push(inviteUserName);
              }
              this.roomUserlist.sort();
              this.database.ref().update(updates);

              //초대 메세지
              this.saveMessages(arrInviteUserName.join() + '이 초대되었습니다.');
          }

          /**
           * 메세지 전송
           */
          FirebaseChat.prototype.saveMessages = function(inviteMessage){ //파라미터 추가
              var user = this.auth.currentUser;
              var msg = inviteMessage ? inviteMessage : this.dvInputChat.innerHTML.trim();

              //...생략

          }
  • 코드 설명 :
    • 추가 버튼을 누르면 onConfirmInviteClick 메소드가 실행.
    • onConfirmInviteClick 메소드를 살펴보면, ‘blue-text’ 클래스가 포함된,선택표시인 파란색 글자인 유저들을 찾아서 배열을 만든 후 해당 배열의 인원들을 Realtime Database 의 RoomUsers 위치에 데이터를 저장하고, 현재 방인원과 방인원의 이름 변수에 추가합니다. 그리고 마지막으로 초대 메세지를 발송합니다.
    • 초대 메세지 발송을 위해서 saveMessages메소드에 파라미터가 추가되고, 메세지 변수에 데이터를 대입하는 부분이 조금 변경되었습니다.
    • 작성완료

챕터완성소스 : 11. Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능