파이어베이스 채팅방 질문

[이형민]

채팅방 고도화를 시키다가 궁금한 점이 있어서 질문 남깁니다.

1. 새로 전송된 채팅 내용에 맞추어 자동으로 스크롤이 내려가지 않고, 제가 내려야 볼 수 있는데 메세지 전송 시 자동으로 스크롤이 내려가게 하려면 어떻게 해야 하나요?

2. 채팅방에 메세지를 입력하고 전송해도 입력창에는 여전히 메세지가 남아있는데 해당 부분은 어떻게 해야 전송과 동시에 메세지가 입력창에서 사라지나요?

3. 채팅 전송 방법을 클릭 뿐 아니라, 엔터를 치는 것으로는 구현할 수 없나요?

4. 상세페이지에서 채팅 버튼을 눌러 채팅방으로 진입했을 때에 채팅 목록 중 해당하는 채팅방을 클릭한 후 채팅에 진입하는 것이 아닌, 채팅방에 진입과 동시에 채팅에 진입할 순 없나요?

[codingapple]

1. 채팅이 추가되면 스크롤 아래로 내리라고 코드짜면 될듯요 
2. 전송버튼누르면 input의 value를 공백으로 바꿉시다 
3. 엔터누르면 채팅전송하라고 이벤트리스너 추가합시다 
4. 페이지 로드시 채팅방중 하나 골라서 클릭하라고 코드짭시다

[이형민]

2번과 3번은 선생님께서 알려주신 대로 해결했는데, 1번 4번은 어떻게 코드를 짜야될지 손을 못대겠습니다.. 도와주세요 선생님ㅠㅠ

[이형민]

여기서 뭘 손대야 될까요??

[이형민]

1번 질문에는 추가로, 채팅 내용이 추가됐을 때 뿐 아니라, 처음 페이지가 로딩되었을 때 가장 마지막에 전송 혹은 수신된 메시지가 출력되어있도록 하려고 합니다.

[codingapple]

scrollIntoView() 같은거 써보거나 스크롤 강제로 밑으로 내리는 다른 함수들이 있습니다 forEach 후에 넣으면 될듯요 
html요소 클릭시키려면 요소 찾아서 .click() 이런거 쓰거나 하면 될걸요 

[이형민]

제가 조금 더 응용해서, 기존 선생님이 작성하신 채팅방 템플릿에서 좌측 리스트와 우측의 채팅 입력 및 출력이 되는 곳을 다른 페이지로 구분해서 코드를 작성 중인데요
그렇게 하면, 좌측에서 채팅방을 클릭하면 해당하는 채팅방으로 이동할 수 있는 코드는 어떻게 짜야 하나요?

[이형민]

해결되었습니다

[이형민]

선생님 바로 위의 

제가 조금 더 응용해서, 기존 선생님이 작성하신 채팅방 템플릿에서 좌측 리스트와 우측의 채팅 입력 및 출력이 되는 곳을 다른 페이지로 구분해서 코드를 작성 중인데요
그렇게 하면, 좌측에서 채팅방을 클릭하면 해당하는 채팅방으로 이동할 수 있는 코드는 어떻게 짜야 하나요?

이 질문에서 예상치 못한 문제가 생겼습니다.

채팅이 db에 저장될 때, messages 컬렉션이 채팅방 doc 안에 생성되는 것이 아니라 또 하나의 doc가 생성되고 그 안에 messages가 저장되는 문제가 생겼는데
저장되는 경로를 어떻게 설정해야할까요?

[이형민]

detail.html 코드는 아래와 같고

[글쓴이]

글