본문 바로가기
CodeLab/Firebase

Firebase Web 채팅앱 만들기 - Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅

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





카카오톡을 보면 유저리스트 화면을 터치하면 프로필 화면이 나오고 1:1 채팅 버튼을 눌러야 채팅방 화면이 나옵니다만, 예제에서는 곧바로 1:1 채팅 화면으로 진입하는 코드를 작성하겠습니다.

일단 먼저 유저리스트 화면에서 유저를 클릭하면 채팅방을 오픈하는 코드를 작성하겠습니다. 아래의 코드를 추가 또는 수정해주세요.




유저리스트 데이터를 받아 화면을 그리는 getUserList 메소드에서 화면을 그리고 난 뒤 유저별로 클릭 이벤트를 바인딩 하는 코드를 입력하였습니다. 그리고 클릭시 수행되는 코드는 onUserListClick 메소드 입니다.  onUserListClick 메소드는 아직까지는 단순하게 숨겨져있던 백버튼과 친구 초대버튼을 보이게 하고 openChatRoom메소드를 통해서  채팅방 화면을 보이게 하는 역할을 수행합니다. 채팅방 화면은 앱에서 보이는 탭은 3개 뿐이나 보이지 않는 4번째 탭 영역에 메세지를 볼수 있는 채팅방 화면을 숨겨두었습니다. 숨겨져있는 4번째 탭을 클릭 함으로써 채팅방 화면을 노출시킵니다.  isOpenRoom 변수는 방이 오픈된 상태인지 아닌지 구분하는 변수 입니다. 추후에 상단 타이틀을 갱신할 때 이 값을 이용하게 될 것입니다.

채팅방 화면이 오픈 되는 것까지 코드를 작성하였습니다. 이제는 메세지를 불러오겠습니다. 아래의 코드를 추가 또는 수정해주세요.




유저리스트를 클릭하는 시점에서 방 ID 값을 생성합니다. init메소드에서 새롭게 추가한 MAKEID_CHAR, DATETIME_CHAR 상수는 방 ID 값을 생성할때 구분자로 사용하기 위한 상수입니다. Firebase Realtime Database의 특성상 여러 항목의 조건을 한꺼번에 조회하기 어려운 경우에는 여러 항목의 값을 하나의 값으로 구분자를 중간에 두고 값을 조합해 저장하기도 합니다. 현재 방 ID 는 구분자를 앞에 두고 방을 생성한사람의 UID와 생성한 시점의 날짜시간값의 조합으로 되어 있습니다.

방 ID(roomId) 값이외에 유저리스트를 클릭하는 시점에서 방의 참여 인원의 ID(roomUserList), 방의 참여인원 이름(roomUserName), 방제목(roomTitle)값이 함께 세팅 됩니다. 

이런 방의 기본 정보가 세팅이 되고 채팅방을 openChatRoom메소드에서 열게 됩니다. openChatRoom메소드에서 화면 상단 제목을 바꾸고, 메세지를 읽어드리며, 방이 open 되어있는지 상태값을 저장할 변수에 true 값을 할당하게 됩니다. 

실질적으로 메세지를 읽어오는 loadMessageList메소드는 limitToLast 메소드를 통해서 Messages 아래 방ID 아래 하위 50개의 데이터만 데이터를 불러옵니다. 'child_added' 이벤트는 처음은 기존 데이터를 불러오고 그 다음부터는 새롭게 추가된 데이터가 있을 경우에만 데이터를 수신하는 이벤트 입니다.

timestampToTime 메소드는 FirebaseChat클래스에 static 형태로 선언된 메세지의 timestamp 형태의 입력 시간을 우리가 읽을 수 있는 일반적인 날짜 시간 형태로 변환하는 유틸 메소드입니다.

데이터를 불러와 화면을 그리게되는 방식은 앞서 유저리스트를 그렸던 방식과 같이 underscore template메소드를 활용하게 됩니다.



챕터 완성 소스  :



  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