공감 기능 👍

<aside> ❓

공감 기능

하단 푸터 툴바에는 리액션 버튼을 구현할 예정이다. 해당 버튼을 누르면 모든 사용자의 화면에서 리액션을 누른 사용자의 비디오 컴포넌트에 리액션을 누른 것을 표시하는 기능이다.

</aside>

구현 방식 👾

소켓 방식으로 구현할 예정이다. 간단하게 시그널링 서버를 중개해서 reaction 이라는 이벤트를 만들어서 해당 이벤트를 클라이언트에서 emit하고 그 이벤트를 시그널링 서버 단에서 세션 내부의 모든 사용자에게 전파하는 방식으로 동작한다.

고민 💭

1. 모든 사용자에게 전파했을때 해당 리액션의 발신자가 누구인가?
   • 처음 emit 한 사용자의 소켓 id를 senderId로 해서 서버에서 추가한 뒤에 재전파
2. 모든 사용자가 전파받은 리액션을 띄울 때 어떻게 할 것인지?
   1. 고민을 많이한 부분
   2. PeerConnection을 배열 형태로 관리하는 상태에 reaction 속성을 추가하고 VideoContainer의 Props로 전달해주도록 수정

첫 번째 방식 🪓

SessionPage에서 관리하는 PeerConnection 객체에 reaction 정보를 추가한다.

interface PeerConnection {
  peerId: string; // 연결된 상대의 ID
  peerNickname: string; // 상대의 닉네임
  stream: MediaStream; // 상대방의 비디오/오디오 스트림
  reaction?: string;
}

그리고 서버에서 리액션 이벤트가 올 때마다 해당 PeerConnection 객체의 reaction 속성을 업데이트한다. 그리고 3초 뒤에 리액션을 지우기 위해서 timeout을 걸어둔다.

socket.on(
  "reaction",
  ({ senderId, reaction }: { senderId: string; reaction: string }) => {
    if (senderId === socket.id) {
      setReaction(reaction);
      const timeout = setTimeout(() => setReaction(""), 3000);
    } else {
      addReaction(senderId, reaction);
      const timeout = setTimeout(() => {
        addReaction(senderId, "");
      }, 3000);
    }
  }
);

발생한 문제