이제 1대 1대화 뿐만 아니라 여러명이 한꺼번에 채팅을 나눌 수있는 채팅방 초대 기능을 만들어 보겠습니다.
우선 채팅방 우측 상단에 '+' 모양의 버튼이 있습니다. 해당 버튼을 누르면 초대할 수 있는 인원들이 보여지는 팝업 모달 창을 띄우도록 하겠습니다.
현재 상태에서도 초대버튼을 누르면 팝업 모달창이 뜨게 됩니다. Git을 통해 소스를 다운 받으시면 맨처음에 초대 버튼을 누르면 모달창이 뜨는 코드가 포함되어 있는 상태입니다.
| <script> |
| /** |
| * Dom 로딩 후 동작 |
| */ |
| document.addEventListener('DOMContentLoaded', function() { |
| //FirebaseChat 클래스 초기화 |
| window.fbChat = new FirebaseChat(); |
| |
| //다운로드 프로그레스 팝업 modal 설정 |
| $('#dnModal').modal(); |
| //채팅방 초대 modal 설정 |
| $('#dvAddUser').modal(); |
| }); |
이제는 모달 창을 채울 유저리스트를 모달창으로 가지고 오겠습니다. 유저리스트는 앱 첫화면 유저리스트의 Dom을 그대로 가지고 와서 채팅방 안에 속한 인원을 제외 시키고, 숨겨두었던 체크버튼을 보이도록 하겠습니다.
| <script> |
| /** |
| * 초기 필드 변수 할당 |
| */ |
| 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)); |
| } |
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);
}
다음은 모달창에서 모달창 아래 추가 버튼을 클릭했을 시 체크된 인원을 초대하는 프로세스를 추가하겠습니다.
아래 코드를 수정 또는 추가해주세요.
| <script> |
| /** |
| * 초기 필드 변수 할당 |
| */ |
| 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메소드에 파라미터가 추가되고, 메세지 변수에 데이터를 대입하는 부분이 조금 변경되었습니다.
이제 여러명의 인원과 대화를 해보세요.
챕터 완성 소스 :
출처: http://cionman.tistory.com/61 [Suwoni-Codelab]
9.Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대