친구 채팅 알림 (트러블 슈팅)
지난번에 만든 친구 채팅의 알림이 각각 왔으면 좋겠다는 생각이 들었다.
그래서 처음에는 온 채팅이 state에 배열의 형식으로 들어가는데 그것의 친구 id를 filter해서 해당 친구에게 알림이 얼마나 왔는지 length를 구해주었다.
그런데 이렇게 하니까 실시간으로 알림이 오기는 하지만 친구 채팅방에 들어가도 알림이 사라지지않고, 들어갈때 알림이 사라지게 하더라도 친구와 채팅을 하는 중임에도 알림이 오는 일이 발생하였다.
그래서 다시 로직을 짜게 됐다.
생각한 방법은 친구에게 온 채팅을 추가해주는 state이외에 다른 알림용 state를 또 만들어 그곳에 추가해 주는 것이였다.
추가해 준 후 똑같이 상대 id를 filter해서 length를 보여주었고 달라진 점은 해당 친구와의 채팅방에 접속할때 해당 친구한테 온 state를 초기화 시켜주었다. 이러니까 우선 접속할때 알림이 남아있는 문제는 해결되었다.
두번째 문제를 해결하기 위해서 생각한 방법은 해당 친구와의 채팅방에 접속해 있는 도중에는 알림 state에 채팅이 추가되지 않게 만들었다.
이렇게 하니까 접속중엔 알림이 안오고 채팅방을 나가면 다시 state에 추가돼 알림이 오게 되었다.
useEffect(() => {
socket.on("friendNew_message", (newChat) => {
console.log("accept");
setChatText((i: any) => [...i, newChat]);
if (window.location.href.split(":")[2] == newChat.roomId) {
return;
} else {
return setChatTextNotice((i: any) => [...i, newChat]);
}
});
}, []);
