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메소드를 활용하게 됩니다.
챕터 완성 소스 :
6.Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅.zip728x90
