실전도 벌써 한 달째, 정말 끝을 향해 달려가고 있다.
월요일 배포를 목표로 하고 있으나... 할 수 있을련지...??
아직 배포하기엔 뭔가 완벽하지 않은 느낌이라 약간쓰 걱정이다 ㅎㅅㅎ...
이번주에 해결한 문제들
💥 ref null값 해결
room의 방장이 상대방의 스트림을 가져오지 못했다. 새 스트림을 담는 div를 생성해서 ref에 담아주는 형식이었는데 ref 생성보다 useEffect가 먼저 실행이 되어서 ref.current가 null 값이어서 에러가 자꾸 나는 것이었다.
-> ref가 true 일 때 실행하는 if문을 하나 추가하니 정말 쉽게.. 해결되었다. 뭔가 너무 허무...
✏️ WebRTC로 닉네임 데이터 전송
room에 입장하는 유저의 닉네임을 소켓으로 받으니 rtc로 받는 비디오와 생성 속도가 달라 유저간의 닉네임이 꼬이는 문제가 생겼다.
webRTC가 비디오뿐만 아니라 다른 데이터로 전송이 가능하다는 점에서 닉네임도 peer로 전송하기로 했다.
myPeer.on('open', (peerId) => {
myPeerId = peerId
socket.emit('peerJoinRoom', myPeerId, userNick, streamId)
})peer를 open할때 peerId뿐만 아니라 유저닉네임을 시그널링 서버로 보내주었다.
socket?.on('user-connected', (userId, userNick, streamId) => {
if (videoWrap.current) {
const call = myPeer.call(userId, myStream)
const dataConnection = myPeer.connect(userId, {
metadata: UserNick,
}) 그리고 user-connected가 될 때 데이터에 유저 닉네임을 담아 새로 보내주는 로직을 추가하였다. 그리고 나서 call부분에서 닉네임 데이터를 서로 주고받을 수 있는 코드를 추가했다.
peerId가 중복으로 입장되는 문제가 있었는데 요 코드를 추가했더니 갑자기 해결되었다(?)
이유는 모르겠으나.. 일단 해결이 되어서..좋다 근데 왜 해결된거지?
😵 죽은 사람 표기
그러다보니 게임 중 죽은 사람을 화면에 표시를 해야 했는데 화면에 뿌려지는 정보는 전부 peer 통신이라 물고 있는 데이터가 없어 어떻게 보여줘야 할지 고민을 많이 했다.
//죽은 사람 표기
if (killed === null) {
killed = []
}
let nickBox = document.getElementsByClassName('fl')
for (let i = 0; i < nickBox.length; i++) {
for (let e = 0; e < killed.length; e++) {
if (
nickBox[i].innerText === killed[e] ||
nickBox[i].innerText === nowKilled
) {
nickBox[i].classList.add('die')
}
}
}
결론적으로 usernick을 담은 div의 클래스명으로 배열을 가져온다음 innerText로 죽은 사람 명단과 비교하여 죽은 사람 분기를 줄 클래스명을 추가해 주었다.
이 부분은 배열 가공도 불가능했기 때문에 중복 for문에 if문까지 같이 돌려버려서.. 솔직히 좋은 코드는.. 아닌 것 같지만 알고리즘 문제 풀듯이 작업했기 때문에 조금 재밌었던 시간이었다.
그 밖에 한 것
- 모바일까지는 무리지만 태블릿 크기에서까지는 css 깨지지 않도록 만지기
- 첫번째 낮에는 투표 불가능, 시민 투표 막기 등 투표 디테일 만지기
- 네이버 로그인 성공, 네이버에 검수 요청 보내기
해야하는 것
- 게임 사운드
- 튜토리얼, 프로필 수정, 친구추가 창 css
