[플러터 오픈소스-채팅7] 프로젝트 구조 파악하기

1- https://explsoratory.tistory.com/16

2-https://explsoratory.tistory.com/17

3-https://explsoratory.tistory.com/18

4-https://explsoratory.tistory.com/19

5-https://explsoratory.tistory.com/20

6-https://explsoratory.tistory.com/21

7-https://explsoratory.tistory.com/22

 

드디어 마지막인 chat으로 넘어왔다.

우선 우리모두가 대~충 알듯이 무튼 채팅관련 페이지인건 확실하다.

그럼 뭐가 어떻게 진행되는지 한번 자세히 들어가보자.

 

chat_page.dart + chat_provider.dart

chat_page.dart 해당페이지는 우리가 채팅하려는 상대방의 이름(목록에서)을 눌렀을때 열리는 화면. 즉 채팅방 이다.

chat_provider.dart는 실제 파이어베이스를 부르는 로직들을 이곳에 넣은 것이다.

 

따라서 해당 채팅방 스크린과 그 로직은 이렇게 2개의 파일에 나눠져있고, chat_page.dart에서 필요할때 chat_provider.dart로직을 부르는 식으로 구성되어있다. 

설명은 chat_page.dart를 중심으로 이어가며 흐름에 따라 chat_provider에서 사용되는 로직들을 함께 설명한다.

 

[ initstate() ]

일단 initstate함수를 보자. 

이안에서는 일단 lsitner들을 넣어주는데, 이건 뭐 대충 관련 이벤트들을 넣어준다고 생각하면된다.

그다음 readlocal이 중요한데, 이안에서 현재 사용자의 현재 채팅상대를 데이터베이스에 업데이트하고.

또 그룹아이디를 생성한다. 그룹아이디는 ...

 

1.readLocal

우선 우리는 홈페이지에서 유저목록이 떴었고, 거기서 유저목록을 정해야만 채팅방으로 넘어갔다.

두사람이 대화한 내용을 도대체 어떻게 찾는거지???? 라는 생각이 들수도있다. 왜냐면 디비자체에서보면 각 유저마다 -chattingWith라는 필드가 있지만, 그건 가장 최근에 대화한사람 아이디일 뿐이니까.

내가 과거에 대화한 다른 사람들과의 대화는 어떻게되나?

 

답은 간단하다.

메세지 컬렉션에서 내가 누른 상대방의 아이디와  나의 아이디 조합을 찾는거다.

내아이디-상대방아이디

또는

상대방아디디-내아이디

해당 아이디가 나오는 로직은 사전식으로 누구 아이디가 더 먼저오는지 체크.  

내아이디:  짱

상대방아디기: 김

일 경우에 항상 우리가 만든 채팅방은 김-짱 일 것이다.  짱-김 이 생성될 이유도없으므로 늘 같은 대화목록을 가지고 오게된다.

 

 

 

chat_page.dart

 

 

[ build() ]

이제 다음으로 초기화 후 (그룹아이디생성후) 어떻게 채팅이 디스플레이되는지 알아보자.

chat_page.dart의 build 함수를 보자

아래 3가지의 함수가 주로 스크린을 구성하고있다. 하나씩 보자.

 

1.buildListMessage()

3.조건 + buildStickers()

2.buildinput()

 

 

1.buildListMessage() -> getChatStream -> buildItemList()

 

을 통해서 현재 채팅방의 아이디를 잡아서 그 안에있는 컨텐츠들을 읽어온다. 

디비로 넘어가서 보면, 메시지 컬렉션(=빨간색 네모)안에 메세지 (말풍선)들 (=분홍색 네모)  이 하나의 문서처럼 저장되어있는게 보인다.

그러니까 내가 

나: 안녕

상대방: 안녕?

이 말풍선 마다 디비에 저장된다는거고, 이걸 해당 함수에서 읽어와서 뿌려준다는 뜻이다.

chat_provider.dart

코드를 보면 딱 메세지 컬렉션에서 읽어오는게 보인다.  여기서 limit이란건! 

자 우리가 1년동안 누군가와 메세지를 했다면 그 메세지양이 엄청날꺼다. 한번에 다읽어오면 낭비니,  제한을 둬서 최신 몇개만 읽어서 보여주는거다.  스크롤을 사용자가 올리면 그 액션에 맞게 더 오래된 메세지들을 읽어오는거고..

 

근데 다시 보면 내가 분명 'buildListMessage() -> getChatStream-> buildItemList()' 라고 적었다.

getChatSteam에서 메세지를 읽어오면, 그 메세지를 구성 , 만들어주는 애가 buildItemList다 .

그 함수를 가서 살펴보면 엄청긴데, 딱히 내용은 복잡하지 않다.

말풍선이 이미지였으면 -> 이미지로 보여주는거고

텍스트면 -> 텍스트

이모티콘-> 이모티콘 이다.

chat_page.dart

.. 생략

chat_page.dart

 

이렇게 진행된다.

 

2.buildinput()

2번째는 build input먼저 보겠다.

이름만 보면뭐, 인풋되는 애들을 만든느 곳같은데. 우리 스크린으로 치자면 분홍색 네모부분이다. 

왼쪽부터 순서에따라

1.이모티콘첨부버튼

2,사진첨부버튼

3.텍스트 쓰는 곳

4.보내기버튼 이다. 

 

 

1.사진첨부버튼: 이미지 아이콘을 누르면 이미지를 넣고, ---> 사진첨부

2.이모티콘첨부버튼: 스티커 아이콘을 누르면 _getSticker라는 함수를 통해 isShowSticker라는 애의 값을 바꿔주고있다. (참 혹은 거짓) -->스티커 창보여주기

 

또 아래로 내려가면 바로  텍스트 메세지를 보내는 코드가 들어있는데,

3.텍스트 쓰는 곳

chat_page.dart

 

 

코드를 보다시피, 텍스트를 쓰면 (텍스트필드) onSendMessage를 통해 메세지를 보내는데. 바로 이 onsendmessage가 최종적으로 보내는 아이가 chat_provider.dart - sendmessage이다. 

잠깐 코드를 보자면, 당연히 말풍선(메세지)를 디비에 저장해야하므로  디비에 저장하고있다. 

chat_provider.dart

 

 

 

3.조건(=isShowSticker) + buildStickers()

마지막으로.. buildsticker부분이다.

이름부터 알수있듯이 스티커를 띄우는 부분이다. 그리고 방금 2번에서 봤듯이 이 스티커 목록은 스티커 아이콘을 누르면 그 값이 참으로 바뀌어서 스티커목록이 뜨는 걸 알수있다. 

근데 옆에 '조건'이라는걸 내가 붙여놨는데, 2번에서 확인했듯이 스티커 아이콘을 누르면 해당 스티커 목록을 보여줘야해서.

그 행동 '스티커 아이콘'을 누르는 행동을   감지하는애가 바로 조건이다. 

 

 

그럼 여기서 채팅시리지를 마무리한다 :)