state 다루기 - 방장 변경 기능

[고은찬]

안녕하세요! 이런경우에 Redux-perist를 적용해야 하는게 맞는건지 잘 모르겠어서 질문 드립니다.

현재 만들고 있는건 음성채팅방 이구요 . 방 안에는 참가자들의 이미지들이 리스트 형태로 나열되있습니다.

방장의 경우 이미지 위에 왕관을 표시해 주는데요

방장이 변경됬을 때 이런식으로 로직이 진행됩니다. 

 

1. A가 음성채팅방을 생성하면 서버에 방이 생성되고 방장은 A

2. 방 정보를 불러옴 

3. 해당 방 정보 중 방장(A)의 idx를 state에 저장   " const [room_manager,set_room_manager] = useState(룸정보.방장idx)

4. 음성채팅방 (클럽하우스같은) 에 A(방장) ,B,C 가 있음

5. A(방장) 이 B에게 방장위임 버튼을 클릭

6. socket으로 서버로 B의 idx값 전송

7. 서버에서 해당 채팅방의 방장을 idx로 바꾸고 클라이언트로 변경된 방장의 idx를 다시 보내줌

8. 해당 방에 있는 참가자들(A,B,C) 모두 변경된 방장의 idx(B의 idx)를 받음

9.  set_room_manager(변경된 방장 B의 idx) 를 함

10. room_manager state 의 방장의 idx 값에 따라 방장에게만 왕관 표시를 해줌 

 

근데 문제가 이 경우 위 3번에 따라 초기 방장의 정보가 있기에 새로고침 시 A한테 왕관이 표시됩니다. 

이런 경우 어떻게 해야 할까요?! 이런것에도 redux-perist를 적용해야 하는 걸까요?! 

 

[고은찬]

아 그리고 이건 살짝 다른건데 웹에서 백그라운드에서 소켓을 유지하는 방법이 있을까요?!

현재 컴포넌트 밖에서 소켓 연결을 하고 있는데 새로고침해도 소켓이 유지되게끔 하고 싶습니다  

[codingapple]

웹소켓은 일시적 연결밖에 못해서 

재접속해도 채팅방이 지속되고싶을 땐 채팅방정보, 방장정보를 항상 DB에 저장해야합니다

리액트 홈 접속시

"내 아이디로 개설된 채팅방이 있으면 DB에서 가져오라"고 코드를 짜놓고

가져오면 그걸 state에 집어넣는 식으로 구현하면 되겠군요 

 

[고은찬]

답변 감사합니다!

근데 채팅방 처럼 채팅 기록이 남아야하는 방이 아니고 클럽하우스의 음성방이나 게임 방 같은 느낌? 이라 서버에서 방 만들 때 객체로 방 객체로 만들어서  저장하고 있어서요 ㅠㅠ

만약 DB를 사용하면 방 안에서 음소거, 방장 위임 같은 일들(방정보변경 및 참가자 추가,삭제) 이 일어날때마다 API요청을 하는게 비효율적이라 생각해서 그렇게 했는데

소켓을 서비스워커로 연결한다던가 (되는지는 아직 잘 모르겠습니다만..) 새로고침 했을 시 방 IDX를 가지고 방 데이터를 불러오는 방식은 어떨까요?? 

 

 

 

[codingapple]

네 방에 대한 모든 데이터를 서버변수에 [ { 방번호 : 'a', 참여자 : [], 방장 : 'kim' }, {}, {} ... ] 식으로 저장해두면 되겠군요 

아마 socket.io 쓰면 기본 기능같은걸로 그런게 있을 것 같은데 

그리고 원할 때마다 불러오면 되는데

근데 그게 DB 쓰는거랑 큰 차이는 없겠군요 

[글쓴이]

글