본문 바로가기
CodeLab/Firebase

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

by 블리드카가 2017. 12. 4.
728x90





이제 1대 1대화 뿐만 아니라 여러명이 한꺼번에 채팅을 나눌 수있는 채팅방 초대 기능을 만들어 보겠습니다. 

우선 채팅방 우측 상단에 '+' 모양의 버튼이 있습니다. 해당 버튼을 누르면 초대할 수 있는 인원들이 보여지는 팝업 모달 창을 띄우도록 하겠습니다. 

현재 상태에서도 초대버튼을 누르면 팝업 모달창이 뜨게 됩니다.  Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가  포함되어 있는 상태입니다.




이제는 모달 창을 채울 유저리스트를 모달창으로 가지고 오겠습니다. 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고,  숨겨두었던 체크버튼을 보이도록 하겠습니다. 




openChatRoom메소드에 setAddUserList 메소드를 실행하는 코드를 추가합니다. 

setAddUserList메소드를 살펴보겠습니다. forEach는 자바스크립트 배열을 순회하는 메소드입니다.
arrAddUserList.forEach(cbArrayForEach.bind(this));
배열을 순회하면서 방에 속한 유저가 아닐 경우 숨겨져있던 체크표시 엘리먼트를 숨김을 해제하고,  클릭시 체크색깔에 변화를 주게 합니다. 방에 속한 유저일 경우 해당 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);
  }


다음은 모달창에서 모달창 아래 추가 버튼을 클릭했을 시 체크된 인원을 초대하는 프로세스를 추가하겠습니다.

아래 코드를 수정 또는 추가해주세요.




추가 버튼을 누르면 onConfirmInviteClick 메소드가 실행 됩니다. onConfirmInviteClick 메소드를 살펴보면, 'blue-text' 클래스가 포함된,선택표시인 파란색 글자인 유저들을 찾아서 배열을 만든 후 해당 배열의 인원들을 Realtime Database 의 RoomUsers 위치에 데이터를 저장하고, 현재 방인원과 방인원의 이름 변수에 추가합니다. 그리고 마지막으로 초대 메세지를 발송합니다. 

초대 메세지 발송을 위해서 saveMessages메소드에 파라미터가 추가되고, 메세지 변수에 데이터를 대입하는 부분이 조금 변경되었습니다.

이제 여러명의 인원과 대화를 해보세요.


챕터 완성 소스  :




  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