[project] 방 입장시 방장확인하기

😎·2023년 1월 24일
0

PROJECT

목록 보기
19/26
post-thumbnail

📌

게임방 입장시에 방장이 누구인지 확인이 안되는 오류가 있었습니다! 해당 오류를 수정하기위해 해당 방의 방장이 현재 누구인지 확인하는 api를 사용하여 오류 수정 하였습니다 😃😃

      instance.get(`/rooms/${param.roomId}/ownerInfo`).then((res) => {
            for (let i = 0; i < allUsers.length; i += 1) {
              createPeerConnection(
                allUsers[i],
                socketRef.current,
                stream,
                allUsersNickNames[`${allUsers[i]}`],
                res.data.ownerNickname,
              );

🔧 먼저 PeerConnection을 생성하기전 현재 게임방의 방장 데이터를 얻어온 후 createPeerConnection 함수의 매개변수로 추가 해주었습니다!

 function createPeerConnection(
    socketID,
    socket,
    peerConnectionLocalStream,
    userNickName,
    ownerNickName,
  ) {}

🔧 전달받은 매개변수를 활용합니다!

userNickName === ownerNickName
      ? setUsers((oldUsers) => [
          ...oldUsers,
          {
            id: socketID,
            stream: null,
            nickName: userNickName,
            isCameraOn: false,
            isMyTurn: false,
            isOwner: true,
          },
        ])
      : setUsers((oldUsers) => [
          ...oldUsers,
          {
            id: socketID,
            stream: null,
            nickName: userNickName,
            isCameraOn: false,
            isMyTurn: false,
            isOwner: false,
          },
        ]);

🔧 createPeerConnection 함수 로직안에 위의 코드를 추가 해줍니다!

pc.ontrack = (e) => {
      setUsers((oldUsers) => oldUsers.filter((user) => user.id !== socketID));
      userNickName === ownerNickName
        ? setUsers((oldUsers) => [
            ...oldUsers,
            {
              id: socketID,
              stream: e.streams[0],
              nickName: userNickName,
              isCameraOn: false,
              isMyTurn: false,
              isOwner: true,
            },
          ])
        : setUsers((oldUsers) => [
            ...oldUsers,
            {
              id: socketID,
              stream: e.streams[0],
              nickName: userNickName,
              isCameraOn: false,
              isMyTurn: false,
              isOwner: false,
            },
          ]);
    };

🔧 createPeerConnection 함수로직안에 이벤트 등록 코드입니다. 위의 setUsers로직이 2번 필요한 이유는 마이크,오디오 비사용자 를 구별하기 위한 코드들입니다!

방장데이터를 받아 온 후 해당 데이터를 활용하여 setUsers 로직을 수정해주었습니다 😊😊

profile
개발 블로그

0개의 댓글