24/01/26 TIL __ 실시간 채팅기능 연결 수정(스트리머, 유저)

 

 

기존에 만들어 두었던 채팅기능을

스트리머 페이지가 완성됨에 따라 스트리머 측에서도 채팅을 보여주는게 필요했다.

 

프론트 채팅부분이 깨져서 이리저리 만져봤지만, 왜인지 동일하게 작동되지 않고,

상위요소의 css속성때문인지 이전 파일과 전혀 다르게 동작하고 있었다.

반응형 디자인을 하지 않았기 때문에 

px로 넣어서 고정시켜 주었고, 

인풋란도 정돈해 주었다.

(버튼은 다른 팀원분이 하신다고 해서 로직구현에 들어갔다)

 

토큰값도 전달이 완료되어서 이부분도 바꿔주었고, 

캐싱 기능및 전체적으로 다시 만지게 되었다.(기존에 처리가 미흡했던것이 다시 만지게 된 원인이였다.)

 

각기 다른 ejs파일에서 동일한 js파일로 사용되도록 구성했고,

이에 다라 분류가 필요했는데 찾아보니 다양한 방법이 있었다.

나의 경우 경로로 구분지어 줬는데,

if (path.includes('streaming')) {}

 

이런식으로 경로에 특정 단어가 포함하는 경우로 나뉘어 주었다.

진행하려고 하는 2 페이지의 경로는 완전 다르기 때문에 괜찮은 선택지라고 생각되었다.

 

해당 경로에 따라 존재하는 버튼이나 인풋이 약간씩 다르니, 이부분을 정리해서 이벤트를 걸어주었고,

토큰이 추가됨에 따라 토큰부분도 변경시켜 주었다.

기존 토큰은 jwt 토큰만을 반환했는데,

진행되면서 bearer 타입의 토큰만이 가드를 통과하도록 설정되어 있어 수정이 필요했다.

ws가드는 따로 만들어 사용하긴 했지만, 함께 수정해주기로 했다.

 

또한 캐싱 부분은 20개씩 끊어서 db에 넣고 캐시데이터는 삭제하고 있었는데,

이부분에 대한 로직은 현재 너무 비효율적이라 다시 수정하고 디벨롭 해야할 부분으로 일단 남겨두었다.

(당장 처리해야할 일 먼저 하기 위해..)

 

 

추가적으로 방송 종료 후 유저에게 알림 보내기 및 메인으로 이동 기능을 구현하고자 이야기가 나왔는데,

rtmp 보다 소켓에서 하는게 좀더 낫다는 이야기가 나와 만지게 되었다.

아무래도 유저들이 방을 이동해야 하니까 이런 측면이 있는 것 같다. 

방송이 종료되면 소켓통신으로 해당방에 속해있는 전체 유저에게 알림을 보냈고,

프론트에서 알림을 보내면서 동시에 메인으로 이동시키도록 기능도 추가했다.

 

 

프론트 알림 기능 코드

//방송 종료시 알림.경로 이동
socket.on('bye', () => {
    console.log('종료 bye 실행중');
    alert('방송이 종료되었습니다.');
    const url = `${URL}/`;
    return (window.location.href = url);
});

 

 

chat.gateway.ts 방송 종료시 알림 코드

    //TODO 방송 종료하면 나가기
    @SubscribeMessage('exit_room')
    async exitLiveRoomChat(client: Socket, channelId: string): Promise<any> {
        return this.server.to(channelId).emit('bye');
    }