안녕하세요 선생님 채팅방 history를 불러올때 scrollTo... - 인프런

웹소켓/STOMP 채팅서비스(spring, vue, redis)

pub/sub 아키텍처

안녕하세요 선생님 채팅방 history를 불러올때 scrollToBottom에 대해 질문 있습니다.

해결된 질문

작성

안녕하세요 !
프론트 코드에서 views 패키지의 StompChatpage.vue 파일에서 질문 있습니다.

create 함수에서 채팅 history를 불러온 다음
scroll을 bottom으로 내리려면 선생님 코드
가장 마지막에

this.scrollToBottom();

이 scrollToBottom()를 실행하면 될까요 ?

선생님의 코드

async created(){
        this.senderEmail = localStorage.getItem("email");
        this.roomId = this.$route.params.roomId;
        const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/chat/history/${this.roomId}`);
        this.messages = response.data;
        this.connectWebsocket();
    }

spring-boot websocket stomp-websocket pubsub vue-3

답변 2

bradkim

지식공유자

안녕하세요. 코드를 보시면

this.connectWebsocket();
이 함수를 호출하고 있고, 이미 이 함수에서 this.scrollToBottom(); 을 호출하고 있어서,

하시려고 하는 작업이 불필요해 보입니다.

김태우

질문자

강의에서도 이미 설명 해주셨군요 감사합니다 선생님

김태우

질문자

안녕하세요 ~ 선생님
코드를 보면 scrollToBottom 메서드가 메시지를 보냈을때 실행되는 콜백 함수에만 있는 것으로 보입니다.
채팅창에 들어간 직 후에는 이 함수가 실행이 안되니까 스크롤이 맨 위에 있는것 아닌가요 ?? 실제로 제 화면에서도 채팅창에 들어간 직후에 스크롤이 맨 위에 있습니다 .
제가 어디를 놓치고 있는건지 모르겠습니다.

()=>{
                    this.stompClient.subscribe(`/topic/${this.roomId}`, (message) => {
                        const parseMessage = JSON.parse(message.body);
                        this.messages.push(parseMessage);
                        this.scrollToBottom();
                    },{Authorization: `Bearer ${this.token}`})
                }

bradkim

지식공유자

답변이 늦었습니다~!

코드를 보시면,

created() 함수가 화면이 열리자 마자 실행되기에,

connectWebsocket 함수가 바로 실행됩니다.

해당함수에서 connect 요청을 바로 보내고, 커넥트와 subscribe가 성공하면 scrollToBottom이 실행됩니다.

물론, 웹소켓연결이 실패하면 scrollToBottom이 실행되지 않겠지만, 그러면 채팅서비스 자체가 안되는 것이기 때문에,

사실상 화면을 접속하면 바로 scrollToBottom가 실행된다고 볼수 있겠죠!!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 김태우님.

김태우님께서 프론트엔드의 StompChatpage.vue 파일에서 채팅 메시지를 불러온 후 스크롤을 하단으로 내리는 방법에 대해 질문하셨습니다.
보통 메시지를 로드한 후, 스크롤을 가장 하단으로 이동시키는 것은 사용자가 맨 마지막 메시지부터 확인할 수 있게 도와주기 위해 자주 사용되는 패턴입니다.

질문하신 코드의 created 라이프사이클 훅에서 메시지 데이터를 가져온 다음 scrollToBottom() 함수를 호출하시려는 것으로 보입니다. 이에 대해 간단히 설명드리겠습니다:

scrollToBottom 함수: 해당 함수는 일반적으로 페이지의 스크롤을 가장 하단으로 이동시키는 로직을 포함합니다. 예제 코드에서는 this.scrollToBottom(); 를 사용하여 스크롤을 내릴 수 있습니다.
함수 위치: scrollToBottom() 함수가 실제로 어디에 정의되어 있는지가 중요합니다. 그것이 자바스크립트 메서드로 컴포넌트의 메소드 내부에 정의되어 있거나, 외부로부터 가져온 경우라면 제대로 작동할 것입니다.
타이밍: 이 함수는 채팅 기록이 모두 로드되고 DOM이 처리가 완료된 뒤에 호출되어야 합니다. 데이터 로드 후, 스크롤을 바로 호출하면 스크롤이 정상적으로 완료되지 않을 수 있기 때문에, Vue.nextTick()을 이용하거나 this.$nextTick() 을 사용하여 DOM 업데이트가 반영된 후에 스크롤을 조절한다면 더 정확하게 작동할 수 있습니다.

예시:

async created() {
    this.senderEmail = localStorage.getItem("email");
    this.roomId = this.$route.params.roomId;
    const response = await axios.get(`${process.env.VUE_APP_API_BASE_URL}/chat/history/${this.roomId}`);
    this.messages = response.data;
    this.connectWebsocket();

    // DOM 업데이트 후 scrollToBottom 호출
    this.$nextTick(() => {
        this.scrollToBottom();
    });
}

다음과 같은 참고 자료에서도 더 많은 도움을 받으실 수 있습니다:
- Vue.js에서 Vue.nextTick 및 scroll 예제 - Vue 라이프사이클 및 스크롤 핸들링

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

안녕하세요 선생님 채팅방 history를 불러올때 scrollToBottom에 대해 질문 있습니다.